进一步优化SPA的首屏打开速度（模块化与懒加载） by 嗡

冷不防 2022-06-18 07:56 246阅读 0赞

# 前言 #

单页应用的好处在于一次载入所有页面资源，利用本地计算能力渲染页面，提高页面切换速度与用户体验。但缺点在于所有页面资源将被一次性下载完，此时封装出来的静态资源包体积较大，使得第一次打开SPA页面时候需要的载入时间较长。

在上一篇文章[Angular2 单页应用一些优化总结][Angular2] 中提到的利用压缩、混淆、开启gzip传输后，我们成功将3.5兆的资源包压缩到350k。但是如果SPA应用的页面数进一步增加，100个甚至1000个页面的时候，还是无法避免巨大的首页资源包加载的问题。所以350k的资源包是否还有进一步优化的空间呢？答案是肯定的！

从SPA的特性可以看出，用户在第一次打开页面时，实际上是把整个网站的所有页面都一起下载下来了，但是很多情况下，用户可能并不会访问到所有页面，或者短时间内仅在1~2个页面之间跳转。所以如果可以在第一次仅下载一部分页面，然后在用户需要的时候继续下载其它页面资源的话，就能进一步压缩首页资源包的体积。以下对优化步骤进行讲解。

# 模块化 #

## 模块化的好处 ##

模块化是后期优化的首要步骤，默认的Angular2 spa的项目结构为：应用主程序（main.ts）、根模块（app.module.ts）、根组件（app.component），然后才是其它的组件components。其实说白了就是一个拥有好多组件的单模块应用而已。

通过模块化划分，我们可以将应用按照不同功能或者作用划分为不同模块，这样也使得应用结构更加清晰。比如电商类应用：产品模块、订单模块、用户模块、购物车模块等。

## 模块的建立方法 ##

### step 1 : 创建模块 ###

在app路径下建立一个modules文件夹单独保存模块比较好一些。通过angular-cli的命令构建模块`ng g module testmodule` 即可。程序会自动建立一个testmodule文件夹，里边有一个`testmodule.module.ts`

### step 2 : 创建组件 ###

在testmodule文件夹上建立components文件夹，同时创建组件`ng g component testcomponent` 里边包含标准的组件文件（ts, html, css, spec）文件。

### step 3 : 创建模块路由 ###

该路由作为模块内部组件路由使用，而不是根路由。创建方法和根路由相同。*需要注意的是模块路由的路径是相对于该模块路径的地址*。  
比如：根路径为`/app/testmodule/component1` 时，模块内定义的路径应该为`component1` 。 同时将原`RouterModule.forRoot(Routes)` 改为`RouterModule.forChild(Routes)`

将原应用的诸多组件按照上面的方法分为不同模块后，就可以进行下一步懒加载了。

# 懒加载 #

## 懒加载路由 ##

在根路由中，将原url与component的关联改为url与loadChild关联即可。比如

//*********原方案
    //app.routing.ts
    const routes: Routes = [
        {path:'component1', component:Component1}
    ]
    
    //********新方案
    // new app.routing.ts
    const routes: Routes = [
        {path:'testmodule', loadChild:'app/modules/testmodule/testmodule.module#TestModule'}
    ]
    // testmodule.routing.ts
    cost moduleRoutes: Routes = [
        {path:'component1',component1:Component1}
    ]

这样对于`/app/testmodule/component1` 地址，应用首先会加载testmodule，然后，由testmodule模块加载component1组件，完成页面载入。

## 模块加载策略 ##

上文的`loadChild` 起到了加载模块的作用，仅在用户点击模块下的链接时，程序才开始下载模块对应的js文件，然后再渲染出来。若希望用户在还未点击页面的时候，就从后台预先载入该模块的js，可以进行如下修改：

// app.routing.ts
    //原代码
    @NgModule({ imports:[RouterModule.forRoot(routes)] exports:[RouterModule] }) //改为 @NgModule({ imports:[RouterModule.forRoot(routes), {preloadingStrategy:PreloadAllModules}] exports:[RouterModule] })

这样程序会在首页资源加载完毕后，在后台自动下载其余模块的资源。这样，用户在进入其它模块页面的时候，不需要等待js资源的下载，同时首页打开速度仍然和仅加载首页模块一样快。

## 需要注意的一点 ##

在根模块的imports声明中，不能引入懒加载模块，否则，会被打包工具打入首页包中，这样懒加载就没有效果了。

# 效果对比 #

（非专线网络，请忽略网络实际加载时间~~~~）

## 模块区分以及懒加载优化前 ##

图中main.js文件保存了所有页面的代码，体积达到134k之大，整个首页js资源总共350k左右。  
![这里写图片描述][SouthEast]

## 模块区分以及懒加载优化后 ##

由于我在首页仍然保留了4个页面，所以首页包仍然有76.3k，单页缩小了近一半。同时可以看到多出来的x.chunk.js文件，这些就是懒加载的模块（我使用了PreloadAllModules策略，因此会将所有模块下载下来）。  
优化前后，页面点击效果完全一样。  
![这里写图片描述][SouthEast 1]

[Angular2]: http://blog.csdn.net/tzdwsy/article/details/64438886
[SouthEast]: /images/20220618/a452fa38c8bf4dcdbc623bd5c8c5159c.png
[SouthEast 1]: /images/20220618/92a0b7e7fbbb469f823681b9ab920c9f.png