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

Question

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

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

如果我们有两个具有差异加载功能的独立捆绑包，是否会导致构建大小问题和应用程序性能？

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

Answer 1

\n

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

\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

<script>with 标签将type="module被较新的浏览器下载，并且它们将忽略<script>withnomodule属性：

\n\n

\n

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

\n

\n\n

如果默认值是 text/javascript，脚本元素的 HTML \xe2\x80\x9cnomodule\xe2\x80\x9d 属性的用途是什么？

\n