时间戳

首页 > 解决方案 > Angular 8 中的差异加载如何管理两个单独包的大小？

angular - Angular 8 中的差异加载如何管理两个单独包的大小？

问题描述

差异加载是一种策略，其中 CLI 构建两个单独的包作为已部署应用程序的一部分。

Angular CLI 8 及更高版本默认支持差异加载。对于工作区中的每个应用程序项目，您可以根据应用程序项目中的 browserslist 和 tsconfig.json 文件配置生成构建的方式。

如果我们有两个具有不同加载特性的独立包，会导致构建大小问题和应用程序性能问题吗？

请分享您的建议，以便我可以在当前项目中选择此功能。

标签： angularangular8

解决方案

差异加载是浏览器根据自己的能力在现代或传统 JavaScript 之间进行选择的过程。现在，我们默认通过执行应用程序的现代构建 (es2015) 和旧版构建 (es5) 来利用这一点。当用户加载您的应用程序时，他们会自动获得所需的捆绑包。

https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

简而言之，它将使较新的浏览器获得具有较新功能的捆绑包，而较旧的浏览器将获得转换后的版本。所以是的，它会增加您在服务器上的应用程序的大小，但不会增加将要下载的捆绑包（您不会同时下载两个捆绑包等）。

例如，如果您查看生成的 index.html：

<script src="runtime-es2015.33c6d44d6f111520cede.js" type="module"></script>
<script src="runtime-es5.33c6d44d6f111520cede.js" nomodule defer></script>

较新的浏览器将下载<script>with 标记，它们将忽略with属性：type="module<script>nomodule

nomodule 属性是一个布尔属性，可防止脚本在支持模块脚本的用户代理中执行。

如果默认为 text/javascript，脚本元素的 HTML“nomodule”属性的目的是什么？

推荐阅读