影响⽹页响应速度的因素有很多，例如：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: '/',
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: '/',
component: () => import('@/pages/Home'),
children: [
{
path: 'tree',
name: 'Tree',
component: () => import('@/pages/Tree')
},
{
path: 'search-highlight',
name: 'SearchHighlight',
component: () => import('@/pages/SearchHighlight')
},
{
path: 'watermark',
globe7
name: 'Watermark',
component: () => import('@/pages/Watermark')
}ups检测
]
}
]
})
执⾏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. 服务器配置
⼀般我们部署到服务器会使⽤nginx来做代理服务器，所有的请求都通过nginx转发，这⾥演⽰⼀下nginx配置gzip压缩⽂件后再返回。配置前先看看⽰例项⽬发布到线上的请求情况：
可以看到之前⽣成的chunk-vendors⽂件，⼤⼩725K，请求时间7.10秒，其中下载时间7.05秒，太慢了。配置⼀下nginx，打开gzip:
server {
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}
这个配置作⽤是，当nginx服务器返回gzip_types中列出的内容类型时，先使⽤gzip进⾏压缩（当然，前提是请求⽅⽀持gzip），执⾏sudo nginx -s reload让该配置⽣效，此时刷新刚才的页⾯看⼀下效果:
同样的⼀个请求，请求内容的⼤⼩变成了216K，⽽下载时间直接降低到了1s多，效果显著！nginx还有gzip的其它配置项，⽐如可以⽤gzip_comp_level可以控制压缩率（当然压缩率更⾼可能意味着更⼤的服务器消耗），有兴趣的同学可以查看nginx⽂档。
3. webpack打包时直接使⽤gzip压缩
上⼀步骤中，返回内容是在请求服务器的时候使⽤gzip进⾏压缩的。这样存在的问题时，对于同⼀个资源的不同请求，反复压缩，这⽆疑会增加服务器的CPU和内存消耗。使⽤webpack的话，可以直接⽤compression-webpack-plugin插件对我们的代码进⾏压缩。先安装到dev依赖：
// yarn安装
yarn add compression-webpack-plugin -D
// 或npm
npm install compression-webpack-plugin --save-dev
简单配置，更多配置可了解官⽅⽂档：
const CompressionPlugin = require('compression-webpack-plugin')
// ...
configureWebpack: {
电子眼镜plugins: [
new CompressionPlugin({
test: /\.(js|css)?$/i, // 哪些⽂件要压缩
filename: '[path].gz[query]', // 压缩后的⽂件名
algorithm: 'gzip', // 使⽤gzip压缩
minRatio: 1, // 压缩率⼩于1才会压缩
deleteOriginalAssets: true // 删除未压缩的⽂件，谨慎设置，如果希望提供⾮gzip的资源，可不设置或者设置为false
})
]
}
}
打包⼀下看看dist下的js和css⽂件夹，现在⽂件都被压缩成了.gz：
经过压缩之后chunk-vendors仅有176K，⽐起原始的725K，压缩了近80%。像图⽚、字体之类的也可以⽤这个⽅法进⾏压缩，只要修改test配置项的正则表达式匹配这类⽂件即可。不过现在，还需要在nginx服务器配置⼀下静态压缩：
园林音箱
server {
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
gzip_static on;
}
gzip_static设置为on之后，这样在访问资源的时候，如果存在“资源路径.gz”的⽂件，则会直接返回该⽂件，其优先级⾼于动态的gzip。现在访问⼀下页⾯：
如果把⿏标悬指到chunk-vendors的size上，可以看到提⽰“176KB transfered over network, resource size: 724K”。如果你的项⽬出现请求资源⽂件太⼤，可以试试gzip之类的压缩⼿段，相信有⽴竿见影的效果。
到此这篇关于Vue项⽬打包压缩的实现(让页⾯更快响应)的⽂章就介绍到这了，更多相关Vue项⽬打包压缩内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议