页面加载慢的优化方法GZIP | 创作者训练营第二期- 相信猿友们在开发中经常被吐槽页面加载慢的现象，也是很普遍的现象。

前言

在线音乐戳我呀！
音乐博客源码上线啦！
相信猿友们在开发中经常被吐槽页面加载慢的现象，也是很普遍的现象。
接下来将介绍一种解决方法很实用，建议都用起来，遇到问题可在评论区留言。

目前页面加载慢存在的问题？

每次刷新页面加载慢。

下面我们分析为什么会存在该问题。

为什么会出现此问题？

分析阶段：

打开控制台分析css/chunk-6876b81a.328bd992.css、js/chunk-6876b81a.4401756b.js这两个文件加载渲染很慢，因为文件很大（6~7M），所以我们要压缩文件大小，或者分割文件成若干份。

如何优化这类问题？

服务器开启Gzip（压缩技术：先在服务器进行压缩，再传递给浏览器）

代码如下：

// 安装插件
cnpm i --save-dev compression-webpack-plugin

// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';

.....
module.exports = {
....
  configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
  }
}

可以看到已经添加了gzip压缩。（Yes~）

打包文件夹如下：

使用gzip压缩前：

使用gzip压缩后：

可以看到打包的时候多了gz文件（也就是我们给服务器的压缩文件），看文件大小大概减少了三分之二。

当然，服务器也要支持gzip，找到conf目录下的nginx.conf ,开启gzip,并设置gzip的类型。

location /sw/ {
    gzip on;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    alias /home/water/wcs/webSw/dist/;
    index  index.html index.htm;
}

到这里如果幸运的娃，就成功开启Gzip技术压缩技术。

但我偏偏不是那个，请猿友往下看！