Vue项⽬打包、合并及压缩优化⽹页响应速度
⽬录
前⾔
nginx部署前端项目⼀.请求内容太⼤
解决⽅案：
CDN引⼊
压缩请求资源
⼀.http请求次数太多
解决⽅案：
总结
前⾔
影响⽹页响应速度的因素有很多，例如：请求内容太⼤、http请求次数太多、服务器本⾝处理请求太久、JS脚本执⾏耗时过长、浏览器回流重绘等。⽹站页⾯的响应速度与⽤户体验息息相关，直接影响到⽤户是否愿意继续访问你的⽹站。对于Vue项⽬⽽⾔，最普遍的问题可能在于打包后的⽂件太⼤，导致加载时间过长。服务器请求处理太久和js脚本执⾏耗时过长，这两个跟代码的质量和服务器配置关系太重，需要根据具体的项⽬和代码进⾏优化，今天我们只从请求次数和打包后的单⽂件过⼤两个层⾯去优化⽹页响应速度(这个适⽤于所有前端项⽬)。
⼀.请求内容太⼤
在项⽬打包后，我们经常会发现打包后的⽂件 vendors 和 app ⽂件尤其过⼤，其中app.js⽂件⾥放的是项⽬中各个页⾯的逻辑代码，vendor.js放的是各个页⾯各个组件公⽤的⼀些代码。随着项⽬复杂度的增加，该⽂件的⼤⼩也与⽇俱增。在带宽有限的情况下，往往下载这两个⽂件就会等很长时间。
解决⽅案：
路由懒加载：分割代码块
Vue⽀持异步组件，即可以在使⽤组件的地⽅使⽤⼀个Promise，Promise最终会通过resolve回传⼀个组件对象。⽽webpack 的动态import的⽅式可以让代码分块进⾏打包，并且返回⼀个Promise(正是异
步组件所需要的)。在路由配置表⾥使⽤import可以将各个页⾯组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就避免将所有内容打包在⼀个chunk⾥，从⽽“按需加载”，⼤⼤提⾼响应速度。如下图所⽰引⼊路由组件：
CDN引⼊
业务代码是经常更新迭代的，为了让浏览器尽可能长的时间缓存我们的静态⽂件，如果把类库代码和业务代码打包在⼀起，那么类库代码会跟着业务代码的更新⽽更新，⽽不能长时间的利⽤浏览器⾥缓存。我们希望利⽤缓存，减少浏览器流量，提⾼⽤户浏览器加载速度，所以单独拆分出来进⾏打包。⼀般第三⽅包都会有script引⼊⽅案，只需要打包的时候忽略制定第三⽅包，然后在模板上加上相应的导⼊链接。
⾸先没有fig.js需要在项⽬根⽬录创建
具体代码如下：
const cdn = {
// 忽略打包的第三⽅库
externals: {
vue: 'Vue',
"element-ui": "ELEMENT",
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
moment: "moment",
echarts: "echarts"
},
// 通过cdn⽅式使⽤
js: [
'cdn.bootcss/vue/2.6.10/vue.runtime.min.js',
'cdn.bootcss/vue-router/3.1.2/vue-router.min.js',
'cdn.bootcss/vuex/3.1.1/vuex.min.js',
'cdn.bootcss/axios/0.19.0/axios.min.js',
'cdn.bootcss/moment.js/2.24.0/moment.min.js',
'cdn.bootcss/echarts/3.7.1/echarts.min.js',
"cdn.bootcdn/ajax/libs/element-ui/2.8.2/index.js",
],
css:["unpkg/**************.2/lib/theme-chalk/index.css"],
}
publicPath: '/CRM/dist/',
/
/ publicPath: './',
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
config.plugins.delete('prefetch')
},
//打包忽略第三⽅库
configureWebpack: {
externals: als
},
}
然后在 pulic/index.html 模板相应位置上加上（添加位置⾃⼰看着来）
//下列是css ,script的话注释换⼀下，仔细看很好理解，config配置是添加⼀个cdn变量，然后在模板中遍历添加
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="stylesheet">
<!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> -->
<% } %>
使⽤CDN还会有另外⼀个好处，就是可以提⾼打包速度。
压缩请求资源
⼀般我们部署到服务器会使⽤nginx来做代理服务器，所有的请求都通过nginx转发。我们可以通过配置nginx，开启gzip。
server {
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}
通过上⾯的配置，每次浏览器向服务器请求资源时，服务器就会先把资源进⾏压缩后再返给浏览器，浏览器接收到后再解压处理。这样就可以很⼤的提⾼静态资源的下载速度。
但还有⼀点，就是这样的话，浏览器每次向服务器请求时，服务器都会执⾏⼀次压缩操作，当请求量很⼤时，压缩这个操作也会影响到服务器的响应速度，所以我们可以直接在打包时，就将⽂件打包成压缩包。这样不⽤服务器频繁的去打包：
安装依赖：compression-webpack-plugin
npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
publicPath: './',
productionSourceMap: false,
configureWebpack: {...},
chainWebpack: config => {
if (v.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.
use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}));
}
},
};
nginx配置
server {
gzip_static on;
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}
⼀.http请求次数太多
所有的事情都有个度，也就是我们所说的物极必反。我们采⽤按需加载，代码分割打包后，当项⽬越来越⼤，模块越来越多的时候，项⽬打包后，我们就会发现会⽣成很多的⽂件。对于前端性能⽽⾔，虽然每个⽂件更⼩了，但可能意味着更多的⽹络连接建⽴和关闭的开销，因此在前端优化的实践中，通常需要在⽂件数量和单个⽂件⼤⼩之间取得平衡。这⾥，我们可以利⽤webpack提供的插件 MinChunkSizePlugin, 通过合并⼩于 minChunkSize ⼤⼩的 chunk，将 chunk 体积保持在指定⼤⼩限制以上
解决⽅案：
publicPath: './',
productionSourceMap: false,
configureWebpack: {
plugins: [
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 10000 // Minimum number of characters
})
]
},
}
通过以上这些操作，我们可以将打包后的⽂件控制在合理的⼤⼩和数量范围之内，再配合ngnix配置，开启gzip，基本上就可以解决⼤部分vue单页⾯应⽤，⾸次加载等待时间过长的问题。
总结
到此这篇关于Vue项⽬打包、合并及压缩优化⽹页响应速度的⽂章就介绍到这了，更多相关Vue项⽬打包、合并及压缩内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！