Next.js包体积过大（约3MB）求优化方法

嘿，看了你的包体积分析图，Node Modules部分确实占了很大比重，这肯定会拖慢首屏加载速度。我整理了几个实战验证过的优化方向，一步步来解决这个问题：

1. 充分利用Next.js自带的代码优化能力 #

Next.js默认支持Tree Shaking，但要确保你的依赖是ES模块格式（而非CommonJS）——很多旧包还是用CommonJS，没法被Tree Shaking剔除未使用代码。另外，用动态导入拆分非首屏组件：

import dynamic from 'next/dynamic';

// 懒加载重型组件，首屏不加载
const HeavyChartComponent = dynamic(() => import('../components/HeavyChart'), {
  ssr: false, // 如果组件不需要SSR可以关闭，进一步减少服务端打包体积
  loading: () => <div>加载中...</div>
});

2. 替换大体积依赖，用轻量替代方案 #

从你的分析图里找出Top3的大体积包，看看有没有轻量化的替代品：

• 比如用lodash-es代替lodash（完全支持Tree Shaking）；
• 把moment.js换成dayjs或者date-fns（体积只有moment的1/10左右）；
• UI库如果用了全量导入的（比如antd、@mui/material），改成按需导入，或者换成shadcn/ui这种完全按需的组件库。

3. 自定义Webpack配置优化Node Modules打包 #

• 用next-transpile-modules处理那些没做Tree Shaking的第三方包，把它们转成Webpack能优化的格式：

// next.config.js
const withTM = require('next-transpile-modules')(['some-unoptimized-package']);

module.exports = withTM({});

• 把纯后端用的依赖排除在客户端打包之外，配置externals：

// next.config.js
module.exports = {
  webpack: (config) => {
    // 排除后端专用的大体积包
    config.externals.push({
      'aws-sdk': 'commonjs aws-sdk'
    });
    return config;
  }
};

4. 启用高级压缩与缓存策略 #

• 开启Brotli压缩（比gzip压缩率更高），可以用next-compression插件：

// next.config.js
const withCompression = require('next-compression');

module.exports = withCompression({
  compression: {
    brotli: {
      enabled: true,
      level: 11, // 最高压缩级别
      threshold: 10240 // 大于10KB的文件才压缩
    }
  }
});

• 部署时配合CDN，给静态资源（打包后的JS/CSS）设置长缓存时间，减少重复加载。

5. 清理项目中未使用的代码 #

• 用eslint-plugin-unused-imports自动移除未使用的导入语句，减少冗余代码；
• 检查全局导入的样式文件（比如全量导入的框架样式），换成组件级别的样式导入，避免打包未使用的样式代码。

6. 启用Next.js Output File Tracing #

Next.js 12+的Output File Tracing功能会自动分析项目依赖，只打包实际用到的文件，大幅减少Node Modules的冗余：

// next.config.js
module.exports = {
  output: 'standalone'
};

打包后会生成standalone文件夹，里面只包含运行所需的最小依赖集合，部署时用这个文件夹就行。

最后，你可以用@next/bundle-analyzer做更细致的分析，精准定位问题：

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
});

module.exports = withBundleAnalyzer({});

运行ANALYZE=true npm run build就能看到交互式的包分析界面，清楚看到每个模块的体积占比。

内容的提问来源于stack exchange，提问作者Vanson Wing Leung