Angular4首页加载慢优化之路

- 日理万妓 2022-05-26 01:57 191阅读 0赞

Angular是一个比较完善的前端MVC框架，包含了模板，数据双向绑定，路由，服务，过滤器，依赖注入等等所有的功能。在Web开发前后端流行的今天，我们在某个项目中也尝试使用该框架。

很快按照官网上的例子搭建了一个标准工程，在项目初期工程文件不是很多的时候，编译、打包、然后运行，访问项目的各个页面都很快。和传统的模板引擎相比这种前后端分离不仅工程化更加成熟（前端、后端开发人员专注自己的领域），而且各个页面加载速度很快，可是说第一次尝到了这种前后端完全分离所带来的好处。但渐渐的我们发现了一个问题，就是首页加载速度越来越慢了如下图：

![20180423114051316][]

耗时竟然已经达到了10s，但进入首页后各个页面加载速度依然很快。这时候就不得不分析原因了，其实答案很明显，有2个文件特别大分别是：main.bundle.js（2.3M）、vendor.bundle.js（4M）。而且这2个文件在第一次访问时必须会加载，为什么进入后访问就很快了？进一步分析，看看编译后这2个文件的源码，就能发现main. bundle .js是把我们所有模块自己编写的js都打包到一块了，然后vendor.bundle.js包含了angular的公共库。这样随着我们编写的js代码越来越多，引用的公共库越来越多的时候，页面的加载速度就会越来越慢。由于浏览器本身会缓存这些静态资源文件，而所有的文件都在第一次访问页面的时候都加载了，这样就导致第一次访问特别慢，后续各个页面都很快的奇怪现象。

我们传统web开发时css、js文件，有一个全局和各个模块单独这样划分的。这样等到需要的时候在加载对应css、js文件，加载时间被分摊到各个页面所以就不会出现某个页面加载慢的现象。其实可以类比，在angular中也有类似的优化方法。**多模块懒加载**便可以达到我们说的这种效果。

优化前我们工程就一个主模块文件（app.module.ts），路由跳转各页面其实都属于该模块一部分

如下图（路由对应各页面其实都是子组件，所以编译时都会被打包到同一个文件）：

![20180423114315889][]

进行多模块拆分后如下图：

![2018042311433424][]

可以看到写法明显不同，每个路由页面其实都是一个单独模块，然后在编译时每个模块都会单独编译成一个文件。而且路由到某个页面时，才会加载该模块js文件。

多模块拆分之前，编译如下图：

![20180423114413982][]

拆分后：

![20180423114446742][]

关注main.bundle.js文件变成了605kb,然后多了很多chunk.js。这些chunk.js其实就是各个模块编译文件。

具体进行多模块拆分方法如下：

【step1】在工程src/app  目录下新建2个文件，root.module.ts、share.module.ts。

在root.module.ts放一些其它所有模块都要引用的component、service、pipe。对于service需要在providers中对外暴露，其它公共组件、模块在exports中暴露（注意：相同组件、模块不能在多个模块中重复引用，否则编译会报错，可以通过如下方法对外暴露一次）

![20180423114509102][]

然后在share.module.ts模块中import root.module.ts。此外该模块会存放一些公共component、service、pipe等会被除了app.module.ts在外其它模块引用。这样做的目地是减少app.module.ts引用公共库大小，在上面编译图中可以发现vendor.bundle.js文件也非常大，这样做的目的是减少该文件的大小（此处大概能优化个10%）。

【step2】

对各个路由模块做如下改造：

以job\-record模块为例，如下图：

改造前：

![20180423114525315][]

改造后：

![20180423114539874][]

可以明显看到增加了2个新文件，job\-record-routing.module.ts、job-record.module.ts。这2个文件的用途就是把job-record变成一个真正的子模块。

job-record-routing.module.ts内容如下（该模块路由配置）：

![20180423114601721][]

job-record.module.ts内容如下（具体模块配置）：

![20180423114628902][]

job-record目录下其它文件无须修改，对应其它页面都用类似方法做模块拆分。（注意：对于父子页面，由于子页面依赖父页面加载，所以不能这样做拆分。）

【step3】

app.module.ts做如下改下（和原来该模块编写方式对比提到）

![20180423114719872][]

进行了多模块拆分后发现，main.bundle.js文件确实变小了很多，已经达到我们预期，而且也不会随着我们自己编写js增加而越来越大了，这时候发现首页访问速度大概加快了30%。此时加载速度如下：

![20180423114840472][]

但还是很慢，几乎还需要5s时间，原因是vendor.bundle.js文件还是很大。

vendor.bundle.js都是angular本身依赖的一些公共库，不是我们自己编写的，所以刚刚的多模块优化对它的大小变化几乎没有影响。这是打开该文件可以看到明显没有经过压缩优化。查了一些官网文档和百度发现angular编译果然有优化方式。通过增加编译参数：**--prod –aot**

编译后发现，竟然报了一堆错误。不过不要惊慌，那是优化编译时对ts语法检查比较严谨，我们代码中很多地方写的不够严谨，只能硬着头皮一行行修改了，此外别无它法。

![20180423114859158][]

好不容易解决了上面优化报错地方。这时优化编译也过了，然后首页加载速度也是非常快了。可是访问其它页面时会报如下错误：

![20180423114917445][]

进一步分析是代码种如下地方报错（压缩后的）

![20180423115044762][]

原始报错代码位置如下图。

![20180423115105636][]

但仔细分析了此处代码，没有看错有问题地方。结合上面报错，进一步调试发现map相关代码在优化时被压缩没了自然报错，我们优化编译方式都是官方的，而且此处代码也并无问题，猜想可能是该模块没有显示引入。引入如下模块：

import 'rxjs/add/operator/filter';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/mergeMap';

优化编译后发现问题果然解决了，现在首页访问速度提升了，各个页面访问也没有问题了（如果发现经过优化编译后，还会有其它类似问题，那么很可能就是某些依赖模块没有显示引入导致）。

优化后首页加载速度如下图:

![20180423115120699][]

最后部署在正式环境如nginx或tomcat下通过开启gzip压缩会发现静态文件大小还会进一步变小，页面访问速度还会提升。

**多模块懒加载\-> --prod –aot 优化方式编译 –> 服务端开启gizp压缩。3板斧解决Angular首页加载慢问题。**

**![20180423115223216][]**

[20180423114051316]: /images/20220526/349c121176624a6387c777db0b0cabdc.png
[20180423114315889]: /images/20220526/3ecdbc8ab9aa49c9a47ef167c6d66145.png
[2018042311433424]: /images/20220526/7a11b84d8f854223a68158fed396180a.png
[20180423114413982]: /images/20220526/2d888fd007214f49ac483f26ad07ea74.png
[20180423114446742]: /images/20220526/646dd8b9e19643968f6f76d0312abe37.png
[20180423114509102]: /images/20220526/62d36d8d603c490e93f578d2d45e95f4.png
[20180423114525315]: /images/20220526/009cf4b1d8e04ee086b83e50f2c6ef9d.png
[20180423114539874]: /images/20220526/3306b5f996a34853b8d1a65f4f24fca4.png
[20180423114601721]: /images/20220526/8fe976e88d774038926d615d0651f8f2.png
[20180423114628902]: /images/20220526/9168883e7ac743f6a4e5f1ca9790d67f.png
[20180423114719872]: /images/20220526/5391f7cd707a4e8e93bbec281cce87e1.png
[20180423114840472]: /images/20220526/e3f6de4e065f4957886708eea6fac1c2.png
[20180423114859158]: /images/20220526/eaa0deace4994e2c9b93491cd6a44444.png
[20180423114917445]: /images/20220526/e991a094665b44b6bd89b8d8a2ea7f38.png
[20180423115044762]: /images/20220526/f5d24489ed9a4810b7abc1add1968ffd.png
[20180423115105636]: /images/20220526/34d8bb8e46db4906b733d7aa1de1d5a8.png
[20180423115120699]: /images/20220526/f786d9057db845f0afdd0b971854e395.png
[20180423115223216]: /images/20220526/8106c5435c784e74b749df81f6b9e446.png