多页面应用-性能调优

多页面应用由多个完整页面构成，资源文件(js, css)不公用，每个页面都需要加载，页面编写过多时，页面加载会贼慢，用户体验过差。

通过测试小姐姐的反馈，做了以下调优：

1. 页面预加载loading动画

2. 图片文件压缩 (这两点还是无法达到测试小姐姐的预期，最主要还是第三点)

3. 通过webpack打包工具，开启productionGzip

找到config配置文件，通过文件的注释，得先安装compression-webpack-plugin依赖，然后将productionGzip设置为true。

image.png

注意：webpack3构建的项目安装compression-webpack-plugin 最新版会报错，需要把版本号降低为1.x，我用的是^1.1.12。

image.png

运行打包命令之后，我们的文件会生成一个gz后缀的文件，来看看文件大小对比，压缩了不少

image.png

最后，记得让服务器开启gzip，不然项目引用的资源文件还是未压缩的 。

image.png

这里附上一个检测网站是否开启gzip服务 http://pagespeed.webkaka.com/youhua/gzip/

打开项目地址，网页加载速度明显快了很多，加载少了1s-2s，达到了测试小姐姐的要求。