页面性能调优

最近利用闲的时间对页面进行优化，这次不是对项目的代码进行优化，而是从网络方面入手，所以不全面。

使用cdn

项目去年就开始使用cdn，所以这次只是进行设置的调整

1. cdn里面设置缓存时间，尽可能的长一点（一年）。
2. 开启http2，利用http2的特性加快资源的加载（需要先开启https）。

升级http2

由于部分项目没有采用cdn，所以还是有必要升级，结果可以是加速两秒(公司服务器国外，速度较慢)，

如何升级

性能测试

使用google的 PageSpeed Insights测试后的到的结果如下

[外链图片转存失败(img-5lc6dSG4-1569326017075)(https://github.com/abelce/staticResource/commit/042a284e99f07c68d7540cb3a866bae8bf497048#diff-8230b866d93fd24ec91d48cd1cffc612)]

上图显示可以预加载其他模块的css文件，由于我们使用react的lazy懒加载使得部分css、js需要时才会加载，这时可以使用preload-webpack-plugin将其css文件添加到head来提前懒加载。

TypeError: HtmlWebpackPlugin.getHooks is not a function

是html-webpack-plugin插件版本太低引起，升级到最新版即可。