vue.js webpack 前端 vue项目性能优化chunk-vendors

优化chunk-vendors包

前言一、splitchunks拆分二、开启gzip1.compression-webpack-plugin 插件安装2.vue.config.js添加如下配置3. 配置nginx

总结

前言

vue2项目构建，生成的chunk-vendors默认包含了应用初始加载所有的第三方模块（npm模块），如果不处理，一般chunk-vendors这个包都很大，影响加载性能。我们可以通过下面两种方法解决。

一、splitchunks拆分

配置代码：

optimization: {

splitChunks: {

cacheGroups: {

testVendor: {

test: /[\\/]node_modules[\\/]/,

priority: -1, // 注意跟默认配置的优先级问题

chunks: 'initial',

minSize: 20000,

name(module,chunks, cacheGroupKey) {

const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]

return `npm.${packageName.replace('@', '')}`

}

}

}

},

},

priority参数注意跟cue-cli默认配置的优先级问题

二、开启gzip

1.compression-webpack-plugin 插件安装

compression-webpack-plugin是一个webpack插件，可以将打包的文件进行gzip压缩。 安装命令：

npm install compression-webpack-plugin -D

或

yarn add compression-webpack-plugin -D

2.vue.config.js添加如下配置

引入插件

const CompressionPlugin = require('compression-webpack-plugin');

配置插件

new CompressionPlugin({

test: /\.(js|css|html)?$/i, // 压缩文件格式

filename: '[path][name].gz', // 压缩后的文件名

algorithm: 'gzip', // 使用gzip压缩

// 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。

threshold: 20240,

minRatio: 0.8, // 压缩率小于1才会压缩

deleteOriginalAssets: true// 是否删除原资源

})

3. 配置nginx

nginx开启gzip_static，浏览器请求对应文件，nginx就可以将压缩的.gz文件返回。

...

总结

通过gzip压缩和webpack代码拆分可以很好的解决chunk-vendors包过大问题，提升首屏加载时间。优化完成可以通过vue-cli-service --report命令生成的报告检查分析，可以通过chrome开发工具，lighthouse等性能分析工具查看结果。

文章来源

 您阅读本篇文章共花了：