如何减少Angular 6中的polyfills脚本的初始负载？

Question

我正在尝试减少我的有角（Angular 6）应用程序的页面初始负载。我已经懒惰地加载模块，最小化js和css，在我的构建脚本中添加“ --prod --build-optimizer --aot”标签，但没有找到任何减少“ polyfills”脚本执行时间的解决方案。 我使用“ Chrome审核”工具来查看网页效果。

预先感谢

Answer 1

可能值得研究即将发布的Angular 8s“差异加载”功能。这将仅允许加载特定于用户的浏览器所需的那些polyfill（对于大多数现代常绿浏览器而言，这意味着：很少。）

在发布之前，这是一篇有关该主题的文章（其中很多）：https://dev.to/lacolaco/differential-loading-a-new-feature-of-angular-cli-v8-4jl

Answer 2

您可以做的另一件事是在ng构建中使用--vendorChunk = true | false参数。 这将创建一个仅包含供应商库的单独捆绑软件。

e.g. "ng build --prod --buildOptimizer --aot --vendorChunk"

参考：https://angular.io/cli/build

Answer 3

您可以使用此命令

ng build --prod --aot --optimization --build-optimizer --vendor-chunk --common-chunk --extract-licenses --extract-css --source-map=false

基本上，您将在aot模式下进行构建，并通过一些优化使用树状交换

• -optimization：启用构建输出的优化。
• -vendor-chunk：使用仅包含供应商库的单独捆绑软件。
• -common-chunk：使用单独的捆绑软件，其中包含跨多个捆绑软件使用的代码。
• -extract-css：将全局样式的css提取到css文件中，而不是js文件中。
• -build-optimizer：使用'aot'选项时启用@ angular-devkit / build-optimizer优化。
• -source-map = false：删除源地图也会减小捆绑包的大小

您可以对angular cli v8中的“差异加载”进行研究。这项功能使我们能够检测是否在现代浏览器中运行了角度应用程序，而不必下载polyfill文件，这样也可以减小捆绑包的大小