懒加载/代码分片 (加上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.pngimage.png
均加载速度在3.32s左右
Gzip √ , 懒加载/代码分片 √
image.png image.png均速度在2s左右
网友评论