我们在使用uniapp开发小程序时,希望可以随时真机预览一下,但是如果项目过大时,发现发行模式可以上传,但是运行模式不可以预览。(当然咱们可以通过分包处理,但是这不是今天讨论的重点)
开启生产环境gzip,使用compression-webpack-plugin
正常咱们都是这样
//错误方式
cnpm i --save-dev compression-webpack-plugin
那就错了,直接下载运行时会报错,需要指定一下版本
cnpm install --save-dev compression-webpack-plugin@1.1.12
配置vue.config.js
const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
//这是配置路径引用的,可以不要
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
//这是配置路径引用的,可以不要
chainWebpack: (config) => {
config.resolve.alias
.set('$api',resolve('/api'))
},
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.('+productionGzipExtensions.join('|')+')$'),//匹配文件名
threshold: 102400,//对10K以上的数据进行压缩
minRatio: 0.8,
deleteOriginalAssets:false,//是否删除源文件
})
]
}
};
如果还有报错
cnpm install --save-dev webpack