如何在Angular 15的NX工作区中减小vendor.js与main.js体积？

以下是针对性的优化步骤，解决你配置optimization: true未生效、打包体积超标的问题：

1. 修正NX项目的优化配置 #

仅在project.json中设置optimization: true不够，需要在生产环境配置中细化规则，确保完整优化生效：

"build": {
  "executor": "@nrwl/angular:webpack-browser",
  "options": {
    // 基础配置
  },
  "configurations": {
    "production": {
      "optimization": {
        "scripts": true,
        "styles": {
          "minify": true,
          "inlineCritical": true
        },
        "fonts": true
      },
      "sourceMap": false,
      "namedChunks": false,
      "extractLicenses": true
    }
  }
}

注意：优化逻辑仅在production配置下触发，开发环境默认保留调试代码，体积必然偏大。

2. 强制使用生产环境构建 #

执行构建命令时必须指定生产配置，否则不会启用压缩、tree-shaking等优化：

nx build your-app-name --configuration=production

3. 启用代码分割拆分体积 #

• 路由懒加载：将非登录页的模块拆分出去，避免全部打包进main.js：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { 
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) 
  }
];

• 拆分vendor依赖：自定义webpack配置拆分第三方包，避免单个vendor.js体积过大（可在project.json的build.options中通过webpackConfig指向自定义配置文件）：

// webpack.config.js
module.exports = (config, context) => {
  config.optimization.splitChunks = {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
      // 可拆分体积大的单独依赖，比如将echarts拆分为单独chunk
      echarts: {
        test: /[\\/]node_modules[\\/](echarts)[\\/]/,
        name: 'echarts',
        chunks: 'all'
      }
    }
  };
  return config;
};

4. 优化依赖项缩减体积 #

• 移除未使用依赖：用nx dep-graph生成依赖图谱，删除项目中未引用的包。
• 替换重体积依赖：用轻量库替代，比如用date-fns替换moment.js，用lodash-es按需导入而非全量引入：

// 不推荐：全量引入lodash
import _ from 'lodash';
// 推荐：按需导入
import { debounce } from 'lodash-es';

• 开启tree-shaking：确保tsconfig.json中compilerOptions的module设为ES2020+、target设为ES2020+，让webpack可以精准剔除未使用代码。

5. 强化压缩与混淆 #

• 配置Terser移除调试代码：在生产优化配置中添加Terser参数，删除console、debugger语句：

"optimization": {
  "scripts": {
    "terserOptions": {
      "compress": {
        "drop_console": true,
        "drop_debugger": true
      }
    }
  }
}

• 启用输出哈希与服务器端压缩：在project.json的生产配置中添加"outputHashing": "all"，同时在部署服务器上开启gzip或brotli压缩，实际传输体积可缩减60%-80%。

6. 分析打包体积定位问题 #

生成打包统计文件后，用工具直观查看体积占比：

# 生成stats.json
nx build your-app-name --configuration=production --stats-json
# 启动分析工具
npx webpack-bundle-analyzer dist/apps/your-app-name/stats.json

通过分析结果可以快速定位体积过大的依赖或模块，针对性优化。

7. 确保NX与Angular版本兼容 #

过时的NX版本可能导致优化逻辑失效，可执行nx migrate latest升级到与Angular 15兼容的NX版本（操作前请备份项目）。

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