使用vue-cli3搭建的vue 项目是没有
productionGZip配置的,需要你安装插件compression-webpack-plugin并在vue.config.js中进行相应的配置才能实现项目的性能优化

<>1、安装插件:compression-webpack-plugin
npm i -D compression-webpack-plugin
<>2、在 vue.config.js 文件中配置 compression-webpack-plugin
const compressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件
const productionGZipExtensions = ['js', 'css']; //压缩的文件类型 module.exports = {
//简单配置 configureWebpack: { plugins: [ new compressionWebpackPlugin({ //[file]
会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。 asset
: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename
//可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是
"gzip"。 algorithm: 'gzip', //所有匹配该正则的资源都会被处理。默认值是全部资源。 test: new RegExp('\\.(' +
productionGzipExtensions.join('|') + ')$'), //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
threshold: 10240, //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。 minRatio: 0.8 }) ] }, //复杂配置
/*configureWebpack: config => { if(process.env.NOVE_ENV === 'production'){
config.push( new compressionWebpackPlugin({ asset: '[path].gz[query]', //
提示compression-webpack-plugin@3.0.0的话asset改为filename algorithm: 'gzip', test:
new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold:
10240, minRatio: 0.8 }) ) } }else{} */ }
<>3、使用 compression-webpack-plugin 后打包项目过程中报错的解决方式:
① 如果 compression-webpack-plugin@3.0.0 的话,就把 vue.config.js 中关于
compression-webpack-plugin 配置 asset 改为 filename ② 如果构建过程中提示一些属性找不到,那么可以把项目中的
package.lock.json 和 node_modules 删除, 并把 package.json 中关于
compression-webpack-plugin 版本调低,如:1.1.12,然后重新 npm install 和 npm run build

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信