vue 压缩体积之 vue-cli4 配置 gzip
查看 vue cli 版本
$ vue -V @vue/cli 4.5.13
安装 compression-webpack-plugin
npm install compression-webpack-plugin@6.1.1 --save -dev
配置 Vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
new CompressionWebpackPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
threshold: 10240, // 10k
minRatio: 0.8,
deleteOriginalAssets: true // 删除原文件
})
]
},npm run build:prod --report ，在 dist 文件夹中可以看到 .gz 件
可能遇到错误：
1. 如果报 Cannot read property 'tapPromise' of undefined 错误
降低 compression-webpack-plugin 版本 比如： 使用 6.1.1 版本
2. vue打包出现警告：Conflict: Multiple assets emit different content to the same filename assets/js/.gz
将 filename: '[path].gz[query]'。
修改为
filename: '[path][base].gz',
0顶
0 踩
共 0 条评论