影响网页响应速度的因素有很多，例如：http请求次数太多、服务器本身处理请求太久、请求内容太大、JS脚本执行耗时过长、浏览器回流重绘等。网站页面的响应速度与用户体验息息相关，直接影响到用户是否愿意继续访问你的网站。对于Vue项目而言，最普遍的问题可能在于打包后的文件太大，导致加载时间过长。
我的一个小项目，仅有三四个页面，但因为服务器带宽太小了，加载时间过长的问题尤为明显，于是采用路由懒加载和gzip压缩的方式优化了一下，访问速度得到了显著提升。
一、路由懒加载：分割代码块
Vue支持异步组件，即可以在使用组件的地方使用一个Promise，Promise最终会通过resolve回传一个组件对象。而webpack的动态import的方式可以让代码分块进行打包，并且返回一个Promise（正是异步组件所需要的）。在路由配置表里使用import可以将各个页面组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就避免将所有内容打包在一个chunk里，从而“按需加载”，大大提高响应速度。
没有使用动态加载的路由配置方式：
// router.js import VueRouter from 'vue-router' import Vue from 'vue' Vue.use(VueRouter) import Home from '@/pages/Home' import Tree from '@/pages/Tree' import SearchHighlight from '@/pages/SearchHighlight' import Watermark from '@/pages/Watermark' export default new VueRouter({ routes: [ { path: 'https://www.jb51.net/', component: Home, children: [ { path: 'tree', name: 'Tree', component: Tree }, { path: 'search-highlight', name: 'SearchHighlight', component: SearchHighlight }, { path: 'watermark', name: 'Watermark', component: Watermark } ] } ] })
执行yarn build（或npm run build）打包，查看dist文件夹下的js和css:
可以看到打包后js和css下各有两个文件，其中chunk-vendors文件包含了所有页面js或者css文件，大小分别为769K、270K。现在修改路由配置使用动态加载组件的方式打包，来看一下打包的文件是怎样的。
使用 () => import('xxx')的形式引入组件：
// router.js import VueRouter from 'vue-router' import Vue from 'vue' Vue.use(VueRouter) export default new VueRouter({ routes: [ { path: 'https://www.jb51.net/', component: () => import('@/pages/Home'), children: [ { path: 'tree', name: 'Tree', component: () => import('@/pages/Tree') }, { path: 'search-highlight', name: 'SearchHighlight', component: () => import('@/pages/SearchHighlight') }, { path: 'watermark', name: 'Watermark', component: () => import('@/pages/Watermark') } ] } ] })
执行yarn build（或npm run build）打包，查看dist文件夹下的js和css:
js和css文件夹下各多出来了4个chunk-*文件，刚好对应我们动态引入的4个组件，这样在我们访问到某个页面，才会加载页面对应的chunk-*.js和chunk-*.css。观察文件大小，核心的JS文件chunk-venders大小从769K降低到了725K，因为我的4个页面代码都非常简单，看起来优化效果不大，然而在一个页面很多的大型项目中，优化效果会非常明显，CSS部分也是如此。
二、压缩请求资源
1. 原理介绍
日常我们在使用网盘的时候，上传一个很大的文件夹肯定很慢，这时候我们会把它压缩成一个压缩包，需要下载的时候下载下来解压就可以了，这样大大节省了上传和下载的时间。同样的原理可以用于网络请求，当我们向服务器请求一个资源时，比如js或者css文件，服务器将文件压缩，然后返回到浏览器，浏览器操作解压之后即可使用。
首先浏览器在发送请求的时候，会通过请求头Accept-Encoding告知服务器，本浏览器支持哪些编码格式的资源。打开浏览器的network，查看当前网页的某个请求的请求头：
Accept-Encoding的值表示浏览器支持gzip生成的编码格式或者deflate压缩算法生成的编码格式，这就告诉服务器，如果可以把该请求的资源用这两个方法压缩一下给我也是可以的。Accept-Encoding可能还会有compress压缩、identity不压缩的默认格式。
如果服务器对资源进行压缩编码了，它就会通过响应头Content-Encoding告知当前请求用了什么编码格式，当然如果服务器没干这事，则不会返回这个响应头，比如某个请求用gzip压缩了返回的内容：
2. 服务器配置