“差异化加载”——Angular CLI v8 的一项新特性

太长不看

• Angular CLI 通过browserslist配置了解浏览器的支持范围。
• 如果应用程序需要支持 ES5 浏览器，而 TypeScript 目标版本高于 es5，则 CLI 会自动创建额外的包以实现兼容性。
• browserslist由于它是唯一真理来源，因此es5BrowserSupport将被弃用。

Angular CLI v8（目前为beta.15 版本）引入了一项名为“差异化加载”的新功能。它使我们能够摆脱对应用程序浏览器兼容性的担忧。

CLI 可以了解应用程序需要支持的浏览器，并可以为 ES5 浏览器和非 ES5 浏览器创建不同的软件包。

如何使用

要启用差异化加载，应用程序必须进行browserslist配置。该配置可以放在package.json`.js` 或 ` browserslist.js` 文件中。PostCSS 的自动前缀处理程序已经使用了此配置。最近通过 CLI 创建的应用程序应该包含此配置，您可以在项目文件中找到它。

browserslist/browserslist

即使你现在没有，也可以通过在线演示browserslist轻松创建。如果文件与 Angular CLI 位于同一目录下，Angular CLI 可以找到它package.json。

准备工作完成！如果您的 tsconfig 目标超出浏览器范围browserslist，Angular CLI 将创建两个不同的包；一个用于原始目标，另一个用于ES5 浏览器。

例如，我们来支持最新的两个版本的 Chrome 浏览器和 IE 11，browserslist具体如下：

last 2 Chrome versions, IE 11

就像tsconfig.json下面这样。

{
  "compilerOptions": {
    "target": "es2015",
        ...
  }
}

如您所知，IE11 是一个 ES5 浏览器。因此，如果没有差异化加载，此应用程序在 IE11 上会因为缺少es2015箭头函数等功能而报错class。

通过差异化加载，Angular CLI 可以预先识别这个问题。CLI 会判断应用是否需要支持 ES5 浏览器，并检查当前 tsconfig 中的 target 是否支持这些浏览器。
如果两者不匹配，则会将所有 bundle 分开，例如main-es5.bundle.js和main-es2015.bundle.js。

然后，<script>ES5 包的标签会使用nomodule属性进行放置。这样可以避免在不支持 ES5 的浏览器上加载 ES5 包。因此，在现代浏览器中，用户只会加载浏览器所需的较小包。这可以提高加载性能。

方案如何es5BrowserSupport？

是的，Angular CLI v7.3 添加了类似差异化加载的功能，但它仅适用于 polyfill。它es5BrowserSupport使用angular.json.

你可能不知道的 5 个 Angular CLI 功能

在 Angular CLI v8 之后，它将被弃用，browserslist因为同时维护 CSS 和JavaScript 的浏览器兼容性并非易事es5BrowserSupport。因此，CLI 团队采用browserslist单一数据源来判断应用程序是否需要支持 ES5 浏览器。

结论

• Angular CLI v8 beta 版已加入差异化加载功能。
• CLI 用于browserslist判断应用程序是否需要支持 ES5 浏览器。
• 如果 tsconfig 文件不匹配，CLI 会添加仅由 ES5 浏览器加载的不同捆绑包。

为了测试该功能，让我们使用以下命令创建一个应用程序；

$ npx @angular/cli@next new example-app
$ cd example-app
$ npm run build

感谢阅读！