项目优化之Vue-cli开启Gzip

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 之后： 重新打包,部署后查看是否开启：