角度8在这里！了解它最酷的新功能之一：差速加载。差异加载允许您向不同的浏览器提供不同的捆绑包，使您的应用程序更快！在我写这篇文章的时候，Angular8只出版了一个星期，但是已经有17000篇"最新消息"发表了。我将推荐您参考官方的Angular发布公告，而不是将我自己的观点放在这堆文件上，但以下是要点：不，艾薇还没准备好（这是一个选择加入预告片）。不，Bazel还没准备好（这是一个可选预告片）。构建器允许您扩展和定制CLI。例如，现在可以从CLI部署到Firebase和其他提供者。对webworker的支持得到了改进，比如可以从CLI生成它们并在应用程序中使用它们。您可以使用标准import（）语法，而不是使用Angular特有的"magic string"语法进行延迟加载。你甚至可以为你的应用程序自动执行这个与角度惰性路线修复工具。新的统一位置服务改进了AngularJS$位置服务的迁移。Angular团队创建了一个简化的入门指南。有一个新的弃用指南，以帮助用户更新角度。默认情况下，在CLI中启用差异加载。在本文中，我将深入讨论最后一个问题：差分加载。那是什么？为什么重要？我需要怎么做（如果有的话）？"角度8在这里！它具有差异加载、更好地支持web Worker等特点。"在推特上留言什么是差动负载？就像大多数科技界的流行语一样，"差异加载"一词对其实际含义完全不透明。简而言之，差异加载意味着将更新、更华丽的代码发送给较新的浏览器，将稳定的遗留代码发送给旧浏览器。这通常可以理解为两件事：现代语法和polyfills。在支持JavaScript最新语法更改的较新浏览器上（如ES2015中的arrow函数或ES2017中的async函数），最好还是原样发送代码，尽可能少地使用polyfill来保持下载时间。在传统浏览器上，我们需要transpile代码和更多polyfill才能正常工作。这样，较新的浏览器不会因为必须加载大量的捆绑包而受到旧浏览器的惩罚，但是旧浏览器不会被抛在九霄云外。听起来很酷，对吧？这是怎么回事？现代浏览器能够解释脚本HTML标记中的模块类型并忽略nomodule属性。看起来像这样：当一个现代浏览器（比如新版Chrome）在这个页面上运行时，它会知道只加载fancyModernBundle。同样，当一个旧的浏览器看到这一点时，它不会识别模块类型，只加载legacyBundle。（来源）通常如何设置差分加载您现在可能已经猜到，为了利用差异加载，您需要根据浏览器支持划分JavaScript代码。""很简单，"你想，"我只需将转换后的代码插入nomodule标记中，将原始代码插入module标记中。"好吧，这并不是那么简单。不幸的是，并非所有浏览器都支持JavaScript的所有相同功能。除此之外，您的用户可能不会使用与您相同的浏览器。事实上，如果你的用户遍布世界各地，他们甚至可能不会使用你听说过的浏览器——Opera Mini在非洲拥有超过1亿的用户！事实证明，把你的包裹分成不同的负荷是艺术和科学的结合。像你的编译器一样，把你的代码拼凑在一起。幸运的是，有一个名为browserslist的配置工具可以为您完成几乎所有的繁重工作。Browserslist可以与Babel等工具一起工作，本质上是一个接受查询字符串的配置工具，它可以针对查询字符串运行Can I Use data。工具通过包.json:// 包.json"浏览器列表"：["上一个版本"，">1%"，"维护的节点版本"，"没死"]或者在另一个名为.browserslistrc的配置文件中：//.browserslistrc#我们支持的浏览器上一个版本>1%维护的节点版本没死这两种格式都包含相同的查询：最新版本：每个浏览器的最新版本>1%：由全局使用统计选择的浏览器版本维护的节点版本：全部节点.js版本，仍然由节点.js基金会not dead：不包括"dead"浏览器，这些浏览器与最近2个版本查询中的浏览器相同，但在全局使用率统计中低于0.5%，并且在24个月内没有官方支持或更新Browserslist还有一个对许多人都有效的默认查询。他们对他们的GitHub repo上的查询有很好的解释，甚至还有一个名为浏览器列表它允许您插入查询并查看受支持浏览器的可视列表。角8的差分载荷通常，您需要配置bundler和Babel或TypeScript，以便使用browserslist将代码拆分为正确的bundle。使用Angular CLI的第8版，您实际上可以将此设置直接设置为无需执行任何操作！这太棒了，因为在现代浏览器中，对于角度较大的应用程序，差异加载平均可以节省7-20%的包大小。事实上，角度.io当团队启用差异加载时，为现代浏览器节省了超过40kB的初始捆绑包大小。想自己看看这个吗？真的很简单！"在Angular8中，在现代浏览器中，差异加载平均可节省7-20%的包大小！"在推特上留言更新为角度8首先，确保安装了Angular CLI的最新版本：npm安装-g@angular/cli如果要在现有项目上尝试此操作，可以通过运行以下命令将其更新为Angular 8：ng更新@angular/cli@angular/core如果你的应用程序需要升级的话，如果你的应用程序需要升级的话，请检查一下。否则，您可以创建一个新的应用程序：ng新差异加载按照有关路由和样式的提示，然后就可以开始了！配置和建筑如果在您喜欢的编辑器中打开新项目，您会注意到一个名为browserslist的新文件。默认情况下，它包含以下内容：//浏览器列表>0.5%最近2个版本火狐ESR没死非IE 9-11#对于IE 9-11支持，删除"not"。您可以调整此列表以更好地与您自己的用户统计数据相匹配。关于这一点，有一个非常重要的注意事项：看到IE9-11部分了吗？如果您需要支持这些浏览器，可以删除not，但这是有代价的。这些版本的Internet Explorer无法利用差异加载，因此它将被禁用。如果你打开tsconfig.json文件，您将看到target属性中有一个特别大的变化：它默认设置为es2015，而不是es5。现在您已经了解了配置的位置，请使用以下命令构建应用程序：ng构建--生产完成后，打开距离/索引.html注意脚本标记：看到所有的模块和nomodule实例了吗？有棱角的猫帮你做到了！角向差动负载现在你只需要看到它的行动。安装一个简单的服务器，如http服务器：npm安装-g http服务器然后，在项目文件夹中，在dist文件夹中提供项目：http服务器分布/差异加载/打开Chrome或其他现代浏览器，然后转到服务器的地址（在我的机器上是：8080，但可能对您有所不同）。打开"开发人员工具"的"网络"选项卡并刷新页面。您应该只看到名称中包含es2015的脚本！其他设置在我结束本教程之前，有一个简短的提示。如果您更改不同的配置，您可能会遇到四种不同的情况：单个ES5构建（禁用差异加载，目标是ES5）具有条件多填充的单个ES5构建（启用差异加载，目标为ES5）单个ES2015构建（禁用差异加载，目标是ES2015）两个具有条件多填充的构建（启用差异加载，目标是es2015）要了解更多，请查看官方文档。结论Angular8给Angular带来了很多新的东西，包括差分加载。我希望你喜欢这个关于什么是微分加载，它是如何工作的，以及如何在角8中使用它。下次见！旁白：用Auth0验证Angular应用程序通过在Angular应用程序中集成Auth0，您将能够管理用户身份，包括密码重置、创建、配置、阻止和删除用户。只需要几步。设置Auth0应用程序首先，在这里注册一个免费帐户。然后，使用以下步骤设置Auth0应用程序：转到Auth0仪表板的"应用程序"部分，单击"+创建应用程序"按钮。命名新应用程序并选择"单页Web应用程序"作为应用程序类型。在新Auth0应用程序的设置中，添加：4200到允许的回调URL、允许的Web源和允许的注销URL。