angular - 如何在 Angular 10 中使用 es2016 或更高版本配置具有差异加载的浏览器定位

Question

我正在寻找一些关于使用差异加载时编译 Angular JS 目标输出的建议。

似乎开箱即用的 Angular 中的 typescript 被编译为 es5 和 es2015，并且根据浏览器功能，浏览器使用 es5 或 es2015。

为了保持最新状态，我一直在研究不同的 ES 版本以及支持它们的浏览器。

但是我遇到了困难，我似乎无法获得有关此主题的更多信息。

我决定将目标输出从 es2015 增加到 es2016，因为似乎大多数现代浏览器都完全支持 ES2016。

我通过在 tsconfig.json 中设置目标值来做到这一点

"compilerOptions": {
    "target": "es2016"
}

但是，我遇到了障碍。

我在编译时收到以下警告

Warning: Using differential loading with targets ES5 and ES2016 or higher may cause problems. Browsers with support for ES2015 will load the ES2016+ scripts referenced with script[type="module"] but they may not support ES2016+ syntax.

所以，基本上我想了解 Typescript/Angular/浏览器如何知道在使用特定浏览器时下载哪个文件是正确的。 (定位是如何工作的)

可以在每个浏览器实例上进行配置吗？ IE;- 这些浏览器将使用 es5，这些浏览器将使用 es2015，这些浏览器将使用 es2016。我只是不明白差异加载如何针对特定浏览器。

使用比 es2015 更高的版本是否有任何真正的好处(我猜输出中的填充代码更少， native 代码更多？更快？更小的编译文件？

提前致谢。

Answer 1

如果您在启用差异加载的情况下进行 Angular 构建，您会注意到在 index.html 中，每个模块都有两组脚本标记。

定位指定如下:

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

您会注意到两个区别，nomodule 和 type="module"。 nomodule 告诉最新的浏览器这是 es5，可以忽略。因此，最新的浏览器不会加载此脚本，但较旧的浏览器会加载并执行此脚本。 Check nomodules attribute in mdn .

此外，Angular document说它不支持 es2015 之外的目标的差异加载，并且会抛出您提到的警告。

您可以使用.browserslistrc配置支持的浏览器版本。检查this & this .

通过使用 es2015，您应该已经获得了更小的 bundle (而旧版浏览器将继续加载更大的 es5 bundle )。如果用户使用现代浏览器但版本较旧，那么如果目标不是 es2015，则可能会出现运行时错误，假设您使用 chrome 69 支持的 Array.flat 但用户使用 chrome 68 或其他版本。