平常項目打包后,js等文件會體積大,這樣用戶訪問會慢
webpack優(yōu)化 – compression-webpack-plugin 開啟gzip
1、安裝compression-webpack-plugin
這里我項目webpack版本是3.6.0,所以得安裝低版本得compression-webpack-plugin,webpack版本高于這個得安裝其他版本,不然會報錯
npm install compression-webpack-plugin@1.1.12 -D
2、修改配置
1、在config/index.js文件中修改productionGzip: true;
2、build/webpack.prod.conf.js文件中的plugins添加下面的代碼
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
最后打包就可以了文章來源:http://www.zghlxwxcb.cn/news/detail-801194.html
注意?。?!后端服務(wù)器也記得配置可訪問gz文件,不然都是404
效果如下文章來源地址http://www.zghlxwxcb.cn/news/detail-801194.html
到了這里,關(guān)于vue2項目打包壓縮處理的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!