gzip压缩的目的
gzip压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。
用法:
webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件:
npm i -D compression-webpack-plugin
打开 vue.config.js
文件
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
// 使用externals设置排除项
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
// 使用插件
config.plugin('html').tap(args => {
// 添加参数isProd
args[0].isProd = true
return args
})
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
// 使用插件
config.plugin('html').tap(args => {
// 添加参数isProd
args[0].isProd = false
return args
})
})
},
configureWebpack: config => {
// 生产环境下启用gzip
if(process.env.NODE_ENV === 'production'){
return {
plugins: [new CompressionPlugin({
test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件正则
threshold: 10240, // 对超过10k的数据进行压缩
deleteOriginalAssets: false // 是否删除原文件
})]
}
}
}
}
打包执行 npm run build 之后:
重新打包,部署后查看是否开启: