Angular 8中的差异加载如何管理两个单独束的大小?

时间:2019-12-04 14:49:20

标签: angular angular8

  

差异加载是一种策略,其中CLI会构建两个单独的捆绑软件作为已部署应用程序的一部分。

     

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

如果我们有两个具有差异加载功能的单独捆绑包,是否会引起构建大小问题和应用程序性能?

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

1 个答案:

答案 0 :(得分:1)

  

差异加载是浏览器根据其自身功能在现代JavaScript或旧版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>的{​​{1}}标签,它们将忽略具有type="module属性的<script>

  

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

What’s the purpose of the HTML “nomodule” attribute for script elements if the default is text/javascript?