如何通过压缩Vue项目打包提升页面加载速度？

本文共计1883个文字，预计阅读时间需要8分钟。

影响网页响应速度的因素有很多，例如：HTTP请求次数过多、服务器处理请求时间过长、请求内容过大、JS娱乐执行耗时过长、浏览器回流重绘等。网页响应速度与用户体验息息相关。

　　影响网页响应速度的因素有很多，例如：http请求次数太多、服务器本身处理请求太久、请求内容太大、JS娱乐执行耗时过长、浏览器回流重绘等。网站页面的响应速度与用户体验息息相关，直接影响到用户是否愿意继续访问你的网站。对于Vue项目而言，最普遍的问题可能在于打包后的文件太大，导致加载时间过长。

　　我的一个小项目，仅有三四个页面，但因为服务器带宽太小了，加载时间过长的问题尤为明显，于是采用路由懒加载和gzip压缩的方式优化了一下，访问速度得到了显著提升。

一、路由懒加载：分割代码块

　　Vue支持异步组件，即可以在使用组件的地方使用一个Promise，Promise最终会通过resolve回传一个组件对象。而webpack的动态import的方式可以让代码分块进行打包，并且返回一个Promise（正是异步组件所需要的）。在路由配置表里使用import可以将各个页面组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就避免将所有内容打包在一个chunk里，从而“按需加载”，大大提高响应速度。