Single SPA微前端搭建的Angular单组件项目main.js体积过大如何优化

核心原因说明 #

你观测到的9MB main.js是开发环境默认配置下的未优化产物：默认ng serve启动时会走开发配置，关闭AOT编译、开启完整sourceMap、不做代码压缩和Tree Shaking，体积偏高属于正常现象，生产构建后体积会大幅降低。
以下是可落地的优化方案：

1. 启动时指定生产配置（最快见效） #

你当前package.json中的serve:single-spa命令没有指定启用生产配置，修改命令即可直接开启所有官方优化项：

// 修改package.json的scripts节点
"serve:single-spa": "ng serve --disable-host-check --port 4203 --deploy-url http://localhost:4203/ --live-reload false --prod"

加--prod参数后会自动启用angular.json中production节点的配置：开启AOT、buildOptimizer、代码压缩，关闭sourceMap，优化后体积通常可以降到2MB以内。

2. 调整默认构建配置 #

如果不想每次启动都加--prod，可以直接修改angular.json的默认构建配置，让开发模式也启用优化：

// 调整angular.json > projects > app2 > architect > build > options节点
{
  "aot": true,
  "sourceMap": false,
  "optimization": true,
  "buildOptimizer": true,
  "vendorChunk": false
}

3. 微前端公共依赖外置（大幅降低体积） #

Single SPA架构下，Angular、rxjs等公共依赖可以统一放在主应用加载，子应用不需要重复打包，直接复用全局依赖即可：

// 修改extra-webpack.config.js
const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default

module.exports = (angularWebpackConfig, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options)
  // 外置公共依赖，由主应用统一引入挂载到全局
  singleSpaWebpackConfig.externals = [
    /^@angular\/.*$/,
    'rxjs',
    'rxjs/operators',
    'zone.js',
    'single-spa',
    'single-spa-angular'
  ]
  return singleSpaWebpackConfig
}

配置后子应用打包时会排除上述依赖，体积可再降低60%以上。

4. 生产构建额外优化 #

生产打包时可以开启gzip压缩，部署时Nginx配置gzip规则，实际传输体积还能再减70%左右。

注意：你当前配置中angular.json的项目名为app2，但package.json的构建命令中deploy-url写的是/dist/app1，路径不一致可能会导致资源加载失败，建议统一修改。

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