angular 7项目构建后如何减少main.*.js文件？答案

【问题标题】：how to reduce main.*.js file after build of angular 7 project?angular 7项目构建后如何减少main.*.js文件？
【发布时间】：2020-10-29 17:57:56
【问题描述】：

在构建 angular 7 项目后，我们的 main.*.js 文件大小为 8.8 mb。我们已经在使用 gzip 压缩。您能否建议我们如何减小它的大小，以便它不会花费更多时间来加载？

【问题讨论】：

我建议您使用npmjs.com/package/webpack-bundle-analyzer 来找出占用太多空间的原因。我对 Angular 不是很熟悉，但是如果有 webpack.config.js 文件（或类似名称），您可以查看此页面进行优化：webpack.js.org/plugins/split-chunks-plugin。您还需要使用dynamic imports 来减少初始js 交付，从而加快页面加载时间。

【解决方案1】：

您需要将组件划分为模块，然后使用模块延迟加载，这会将这些组件源带到单个模块并与main.*.js分开加载

【讨论】：

【解决方案2】：

使用aot模式构建：ng build --aot

或

ng build --prod

更多内容在cli docs

另请参阅新的 Angular 引擎（最新版本）：ivy

【讨论】：

"scripts": { "build:ssr": "cross-env NODE_OPTIONS=--max_old_space_size=42000 npm run build:client-and-server-bundles && npm run webpack:server", " build:client-and-server-bundles": "ng build --prod --aot --optimization --build-optimizer --vendor-chunk --common-chunk --extract-licenses --extract-css -- source-map=false && ng run angular.io-example:server", "webpack:server": "webpack --config webpack.server.config.js --progress --colors", },
使用上述脚本后，供应商 js 文件也为 15 mb