懒加载/代码分片 （加上Gzip）

这么做的目的是减少首次加载的体积，要理解为什么这么做，有个背景知识需要知道

SPA默认打包会打包出一个较大的js文件，而针对多路由的应用，客户有可能不必要访问到较为深入的路由所对应的页面
打包成较大的js文件，就把没被访问的页面的js逻辑也一并在首屏加载的时候也打包进去了
此时如果能做到：客户访问当前页面，只加载当前页面的js逻辑，就能大大减少首屏渲染所需要加载的资源大小了

针对是否懒加载/代码分片后的加载速度优化，先来看：

Gzip × ， 懒加载/代码分片 ×

代码打包后是这样的：

image.png

image.png

而且可以看到主要资源的加载，慢在打包后，体积较大（即没分片后的）js，css上

image.png

均加载速度都在10s左右

Gzip × ， 懒加载/代码分片 √

代码打包后是这样的

image.png

image.png

image.png

主要慢在主的main js , main css，体积比之前小，加载速度均在7s左右，提速30%

Gzip √ ， 懒加载/代码分片 ×

image.png

image.png

均加载速度在3.32s左右

Gzip √ ， 懒加载/代码分片 √

image.png

image.png

均速度在2s左右

综上，懒加载/代码分片 + Gzip，可以让SPA加载速度从10s，到2s，提速80%，light house评分也能到90以上

image.png