Next.js生产环境生成过多JS/CSS顺序加载，如何优化各类资源打包？

默认分片加载的原因说明 #

Next.js 默认采用路由级代码分割策略，不会将所有资源打包为单个文件，该设计的初衷是减少首屏加载体积，避免用户一次性加载全站点的冗余代码。你观察到的顺序加载现象，大概率是HTTP/1.1协议下浏览器同域名并行请求数限制（通常为6个）导致的请求排队，并非资源本身无法并行加载。 #

各类型资源优化方案 #

JS 资源优化 #

• 调整代码分割策略：在next.config.js的nextConfig中新增webpack配置，合并公共依赖chunk，减少重复打包，同时将小体积静态资源转为base64内联，减少请求数：

const nextConfig = {
  images: {
    domains: ['ibexcdn.com'],
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 合并公共依赖到统一chunk
      config.optimization.splitChunks.chunks = 'all';
      config.optimization.splitChunks.cacheGroups.commons = {
        name: 'commons',
        chunks: 'all',
        minChunks: 2,
      };
      // 小于8KB的静态资源自动转base64内联
      config.module.rules.forEach(rule => {
        if (rule.type === 'asset') {
          rule.parser = {
            ...rule.parser,
            dataUrlCondition: {
              maxSize: 8 * 1024
            }
          }
        }
      })
    }
    return config;
  }
};

• 非首屏组件按需加载：对弹窗、次级内容等非首屏必需组件，使用next/dynamic实现懒加载，降低首屏需要请求的资源数量
• 精简依赖：运行ANALYZE=true npm run build调用你已配置的打包分析工具，排查并移除冗余第三方依赖，大体积依赖改为按需引入

CSS/SCSS 资源优化 #

你将SCSS存放在components目录本身是合规的，不需要强制迁移到styles目录，可按以下规则优化：

• 组件级样式建议使用.module.scss CSS Modules规范，既可以避免样式冲突，其按需加载的特性也不会产生冗余代码
• 全局通用样式（重置样式、主题变量、全局公共类）统一抽取到全局样式文件，在根_app.tsx或layout.tsx中引入，这部分会自动打包为单个全局CSS文件
• 开启CSS优化：在nextConfig中新增配置，合并CSS chunk、开启生产环境压缩：

const nextConfig = {
  // 原有其他配置
  experimental: {
    optimizeCss: true,
  },
  compress: true,
}

字体资源优化 #

• 优先使用Next.js内置的next/font加载字体：它会自动完成字体子集化、CSS内联、避免FOIT（字体不可见闪烁），减少额外的字体请求，不需要额外配置即可实现最优加载效果
• 你现有配置的PWA字体缓存规则可以保留，二次访问时可以直接读取缓存，无需重复请求

图片资源优化 #

继续使用内置的next/image组件即可，你已配置的CDN域名规则可以正常生效，组件会自动完成格式转换（输出WebP/AVIF等高压缩比格式）、响应式裁剪、懒加载，大幅减少图片体积和不必要的请求。 #

通用加载性能优化 #

• 服务器层面升级到HTTP/2或HTTP/3协议，支持同域名下多路并行请求，直接解决HTTP/1.1下的请求排队问题，所有静态资源可同时加载
• 配置静态资源CDN，在nextConfig中新增assetPrefix配置指向你的CDN地址，大幅提升跨地域资源加载速度

内容的提问来源于stack exchange，提问作者amin71