©2020-2024 ioDraw All rights reserved,
Privacy Policy
使用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]', // 提示[email protected]的话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]', //
提示[email protected]的话asset改为filename algorithm: 'gzip', test:
new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold:
10240, minRatio: 0.8 }) ) } }else{} */ }
<>3、使用 compression-webpack-plugin 后打包项目过程中报错的解决方式：
① 如果 [email protected] 的话，就把 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