前端性能优化-如何加快网页访问速度（nginx cdn compression-webpack-plugin gzip）

1.前端开启gzip

首先要安装compression-webpack-plugin这个插件，它是专用于将项目打包是压缩的。
cnpm i --save compression-webpack-plugin

2.在vue.config.js中进行配置

const webpack = require('webpack')
// 解决文件到打包后过大问题
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
   configureWebpack:{
       // 解决文件到打包后过大问题 配置
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip', //使用gzip压缩
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//哪些文件要压缩
        threshold: 10240,
        minRatio: 0.8 //压缩率小于0.8才会压缩
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,  //最大文件数
        minChunkSize: 100
      })
    ]
  }
}

这样我们打包出来的js或css文件就变成压缩包格式的

3.后端配置nginx

 gzip on;                 #决定是否开启gzip模块，on表示开启，off表示关闭；
gzip_static on;          #它会去找.gz后缀的文件，找到了就直接返回。没找到就找到原来的文件，进行压缩再返回
gzip_min_length 1k;      #设置允许压缩的页面最小字节(从header头的Content-Length中获取) ，当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩。建议大于1k
gzip_buffers 4 16k;      #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间,param2:int(k) 后面单位是k。这里设置以16k为单位,按照原始数据大小以16k为单位的4倍申请内存
gzip_http_version 1.1;   #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_comp_level 4;       #设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大；等级1-9，最小的压缩最快 但是消耗cpu
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascrip;    #设置需要压缩的MIME类型,非设置值不进行压缩，即匹配压缩类型
gzip_disable "MSIE [1-6]\."; #IE6不压缩