Angular是最受欢迎的单页Web应用程序开发框架，尽管这并不意味着Angular应用程序只能包含一页。 使用此框架，您可以创建包含数十个页面的站点。 在开发团队和发烧友社区的努力下，最新版本的Angular进行了优化。 但是，对于特定的应用程序，不应忘记一些会影响其性能的因素。
我们今天发布的翻译材料将揭示Angular应用程序优化的六个方面。
1.主包的延迟加载和优化
如果在准备应用程序的生产版本时未使用延迟加载，则最有可能在
dist文件夹中看到以下文件。
polyfills.js scripts.js runtime.js styles.css main.js
polyfills.js文件使
polyfills.js可以确保使用最新Web技术功能编写的应用程序与各种浏览器兼容。
script.js文件包含
angular.json文件的
scripts部分中描述的
scripts 。 这是此类部分的简单示例。
"scripts": [ "myScript.js", ]
runtime.js文件是Webpack加载器。 它包含下载其他文件所需的Webpack工具。
styles.css文件包含在
angular.json文件的
styles部分中声明的
styles 。 这是此部分的示例。
"styles": [ "src/styles.css", "src/my-custom.css" ],
main.js文件存储所有应用程序代码，包括组件（TS，HTML和CSS代码），管道，指令，服务和导入的模块（包括第三方模块）。
随着应用程序的增长和
main.j s文件
main.j大小也
main.j 。 这可能会引起问题，因为为了形成页面，浏览器除了解决数据可视化方面的其他任务外，还需要下载并解析
main.js文件。 如果该文件足够大，则不仅对于移动设备，对于桌面浏览器而言，其处理将是艰巨的任务。
解决此问题的最简单方法是将应用程序划分为几个模块，这些模块使用延迟加载技术。 使用这种方法，Angular会为每个模块生成一个单独的文件，直到必要时才会下载（通常在激活某个路由时）。
为了演示延迟加载技术的应用，创建了两个组件
app.component和
second.component 。 它们都在
app.module模块中，使用它们时不应用延迟加载。
app.component组件非常简单。 它显示两个按钮，其中一个按钮负责切换到
second.component ，第二个按钮回到
app.component 。
组件应用Second组件模板包含非常大的文本，容量约为1 MB。
第二部分由于此处未应用延迟加载技术，因此我们的应用程序将具有一个大型
main.js文件，其中包含代码
app.component和
second.component 。
如果您打开Chrome开发者工具并查看“网络”标签，则可以估算
main.js文件的大小。 即，它是1.3 Mb。
使用Chrome开发者工具分析文件大小这里的问题是，在大多数情况下，使用我们的项目时，用户将在其主页上，而不是在其他页面上，因此将所有代码下载为单个文件不是一个好主意。 可以在单独的模块中取出第二个组件的代码，仅当用户转到相应的页面时才会加载该模块。 这意味着
main.js文件大大减少了，从而使站点主页上的首次加载非常快速。
使用延迟加载技术时，在完成项目构建过程后，将创建一个文件
4.386205799sfghe4.js 。 这是将存储代码的位置，该代码在您首次加载站点时将不会加载。 结果，如果您现在打开网站并进行分析，事实证明
main.js的大小仅为266 Kb。
缩小main.js仅在转到相应页面后，才下载1 MB的大附加文件。
下载其他文件我们应用了延迟加载，但不能说这样的解决方案完全适合我们。 事实是，这种方法减慢了用户到页面的第一次转换速度，为此页面的输出需要单独的大文件。 幸运的是，Angular提供了解决此问题的方法。 即，我们正在谈论
PreloadingStrategy技术。
使用它，我们可以通知框架，在加载并处理了主模块（
main.js文件）之后，该模块
main.js在后台
main.js其他模块。 结果，当用户转到以前需要显示大文件的页面时，事实证明该文件已被下载。 这是预加载所有模块的示例代码。
import { PreloadAllModules, RouterModule } from '@angular/router'; RouterModule.forRoot( [ { path: 'second', loadChildren: './second/second.module#SecondModule' } ], {preloadingStrategy: PreloadAllModules})
在优化Angular应用程序时应用延迟加载，建议努力将项目分解为尽可能多的模块。 另外，您需要注意预加载它们。 这将使
main.js文件变小，这意味着可以更快地加载和显示项目的主页。
2.使用Webpack Bundle Analyzer进行捆绑分析
即使将项目逻辑划分为许多模块后，发现
main.js仍然太大（对于中小型应用程序，该材料的作者建议将文件的大小考虑为1 MB），则可以继续使用Webpack Bundle Analyzer来优化应用程序。 此npm软件包使您可以在支持缩放的树状结构中可视化Webpack的结果。 为了使用Webpack Bundle Analyzer，请将其作为开发依赖项安装在Angular项目中。
npm install --save-dev webpack-bundle-analyzer
然后，通过向其添加以下文本来修改
package.json文件的
script部分。
"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
请注意，您的项目中
dist/stats.json文件的地址可能不同。 例如，如果您已完成
dist/browser文件夹中的捆绑文件，则需要像这样重写上面的行：
dist/browser/stats.json 。
现在运行分析仪。
npm run bundle-report
执行此命令后，将生成应用程序的生产程序集，并显示每个捆绑软件的统计信息。 这是可视化此数据的结果。
使用Webpack Bundle Analyzer进行项目分析现在，您可以分析每个捆绑包的组成。 这是一个非常有用的工具，可让您识别没有依赖项时可以执行的依赖项。
3.创建几个共享的小模块
共享应用程序不同部分的模块有助于实现
DRY原理，但是有时，随着应用程序的发展，此类模块也变得越来越多。 例如，如果我们有一个包含许多其他模块，组件，管道的特定
SharedModule模块，则将此类模块导入
app.module将会增加
main.js捆绑包的大小，因为这样的举动不仅会导致
main.js所需内容的导入，而且还包含
SharedModule所有
SharedModule 。 为了避免这种情况，您可以创建另一个模块，如
HomeSharedModule ，该模块旨在由主模块及其组件共享。
在项目中打算共享的几个模块的存在要比仅一个通常具有较大大小的模块的存在要好。
4.对页面上不可见的图像使用延迟加载技术
首次加载应用程序的主页时，可能会发现它包含用户看不见的图像（它们在查看区域之外）。 为了查看它们，您需要滚动页面。 但是这些不可见的图像会在页面加载时加载。 如果它们很多，这将影响页面加载速度。 为了解决此问题，您可以将延迟加载技术应用于图像，仅在用户到达图像时才加载它们。 有一个有用的JS工具
Intersection Observer ，可以轻松实现懒惰图像加载。 此外，为了重用，可以在此基础上创建适当的指令。 可以在
这里找到有关此内容的详细信息。
5.对长列表使用虚拟滚动
Angular的第七版具有使用
虚拟滚动的功能 。 这项技术将元素加载到DOM中，并根据用户可见的列表数量来卸载它们。 这大大加快了使用长列表的应用程序的工作。
页面上仅显示可见的列表项。6.使用FOUT策略而不是FOIT策略来处理字体
许多站点使用自定义字体。 它们通常看起来很吸引人，但是它们的应用程序在浏览器上增加了负担，因为它必须下载这些字体并为工作做好准备。 例如，使用从第三方服务（例如Google Fonts）下载的非标准字体时，可能出现以下两种情况：
- 浏览器下载字体，进行处理，然后才显示文本。 在字体可供使用之前，以该字体键入的文本将不可见。 这称为FOIT（不可见文本的闪烁）。
- 浏览器最初在加载外部字体时使用标准字体显示文本。 准备使用该字体后，标准字体将更改为该特定字体。 结果，事实证明页面上的文本将以标准字体显示，直到加载了特殊字体，此后，该文本将再次显示，但使用新字体。 这称为FOUT（无样式文本的Flash）。
大多数浏览器使用FOIT策略使用非标准字体； FOUT策略仅在Internet Explorer中使用。 为了使用FOUT而不是FOIT，可以使用
@font-face的
font-display描述符，并告诉浏览器我们是否要先以标准字体显示文本，然后再以标准字体显示，否则我们将在一定时期内对文本看不见感到满意。 如果您对字体主题感兴趣，请阅读
此材料。 特别是在这里，您可以找到有关字体功能的信息以及有关FOIT或FOUT策略选择的建议。
总结
在这里，我们研究了几种优化Angular应用程序的技术。 实际上，还有更多。 特别是，我们正在谈论服务器渲染，服务工作者的使用以及AMP页面。 优化的便利性和方法的选择取决于特定的项目-其功能和目标。
亲爱的读者们！ 您使用什么方法来优化Angular应用程序？
