Angular CLI esbuild输出大量小chunk，如何用Rollup/Webpack合并？

针对esbuild构建器生成大量微小Chunk的问题，你可以通过Rollup或Webpack对esbuild的输出进行后处理，实现合并小模块、按动态导入拆分Chunk的效果，匹配旧Webpack构建器commonChunk: false的输出特征。

前置配置：让esbuild输出ES模块 #

首先确保Angular CLI的esbuild构建器输出标准ES模块，方便后续工具处理。修改angular.json中对应项目的构建配置：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser-esbuild",
          "options": {
            // 其他配置...
            "outputOptions": {
              "format": "esm"
            },
            "optimization": {
              "scripts": {
                "minify": true,
                "splitChunks": false // 先禁用esbuild自带的代码分割，减少初始Chunk数量
              }
            }
          }
        }
      }
    }
  }
}

方案1：使用Rollup合并并拆分Chunk #

Rollup对ES模块的处理更原生，适合作为esbuild输出的后处理工具。

步骤1：安装依赖 #

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-dynamic-import-vars --save-dev

步骤2：创建Rollup配置文件rollup.config.js #

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
import path from 'path';

export default {
  input: path.resolve(__dirname, 'dist/your-project-name/main.js'), // 指向esbuild输出的主入口
  output: {
    dir: path.resolve(__dirname, 'dist/optimized'), // 最终优化后的输出目录
    format: 'es', // 保持ES模块格式以支持动态导入
    entryFileNames: 'main.[hash].js',
    chunkFileNames: 'chunk-[name].[hash].js',
    assetFileNames: '[name].[hash][extname]'
  },
  plugins: [
    nodeResolve({ browser: true }), // 解析浏览器环境的模块
    commonjs(), // 转换CommonJS模块为ES模块
    dynamicImportVars({
      include: ['**/*.js'] // 允许处理所有JS文件中的动态导入
    })
  ],
  manualChunks: (id) => {
    // 自定义Chunk拆分规则：将懒加载模块单独拆分，其余合并到主Chunk
    if (id.includes('lazy') || id.match(/src\/app\/features\/.*\.js$/)) {
      // 提取模块路径的最后两段作为Chunk名称，保证可读性
      const pathSegments = id.split(path.sep);
      return `${pathSegments[pathSegments.length - 2]}-${pathSegments[pathSegments.length - 1].replace('.js', '')}`;
    }
    // 非懒加载模块全部合并到主Chunk
    return 'main';
  }
};

步骤3：执行Rollup优化 #

在package.json中添加脚本：

{
  "scripts": {
    "build": "ng build",
    "postbuild": "rollup -c rollup.config.js"
  }
}

执行npm run build即可完成构建+后处理。

方案2：使用Webpack合并并拆分Chunk #

如果你更熟悉Webpack，也可以用它处理esbuild的输出。

步骤1：安装依赖 #

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

步骤2：创建Webpack配置文件webpack.config.js #

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'dist/your-project-name/main.js'),
  output: {
    filename: 'main.[contenthash].js',
    chunkFilename: 'chunk-[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist/optimized'),
    clean: true,
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 转换ESNext语法以兼容更多浏览器
          }
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'async', // 仅处理动态导入的模块
      minSize: 0, // 即使小模块也合并到对应Chunk
      cacheGroups: {
        lazyChunks: {
          test: /[\\/]src[\\/]app[\\/].*lazy.*\.js$/, // 匹配懒加载模块
          name: (module) => {
            // 提取模块名作为Chunk名称
            const modulePath = module.context.split(path.sep);
            return modulePath[modulePath.length - 1];
          },
          enforce: true // 强制拆分该组模块
        }
      }
    },
    runtimeChunk: 'single' // 提取运行时代码为单独文件（可选）
  },
  mode: 'production'
};

步骤3：执行Webpack优化 #

在package.json中添加脚本：

{
  "scripts": {
    "build": "ng build",
    "postbuild": "webpack --config webpack.config.js"
  }
}

执行npm run build完成整个流程。

关键注意事项 #

• 替换配置中的your-project-name为你的Angular项目名称，确保路径正确。
• 可根据项目实际的懒加载模块路径，调整manualChunks（Rollup）或splitChunks.test（Webpack）的规则，匹配你的项目结构。
• 如果esbuild输出中包含CSS等资源，Rollup/Webpack会自动处理资源文件的输出路径，无需额外配置。

内容的提问来源于stack exchange，提问作者Javier Marín