compression-webpack-plugin首屏加载优化

优化前后效果对比图：

从图片中可以看出，首屏的加载时间提升了很多，从5.55s提升到了578ms，这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

一、插件打包.gz文件

1.安装：

npm install --save-dev compression-webpack-plugin

或者

yarn add compression-webpack-plugin --save-dev

2.在vue.config.js中配置插件:

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
     plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

    // 配置compression-webpack-plugin压缩
    new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5,
      minChunkSize: 100
    })
  ],
  },

3.打包

打包文件大小信息：

二、nginx配置

server{
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml;
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_vary on;
}

三、tomcat配置

如果用的不是nginx，而是tomcat，那么需要去tomcat的config文件中去修改：

<Connector port="8080"
  protocol="HTTP/1.1"
  connectionTimeout="20000"
  redirectPort="8443"
  compression="on"
  compressionMinSize="2048"
  useSendfile="false"
  noCompressionUserAgents="gozilla, traviata"
  compressableMimeType="text/html,text/xml,text/javascript,
application/javascript,text/css,text/plain,text/json"/>

compression=“on” 开启压缩。可选值："on"开启，"off"关闭，"force"任何情况都开启。