gzip是一種壓縮技術(shù)。經(jīng)過gzip壓縮后頁面大小可以變?yōu)樵瓉淼?0%甚至更小，這樣，用戶瀏覽頁面的時(shí)候速度會(huì)快得多，需要nginx也啟用gzip
vue-cli2.x中啟用gzip
安裝低版本才不會(huì)報(bào)錯(cuò)
// 安裝低版本
npm install --save-dev compression-webpack-plugin@1.1.2
配置位置
config\index.js
image.png
build\webpack.prod.conf.js
image.png
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
// deleteOriginalAssets:true, //刪除源文件，不建議
minRatio: 0.8
})
)
vue-cli3.x
安裝低版本
npm i --save-dev compression-webpack-plugin@5.0.1
對(duì)vue.config.js進(jìn)行配置
// 打包 使用gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css'];
module.exports = {
...
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
threshold: 10240, // 對(duì)超過10K的數(shù)據(jù)進(jìn)行壓縮
minRatio: 0.8, // 極小比
}),
]
},
}
運(yùn)行npm run build后出現(xiàn)gz結(jié)尾的文件就成功了
image.png
