如何解决Next.js项目执行npm run build时的First Load JS共用问题

先说明：这是正常的构建统计 #

你看到的First Load JS shared by all是Next.js生产构建完成后自动输出的性能统计信息，用来展示所有页面都会共享加载的公共JS代码体积，完全不是构建错误——看最后一行○ (Static) prerendered as static content就知道，所有静态路由都已经预渲染成功，构建是完全正常的。

你的构建输出翻译成中文是这样：

PS C:\Users\Devloper\client> npm run build
> solid-nextjs@0.2.0 build
> next build
  ▲ Next.js 14.2.3
正在创建优化的生产构建
路由(app)                                路由单独体积  初始加载总JS体积
┌ ○ /                                    31.8 kB         156 kB
├ ○ /_not-found                          871 B          87.9 kB
├ ○ /auth/signin                         3.51 kB         134 kB
├ ○ /auth/signup                         3.51 kB         134 kB
├ ○ /blog                                714 B           132 kB
├ ○ /blog/blog-details                   182 B            99 kB
├ ○ /docs                                552 B          94.3 kB
├ ○ /error                               175 B          92.3 kB
└ ○ /support                             1.82 kB         126 kB
+ 所有页面共享的初始加载JS体积            87 kB
  ├ chunks/23-1892795f6819b9e1.js        31.5 kB
  ├ chunks/fd9d1056-fe292c6953b42a04.js  53.6 kB
  └ 其他共享代码块(总计)                  1.9 kB
○  (静态) 已预渲染为静态内容

如何减小共享JS体积 #

如果觉得这部分体积太大，可试试这些优化手段：

• 按需加载依赖：别全局导入大体积库，用import()动态导入，只在需要的页面加载对应的组件或依赖。
• Tree Shaking优化：确保第三方库支持Tree Shaking，在next.config.js里把productionBrowserSourceMaps设为false，同时检查package.json的sideEffects配置是否准确。
• 替换重依赖：用轻量级库替代大体积库，比如用date-fns代替moment.js，用react-hook-form代替复杂表单库。
• 启用Next.js独立输出模式：在next.config.js里配置output: 'standalone'，能大幅减少构建输出的冗余文件。
• 分析体积占比：安装@next/bundle-analyzer后运行npm run analyze，生成可视化报告，精准定位体积大的模块。

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