正文
先祭出H5性能优化图
![]()
测试
用chrome的performace 测试首屏时间，我们可以清楚的看到，首屏出现的时间点。我们也能在network修改网络状态来在各个网络环境下做测试。
![]()
当然，我们不能只在chrome上做测试，这个结果只能给我们一个参考，我们需要真实数据，所以要通过埋点来获取用户在不同机器，以及网络环境下的首屏时间，来做针对性的分析优化，首屏时间埋点策略可以是html到达用户到这应用页面render函数执行的时间。
代码瘦身
1.利用webpack的code-splitting对业务进行拆分,缩减首屏资源大小。
如果的spa是所有的业务代码打成一个包，会导致首屏资源过大。按照不同的业务模块对应用代码进行来分割，用户使用指定的业务功能的时候再去加载响应的chunk代码，每个业务可能含有多个页面，但是用户操作是具有连贯性的，所有将该业务下的多个页面打成一个文件，防止chunk文件过多，请求频繁。
2.提取公共代码
当我们进行代码拆分后，代码冗余无法避免，接下来面对的是如何缩减每个chunk文件的体积。首先使用CommonsChunkPlugin来将react等公共的库提取出来。
3.Tree sharking
详情
注意模块的使用方式，模块导出避免将整个对象导出，类似
const data = {
// code
}
export default data;
使用模块的时候只import 需要的内容，这样Tree sharking才能帮我们修剪chunk，清除没有用到的代码。
4.库的按需加载
在使用库的时候，务必按需加载，如组件库和一些工具库如lodash
import isEqual = from 'lodash.isequal'; 单独引入
但是如果原来的代码是直接import 整个库的，可以尝试使用
github.com/lodash/loda…
这个插件。
5.开启gzip压缩
打包上线记得压缩并且开启gzip:
new CompressionPlugin({
test: /\.js$/,
filename(name) { return name; },
algorithm: 'gzip'
})
6.利用
webpack-bundle-analyzer
分析
严格按照规范，基本能保证资源体积在可控范围内，如果你需要持续优化，那可以借助webpack-bundle-analyzer来帮助分析每个chunk的文件,来查看是否有可优化的空间。
预加载
当用户打开一个新的功能的时候，需要去请求对应的chunk文件，如果该文件没有缓存，就需要损耗一定的时间，那么我们可以预加载需要的chunk文件，把他们拉近缓存，那么就可以提升用户打开新页面的速度。我们使用webpack插件生成link标签插入：
![]()
google的插件依赖
jantimon/html-webpack-plugin
会直接插入html模版
GoogleChromeLabs/preload-webpack-plugin
我也写了个插件，支持插入一个自执行函数来动态生成标签，支持延时执行。
zhangking/preload-script-webpack-plugin
![]()
体验优化
启动图和骨架图是在在体验上缓解用户白屏等待焦虑的有效方法。实现方法比较简单，在html模版里插入需要的图片，我使用base64，来减少一次网络请求，然后在应用render的时候，删除这个图片。我们将script标签设置 defer 属性，来保证图片能尽快出现。虽然应用的可交互等待时间没有优化，但是视觉上的变化在体验上是有所提升的。
其他
1.排查阻塞请求
请务必不要让请求阻塞来render。例如应用由于某些需求，需要先请求数据，再去渲染页面，所以导致render被阻塞。类似这样的需求，我们可以把需要的数据，注入html模版直接返回。尽可能让render函数快执行。
