优化Angular应用构建时间

问题描述

在开发过程中，当我们尝试使用命令 ng build --prod 构建优化后的 Angular 应用时，通常会遇到构建时间过长的问题。这是因为在生产环境中，Angular 应用需要进行多个优化，包括 AOT 编译、Tree-shaking、代码压缩、缓存等等，因此构建时间会较长。特别是当项目变得更加庞大时，构建时间会进一步增加。

解决方案

1. 使用 Web Workers

Web Workers 是一种可以在后台运行 JavaScript 代码的浏览器 API。通过在 Web Workers 中运行构建任务，可以让主线程保持响应，并减少构建时间。Angular CLI 已经内置了 Web Workers 的支持，只需要在配置文件 angular.json 中增加以下配置即可：

{
  "projects": {
    "your-project-name": {
      ...,
      "architect": {
        ...,
        "build": {
          ...,
          "options": {
            ...,
            "webWorkerTsConfig": "tsconfig.worker.json",
            "webWorker": true
          }
        }
      }
    }
  }
}

tsconfig.worker.json 内容：

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/worker",
    "target": "es2015",
    "lib": [
      "es2017",
      "webworker"
    ],
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

2. 减少打包文件大小

Tree-shaking 是一种可以剔除未使用代码的技术，可以显著减少打包文件的大小。在 Angular 应用中，可以通过尽可能使用模块化的代码风格来帮助 Tree-shaking 较好的工作。另外，还可以使用 @angular-devkit/build-optimizer 这个优化工具，它可以自动化地进行一些优化操作。

3. 多线程构建

通过启用多线程构建，可以充分利用 CPU 和服务器资源，从而加快构建速度。@angular/cli 提供了插件 @angular-builders/custom-webpack 来支持多线程构建，只需要在 angular.json 中做如下配置：

{
  "projects": {
    "your-project-name": {
      ...,
      "architect": {
        ...,
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            }
          },
          ...
        }
      }
    }
  }
}

extra-webpack.config.js 中可以指定多线程构建的配置：

const { AutoWebPlugin } = require('web-webpack-plugin');
const os = require('os');

const WEBPACK_CONFIG_BASE = require('./webpack.config.base');

const workerCount = os.cpus().length - 1;

const autoWebPlugin = new AutoWebPlugin('./src/pages', {
  template: './template.html',
});

module.exports = () => {
  return {
    ...WEBPACK_CONFIG_BASE,
    mode: 'production',
    optimization: {
      splitChunks: {
        chunks: 'all',
        minChunks: 2,
      },
    },
    module: {
      rules: [
        ...WEBPACK_CONFIG_BASE.module.rules,
      ],
    },
    plugins: [
      ...WEBPACK_CONFIG_BASE.plugins,
      ...autoWebPlugin.webPlugins,
    ],
    entry: autoWebPlugin.entry({
      use: [
        '@angular-builders/custom-webpack/node_modules/worker-loader',
        {
          loader: '@angular-builders/custom-webpack/node_modules/thread-loader',
          options: {
            workers: workerCount,
          },
        },
      ],
    })
  }
}

这里使用了 thread-loader 和 worker-loader 进行构建。

4. 使用缓存

在重复构建中，缓存可以大大降低构建时间。@angular/cli 也支持构建的缓存，只需要在 angular.json 中做如下配置：

{
  "projects": {
    "your-project-name": {
      ...,
      "architect": {
        ...,
        "build": {
          "options": {
            ...,
            "cache": true
          }
        }
      }
    }
  }
}

结论

优化 Angular 应用的构建时间并不是一项简单的任务。不过，通过上述的几种方式，我们可以显著地缩短构建时间，让我们的开发过程更加高效。