如何降低Next.js项目_app页面的First Load JS加载耗时

问题描述 #

我项目中_app页面的First Load JS耗时过高，想要降低该指标，据我了解无法对依赖库使用动态导入，请问有什么可行的优化方案？

具体优化手段 #

• 依赖按需引入
  排查是否全量引入了大体积第三方依赖，例如lodash、组件库等，替换为按需引入形式：
  • 工具类库（如lodash）避免全量导入import _ from 'lodash'，改为仅引入需要的方法：import debounce from 'lodash/debounce'，或替换为ES模块版本的lodash-es获得更好的tree shaking效果
  • UI组件库可接入babel-plugin-import等按需引入插件，仅打包用到的组件
  • Next.js 13+可直接在配置中开启optimizePackageImports实现依赖自动按需引入：

  // next.config.js
  module.exports = {
    experimental: {
      optimizePackageImports: ['antd', 'lodash-es'] // 填入需要优化的依赖名
    }
  }
  

• 调整打包分包规则
  在next.config.js中配置webpack的splitChunks规则，将第三方公共依赖从_app主chunk中拆分出来，避免所有依赖都打包到主JS文件：

  // next.config.js
  module.exports = {
    webpack: (config) => {
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            priority: 10,
          }
        }
      }
      return config
    }
  }
  

• 拆分_app内非首屏组件
  虽然无法动态导入依赖库，但可以对_app中不需要首屏渲染的组件（如全局弹窗、用户中心浮层、非首屏的全局挂件等）使用Next.js的dynamic方法动态导入，不需要服务端渲染的组件还可关闭ssr进一步减小首屏体积：

  import dynamic from 'next/dynamic'
  // 动态导入非首屏组件
  const GlobalModal = dynamic(() => import('../components/GlobalModal'), { ssr: false })
  

• 精简依赖
  • 用depcheck工具扫描项目中未使用的依赖，直接卸载移除
  • 将大体积依赖替换为轻量替代品，例如用dayjs替换moment，用轻量富文本编辑器替换重型编辑器等
• 提升资源压缩与缓存效率
  • 服务端开启brotli压缩，相比默认的gzip可以提升15%-20%的JS压缩率
  • 静态JS资源配置长缓存规则，二次访问时无需重复加载资源

注意：如果使用App Router模式，部分配置项需要参考对应Next.js版本的规则调整

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