排除模块串联，实现angular项目优化

通过排除模块串联优化插件，加快angular项目构建

背景

最近的微前端项目整合中，原有angular项目构建速度很慢，长达十到十五分钟，严重影响开发体验，针对此问题，对angular项目编译构建做了简单优化。

优化过程

1、对于动态导入模块，使用webpack提供的分块策略

从webpack v4开始，CommonsChunkPlugin被删除，转而使用了optimization.splitChunks。 webpack将根据以下条件自动分割块（翻译自官方文档）：

• 可以共享新块，或者模块来自node_modules文件夹
• 新的块将大于20kb
• 当按需加载块时，并行请求的最大数量将小于或等于30
• 初始页面加载时并行请求的最大数量将小于或等于30

此处只展示项目中优化部分配置：

  optimization: {
    //...
    splitChunks: {
      chunks: 'async', // 共有三个值可选：initial(初始模块)、async(按需加载模块)和all(全部模块)
      minSize: 30000, // 模块超过30k自动被抽离成公共模块
      minChunks: 1, // 模块被引用>=1次，便分割
      maxAsyncRequests: 5, // 异步加载chunk的并发请求数量<=5
      maxInitialRequests: 3, // 一个入口并发加载的chunk数量<=3
      name: true, // 默认由模块名+hash命名，名称相同时多个模块将合并为1个，可以设置为function
      automaticNameDelimiter: '~', // 命名分隔符
      cacheGroups: {
        // 缓存组，会继承和覆盖splitChunks的配置
        default: {
          // 模块缓存规则，设置为false，默认缓存组将禁用
          minChunks: 2, // 模块被引用>=2次，拆分至vendors公共模块
          priority: -20, // 优先级
          reuseExistingChunk: true, // 默认使用已有的模块
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 表示默认拆分node_modules中的模块
          priority: -10,
        },
      },
    },
  },

此方法效果不是很明显，构建速度稍有提升

2、跳过模块串联

这里其实是一种拿空间换时间的方式，webpack中==optimization.concatenateModules==的默认配置项的值为 true, 用于webpack 去寻找模块图形中的片段，哪些是可以安全地被合并到单一模块中。

具体步骤：

a、安装custom-webpack

npm i -D @angular-builders/custom-webpack

 "dependencies": {
    "@angular-builders/custom-webpack": "^8",
    ...

b、将angular.json配置更改为以下内容

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "libraryName": "ng-alain",
              "libraryTarget": "umd"
            }
          },
          ...

c、在extra-webpack.config.js新增配置，如果没有此文件需新建

module.exports = {
    ...
    optimization: {
       concatenateModules: false
    }
    ...
};

此方法效果明显，构建速度变化显著

结果

项目构建编译速度显出提升，angular打包时间由原来的平均的15分钟左右，减至4-5分钟；相较于之前，项目打包时间整体缩短40-50%。