如何优化Next.js中chunks/pages/_app/及页面的First Load JS体积

数据老陈

2026-4-29

根据你描述的情况，我来帮你拆解下优化的方向，分_app和页面两个部分来针对性解决：

针对 chunks/pages/_app/ 的体积优化

你的_app chunk体积大但注释布局只减1kb，说明核心问题不在布局组件本身，得从这些角度排查：

检查全局依赖的导入方式：虽然你说node_modules不是主要问题，但有没有在_app.jsx里直接导入了看似轻量但实际带很多隐性依赖的模块？比如全局状态管理库的完整实例、某个UI库的全局样式/主题配置，或者一些全局工具类。举个例子，如果用了Redux，是不是把所有reducer都一次性导入了？可以拆分reducer，或者用动态导入加载非核心的状态模块；如果用CSS-in-JS（比如styled-components），确保babel配置里开启了babel-plugin-styled-components，它会帮你移除冗余的样式代码。
剥离非全局必需的逻辑：有没有在_app里写了页面专属的初始化逻辑？比如某些页面才需要的用户权限校验、第三方SDK初始化（比如统计、埋点），这些可以移到具体页面或者用动态导入延迟加载。比如埋点SDK可以改成：
```
// _app.jsx
useEffect(() => {
  import('your-analytics-sdk').then(sdk => sdk.init())
}, [])
```
这样就不会把SDK打包进_app的chunk里。
优化全局样式：如果用了Tailwind，确保开启JIT模式（mode: 'jit'），它会只生成你实际用到的样式类；如果是传统CSS，检查全局样式文件里有没有大量未使用的代码，或者用PurgeCSS自动清理冗余样式。另外，避免在_app里导入多个冗余的样式文件。

针对页面（如index.jsx）的体积优化

你提到index页面没复杂功能但关联15个模块，大概率是隐性依赖或者导入方式不对导致的：

深挖Bundle Analyzer的模块详情：别只看整体体积，点击index chunk展开那15个模块，看看每个模块的来源——是不是某个组件不小心导入了整个UI库？比如import { Button } from 'antd'会把整个antd打包进来，换成import Button from 'antd/es/button'或者用动态导入const Button = dynamic(() => import('antd/es/button'))就能大幅缩减体积。另外，检查有没有导入一些看似小但依赖链很长的工具库（比如某些日期处理库、格式化工具），尽量按需导入单个函数。
动态导入非核心页面组件：你已经用了动态导入，但可能还有一些次要组件（比如页面底部的友情链接、侧边栏的统计卡片）是同步导入的。即使是SSR页面，也可以用dynamic拆分这些组件：
```
const StatsCard = dynamic(() => import('../components/StatsCard'), { ssr: true })
```
这样这些组件会被拆成单独的chunk，不影响页面的First Load JS。
清理未使用的导入和代码：用ESLint的no-unused-imports插件自动移除页面里未使用的组件、函数或样式导入；检查有没有遗留的测试代码、console.log或者未使用的状态变量，这些都会增加打包体积。
排查重复模块：在Bundle Analyzer里看看有没有重复打包的模块（比如同一个库被打包了多次），这可能是因为依赖版本不一致或者Webpack配置的问题。可以用npm dedupe或者yarn dedupe来合并重复的依赖。

通用额外优化建议

除了上面的针对性优化，这些通用技巧也能帮你整体缩减体积：

开启Next.js的内置压缩：确保next.config.js里没有禁用压缩，Next.js默认会对JS和CSS文件开启gzip/brotli压缩，能大幅减少传输体积。你也可以在next.config.js里配置：
```
module.exports = {
  compress: true
}
```
优化图片资源：所有图片都用Next.js的Image组件，它会自动优化图片格式（比如转成WebP）、调整分辨率，避免加载过大的图片文件。
启用Tree Shaking：确保你的依赖都是ES模块（不是CommonJS），并且package.json里正确设置了sideEffects（比如CSS文件需要标记为sideEffects: ["*.css"]），这样Webpack能正确移除未使用的代码。
状态管理轻量化：如果用了全局状态管理，尽量拆分状态，只在需要的页面导入对应的状态模块，避免把所有状态逻辑都打包进_app。

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