改善离子角应用程序性能的5个技巧betway东盟体育app

每个人都知道，构建性能Web应用程序对于保留快乐用户至关重要。但是，随着持续的错误修复和构建新功能的涌入，这说起来容易做起来难。

幸运的是，您可以采取几个步骤来大大改善Angular应用程序的性能。最近，Angular团队的Stephen Fluin提供了web.dev会议演讲为标题“如何与Angular保持快速和新鲜”，具有改善Angular App启动性能和捆绑尺寸的技巧。他的建议很棒，包括我以前从未尝试过的几个，所以我决定将它们在真正的Angular应用程序中进行测试。

以下文章审查了Stephen的角度性能技巧，该镜头通过离子应用程序的镜头应用，betway东盟体育app电离，由Zenefits启发的人力资源演示应用程序。它展示了各种离子应用程序平台技术，包括betway东盟体育appbetway东盟体育app离子框架，，，，电容器， 和betway东盟体育app离子本地企业解决方案。在网络，，，，ios， 或者安卓。

通过应用这些技巧，我能够将电离的灯塔性能得分提高约20分。让我们挖掘。

使用源映射探索器减少应用程序捆绑尺寸

在Web浏览器中运行之前，现代Web应用程序（包括Angular Apps）会以各种方式进行转换：将JavaScript文件组合在一起，然后缩小或偶尔机器生成。要调试应用程序或查看其捆绑包大小，使用源地图对源进行检查，该源地图将转换的源映射到原始源。检查源地图是了解您编写的代码和运送到最终用户的代码之间发生的事情的好方法。

角团队建议源地图探索工具可视化应用程序的代码分发。首先，安装它：

$ npm i -g源映射 - 爆炸器

接下来，打开Angular.json在您的项目中。然后查找“配置”节点然后将“ sourcemap”和“ nundchunks”选项设置为“ true”：

// angular.json“ configurations”：{“ sourcemap”：true，“ nesschunks”：true，}

接下来，创建您的应用程序的生产构建：

$离betway东盟体育app子构建 - 生产

最后，运行源地图爆炸器工具，指定用于分析的JavaScript文件。在离子betway东盟体育app应用中，这是一个以“ main”开头的文件（以及像不断变化的哈希main-es2015.5e93717f1.js）在“ www”文件夹下找到。运行以下操作以检查ES2015（现代浏览器）和ES5（旧式浏览器）捆绑包：

$ source-map-explorer www/main*.js

运行此命令可以看到应用程序代码分布的可视化，包括您编写的代码和所使用的库，例如Angular，Iromic Framework，RXJS和电容器。betway东盟体育app

首先检查未使用代码的框架/库。随着时间的流逝，它可能会逐渐蔓延，例如团队成员不小心检查原型时。在离子中，我删除了@Angular/动画（具体来说，app.module.ts引用noopanimationmodule），从应用程序中删除了53.81 kb（总计4.8％）。

接下来，查看您的申请代码，在此表示src部分。一个常见的问题是不必要的进口。在电离中，尤其是一个文件脱颖而出 -数据/imployeedata.js占应用程序大小的一半以上 - 571.57 KB，或该应用程序的54.2％。该文件包括在员工目录列表页面上引用的数千个假“员工”，因此我期望大型文件大小。但是，仅在该目录页面上引用它，这不是用户与用户交互的第一页，因此很明显地关闭了问题。

看src/app/app.module.ts，我注意到员工服务，从中加载数据雇员，被进口为提供商：

从'./services/employee.service'导入{雇员服务};提供商：[{{提供：Routereusestrategy，useclass：ionicroutestygy}betway东盟体育app，雇员服务]，

我删除了不必要的导入，然后将源地图Explorer分析重新兰。哇！总捆绑尺寸从1.03 MB降至481.77 kb，而src文件夹（我的书面应用代码）变得如此微小，以至于不再显示在源地图爆炸器可视化。

看不到源文件夹（src）？很好 - 这意味着与项目中的其他代码相比，您的应用程序代码很小。专注于库/框架，您可以删除。

最后，审计package.json，寻找任何未使用的库。我注意到@Angular/材料在某个时候已添加，但是鉴于我们在电离中使用了离子框架的UI组件，我将其删除。betway东盟体育app幸运的是，没有使用材料UI组件，因此该应用程序的捆绑尺寸根本没有变化。但是，清理未使用的参考文献是一个好习惯，以免他们找到您的捆绑包！

通过实施上述变化，Ionifits的灯塔性能得分从61增加到80：

配置尺寸预算

除了使用源地图爆炸器分析捆绑尺寸的工具，您也可以配置尺寸预算。一旦制作生产，减少应用程序的尺寸就会具有挑战性，因此设置预算阈值可确保您的应用程序停留在定义的大小范围内。

设定尺寸预算Angular.json的预算部分：

// angular.json {...“ configurations”：{“生产”：{...预算：[type“ type”：“初始”，“ maximumwarning”：“ 500kb”，“ maximut error”：“ 800kb”]}}}}

这推荐的预算设置有所不同，因为每个应用程序都不同。在上面的示例中，如果应用程序的初始大小超过500KB，则在构建应用程序时，Angular CLI将显示控制台警告。如果它大于800KB，则构建将失败。

将您的应用程序分为模块，以进行本地角懒负荷

当用户第一次导航到路线时，懒惰的负载模块按需加载。该策略非常适合应用程序性能和降低初始捆绑包大小。使用ng生成命令创建一个懒惰的负载模块：

$ ng生成模块 - 模块app-module-关于大约

betway东盟体育app离子Angular Apps包含懒惰的加载，因此无需更改电离。新的离子betway东盟体育app应用程序（使用betway东盟体育app离子开始命令）预先配置懒惰加载，然后使用Ionic CLI创建的随后的应用程序页面betway东盟体育app产生命令也会自动配置为懒惰的加载模块。

$离betway东盟体育app子生成页面关于/大约

定期保持Angular的最新状态，并使用“ NG更新”

面对现实吧 - 没有人喜欢更新其依赖性。破裂的风险总是很高，当然，这会分散您的应用程序的更多功能。幸运的是，Angular团队在Angular CLI的更新过程中表现出色，该过程更新了角包装并根据需要应用代码转换。

Angular团队建议首先更新CLI和CORE：

$ ng update @angular/cli @angular/core

之后，如果没有错误，请更新其余的角包装。

要查看的另一个资源是角度更新指南：https://update.angular.io。选择您的应用当前打开的版本，然后选择您要更新的版本。该指南将向您展示更新之前，期间和之后该做什么。根据我的经验，由于几乎没有手动工作要做，因此更新是无痛的。CLI为您照顾大多数更改！

更新应用程序的离子依赖性也betway东盟体育app是一个命令：

＃ibetway东盟体育apponic angular $ npm update @ionic/angular @最新＃电容器$ npm update @capacitor/core @最新 @capacitor/ios @最终 @capacitor/android @最新

如果您担心确保所有依赖项都会共同起作用，请定期参考package.json离子入门模板应用程序中的文betway东盟体育app件（这是Angular的）。随着时间的推移，Ionic Framework和Devrel团队随着时间的推移将这些版本更新。betway东盟体育app

通过添加浏览器列表文件来减少应用程序构建时间

一个Browserslist文件指定应用程序支持的浏览器。开发人员工具可以以各种方式使用这些信息，例如应用构建过程优化以减少应用程序构建时间。

就是这样新的Angular 10+项目- 包括浏览清单具有默认配置的文件意味着ES5构建被禁用。

如果您的Angular应用像Ionifits一样，于2019年1月创建为Angular 7应用程序，您可能没有Browserslist文件。但是，考虑添加一个，因为删除ES5构建的好处是，应用程序构建时间减少了，在生产构建中最明显（betway东盟体育app离子构建 - 生产）。当我第一次实施此功能时，我看到构建从98秒降低到35秒。在随后的版本中，我通常看到另外20到40秒剃光了。

要获取最新/最出色的浏览器列表配置，请运行新的在您的应用程序项目之外创建一个临时新的Angular项目，然后将browserslist文件复制到您现有的项目中。或者，借用Ionifits的文件，看起来像：

> 0.5％的最后2个版本Firefox ESR没有死，即9-11＃，即9-11支持，删除“不”。

查看由定义的规则指定的支持浏览器的列表Browserslist文件，运行NPX浏览器列表在根项目目录中。作为参考，以上是以上生成的：

and_chr 84 and_ff 68 and_qq 10.4 and_uc 12.12 android 81 baidu 7.12 chrome 85 chrome 84 chrome 83 edge 84 edge 83 edge 18 firefox 80 firefox 79 firefox 78 firefox 77 firefox 68 ios_saf 13.4-13.5 ios_saf 13.3 ios_saf 12.2-12.4 kaios 2.5 op_mini all op_mob 46歌剧69歌剧68 Safari 13.1 Safari 13三星12.0三星11.1-11.2

了解更多有关Browserslist以及所有可用的配置，请签出该项目的文档。

开始构建更多性能的角应用

提高角度应用的性能似乎很复杂且令人生畏。幸运的是，利用Angular的开箱即用工具，包括配置尺寸预算，实现懒惰的加载和添加浏览器列表文件，可以为您做很多艰苦的工作，这对您有很大的努力。保持应用程序定期更新，偶尔使用源地图爆炸器识别进一步的优化对于保持绩效的检查是有用的。

这些只是您可以进行离子角性能优化的几个示例。betway东盟体育app如果您还有其他提示，请在下面分享。