项目优化之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 之后：

重新打包,部署后查看是否开启：