如何减小从 Angular 构建的 js 文件的大小

当使用 Angular 构建应用时，生成的 js 文件可能会很大，这可能会导致应用程序加载时间过长并影响用户体验。因此，优化 Angular 应用程序的文件大小对于保持应用程序的响应性至关重要。下面是一些您可以采取的措施以减小从 Angular 构建的 js 文件大小。

使用 tree shaking

Tree shaking 是在构建过程中自动删除未使用的代码的方法。这意味着只有实际需要的代码才会被包含在最终生成的 js 文件中。Angular 支持 tree shaking，因此您应该确保在编写应用程序时使用功能性编程风格，这有助于保持您使用的代码数量最少。此外，确保您的生成的代码（包括您的库）是被标记为 ECMAScript 模块。

压缩代码

使用一些 JavaScript 压缩工具，如 UglifyJS，Terser 等，可以通过删除不必要的字符和代码注释来减小您的生成的 js 文件的大小。Angular CLI 默认会对你的代码进行压缩，并在构建过程中将压缩后的代码文件输出到dist目录下。

优化图片

如果您的应用程序包含大量图片，请考虑使用图像压缩算法将它们压缩以减小文件大小。您可以使用像 tinypng 这样的在线工具或在构建过程中使用 gzip 压缩算法。

减少模块大小

Angular 中使用的模块可能会包含许多不必要的依赖项。通过仅仅包括你需要的模块，你可以减少输出的生成量。从应用程序中删除您不需要的依赖项通常是一项较长的过程，但对于减小应用程序的整体大小至关重要。

按需加载模块

Angular 8 之后，你可以使用路由器和惰性加载模块来按需加载你的代码。这意味着您可以将应用程序根目录中的代码分成更小的 chunks，只在需要时加载它们。这有助于减小您的应用程序的初始载入时间和启动时间，同时减少了不必要的代码。

以上是您可以采取的措施以减小从 Angular 构建的 js 文件的大小的介绍。以下是一个示例，演示如何通过使用 ngx-build-plus 库来自定义 Angular CLI 的构建配置。

npm install ngx-build-plus --save-dev

"architect": {
  "build": {
    "builder": "ngx-build-plus:browser",
    "options": {
      "extraWebpackConfig": "./extra-webpack.config.js",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "src/tsconfig.app.json",
      "aot": true,
      "outputPath": "dist"
    }
  }
}

您现在具备减小从 Angular 构建的 js 文件的大小所需的知识和工具，祝你获得最好的结果！