Next.js项目打包踩坑

今天项目终于到了打包上传的时候了，由于是使用TS语言开发的项目，整体npm run build的过程还算顺利，几个any上去总算是打包成功。next项目不像一般vue或者react项目，由于它是服务端渲染，它不会生成index.html文件。所以他打包完后上传到服务器还是需要服务端具备node环境的。因为这是我第一次打包上传项目，还是挺值得我记录的。

接下来请看这个坑：

next打包后的产物是这个.next文件，而我们需要上传的文件有.next、public（静态资源文件）、package.js（配置文件）。但是现在看到这个.next文件，300多兆！！它的大小绝对是不正常的。这个大小或许是比我整个项目文件都要大。我首先想到的是webpack配置文件的问题。

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
      },
    ];
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  webpack: (config, { isServer }) => {
    // 假设你要排除的文件在 public/large-file.txt
    config.module.rules.push({
      test: /large-file\.txt$/,
      use: 'null-loader',
    });
    return config;
  },
};

export default nextConfig;

这个文件我根本没来得及配置什么打包工具，平平无奇！不是他的问题。难道是图片资源也打包上去了？不对!就算打包上去也不会这么大。而且我使用的图片资源都是网络地址，而且使用的静态资源都是存在publick文件下，根本不参与项目打包。而且在之前打包排错的过程中我也遇到过太大的资源包打包是会报错的，要么是弄成网络接口，要么就是放public文件下一起上传服务器。

后来我使用打包结果分析插件“cross-env”，可以使用它来对项目打包文件大小做出可视化的分析。

npm install @next/bundle-analyzer

• 修改 package.json 的 scripts 部分：

  "scripts": {
    "build": "next build",
    "analyze": "cross-env ANALYZE=true npm run build"
  }

• 修改next.config.mjs文件

  import path from 'path';
  import { fileURLToPath } from 'url';
  import withBundleAnalyzer from '@next/bundle-analyzer';
  
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  
  const nextConfig = {
    async rewrites() {
      return [
        {
          source: '/api/:path*',
          destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
        },
      ];
    },
    sassOptions: {
      includePaths: [path.join(__dirname, 'styles')],
    },
    webpack: (config, { isServer }) => {
      // 其他优化逻辑
      if (!isServer) {
        config.resolve.fallback = {
          ...config.resolve.fallback,
          fs: false, // 确保客户端不打包 fs 模块
        };
      }
  
      return config;
    },
    // 禁用生产环境的 source maps 以减少体积
    productionBrowserSourceMaps: false,
  };
  
  // 添加 bundle 分析工具
  export default withBundleAnalyzer({
    enabled: process.env.ANALYZE === 'true',
  })(nextConfig);

• 然后执行

  npm run analyze

  在打包过程中你就会进入到一个浏览器界面这就是对打包结果的可视化分析，我们可以看到最大的文件是一个全国地区的地图的json文件，那是参与echarts地图的一个插件的文件，但也只有200多kb完全正常完全可以接受。接下来我就只能对.next文件分析了，经过层层剖析，终于发现，最大的那个文件占了差不多90%的体积，只能是它出问题了。

• 结果全在这个文件里。

• 关于这个文件：持续集成 (CI) 构建缓存 | Next.js 中文网 (nodejs.cn)https://next.nodejs.cn/docs/pages/building-your-application/deploying/ci-build-caching/这里是答案。总之他是缓存的，所以上传服务器它可以舍弃。完事儿。删除它后就可以正常上传了这次经历我也学会了使用可视化打包工具来分析打包结果！哈哈哈一直在学习的路上！！！！