compression-webpack-plugin Gzip压缩 (首屏优化)
compression-webpack-plugin非常好用的压缩插件,适用于vue-cli版本2以上查看安装vue-cli版本vue -V// 在设置为 `true`之前, 确保安装了compression-webpack-plugin开发依赖// npm install --save-dev compression-webpack-pluginproductionGzip: true,prod
·
compression-webpack-plugin
非常好用的压缩插件,适用于vue-cli
版本2以上
查看安装vue-cli版本
vue -V
// 在设置为 `true`之前, 确保安装了compression-webpack-plugin开发依赖
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
安装compression-webpack-plugin
开发依赖插件
npm install --save-dev compression-webpack-plugin
注意此时npm run build
会出现报错
ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties
这是由于版本问题,在项目package.json
里将
"compression-webpack-plugin": "^2.0.0",
降版本
"compression-webpack-plugin": "^1.1.11",
vue.config.js修改(可以改或者不改,不改就默认):
const CompressionPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;module.exports = {
publicPath: './',
productionSourceMap: false,
configureWebpack: {...},
chainWebpack: config => {
config.resolve.alias.set('@', resolve('src'));
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}));
}
},
};
npm run build
可得到
压缩文件了
要想在线上使用还得配置后端。(服务器启用gzip nginx配置开启压缩)
更多推荐
已为社区贡献13条内容
所有评论(0)