使用PageSpeed Insights进行测试，以完成对Ionic和Angular的最新样式的迁移

2 年 ago

文, 翔

1 minute

背景情况

我目前在经营一个名为AAHub的网站。这个网站是用Ionic和Angular构建的。

我们之前已经对Angular和Ionic框架的版本更新进行了支持，但是我们尚未对独立组件和新的控制流语法进行适配。

因此，我们计划采用这些技术。随之而来，我们打算使用PageSpeed Insights来跟踪网站的分数和捆绑大小的变化，以期改善性能。

关于网站的技术栈

Cloudflare Pages

之前→之后

在之前

First Contentful Paint：7.8s

在这之后

First Contentful Paint：3.4s

他借鉴了

按照Cloudflare的教程，我将Angular的示例项目部署到这里。结果是，性能分数达到了100分，非常出色。与此相对应的是，我的网站的性能明显很低。

做过的事情 de

Inject関数を使うように変更

开始时

スコア：35点
バンドルサイズ：4MB
First Contentful Paint：7.8s

暂时只是完成了框架的版本升级。
接下来将会进行各种修改和添加。

独立组件兼容

スコア：33点
バンドルサイズ：4MB
First Contentful Paint：7.7s

首先，我们进行了一项使Angular支持独立组件的工作，只需一条命令。
通过执行以下命令，我们能将大部分组件转化为独立组件。

ng generate @angular/core:standalone

通过此命令，许多模块已经被删除，但由于部分模块无法自动转换，因此需要手动删除这些模块。

在转换后的当前阶段，未观察到得分或捆绑大小的变化。独立组件涉及到模块文件的删除，据听说对性能没有直接影响，因此这是预期的结果。

删除Ionic模块 / 删除App模块

スコア：34点
バンドルサイズ：3.6M
First Contentful Paint：5.3s

通过单独导入Ionic的UI组件，就不再需要加载Ionic模块，就像上面的图片一样。

采用这种处理方式后，捆绑文件大小和首个内容可视绘制时间得到了显著改善。

有一个工具可以通过Ionic公式将IonicModule相关内容一键转换为独立组件的加载方式。参见https://github.com/ionic-team/ionic-angular-standalone-codemods。

删除不需要的模块

スコア：34点
バンドルサイズ：2.9MB
First Contentful Paint：3.6s

Angular和Ionic之外的部分与我的项目无关，但是我项目中包含了一个名为jszip的JavaScript库。该库用于在JavaScript中创建Zip文件，但由于不再需要，我已将其删除。

由于这个库占用的空间很大，因此当它被删除时，捆绑文件的大小大大减小，首次可视内容的得分也得到了提高。

删除CommonModule模块

スコア：45点
バンドルサイズ：2.6MB
First Contentful Paint：3.7s

我在项目中注意到仍然在使用Angular的CommonModule。为了解决这个问题，我对其进行了更改，改为只加载所需的模块（例如NgClass），而不是整个CommonModule。

使用Inject函数进行更改

スコア：44点
バンドルサイズ：2.6MB
First Contentful Paint：3.4s
https://pagespeed.web.dev/analysis/https-ec65e07e-aahub-pages-dev/w1uf08puhv?hl=ja&form_factor=mobile

在我之前的项目中，我通过构造函数进行依赖注入，但根据最新的标准，我们推荐使用inject函数。因此，我已经进行了相应的修改以适应这种新的方法。

尽管直接与性能相关性的关系较小，但为了确保，我们进行了测量，结果表明，首次有效绘制时间稍有改善。然而，我认为这种改善很可能是偶然结果。

总结

在撰写这篇文章的过程中，我尝试了许多与Ionic和Angular相关的变更。我感到在过去的一到两年中，Ionic和Angular都发生了很大的变化。特别值得注意的是，有一些命令可以方便地进行最新语法的迁移，只需要一条命令就几乎完成了迁移，这真是太感激了。

非常感謝您的閱讀！由於我所應用本次變更的網站原本的結構並非完美，這使得我在提升性能得分方面遇到了困難。在這一點上，我希望能在將來的另一個時間點上進行大幅度的改進，並在另一篇文章中分享結果。非常感謝您的觀看！