vue项目首次加载慢优化

事件：web项目上线后发现首次加载巨慢，查看network发现是chunk-vendors.XXX.js等资源文件太大导致资源加载缓慢

分析：根据哪儿慢优化哪儿的准则，针对性的配置打包优化方案

过程：
1.安装compression-webpack-plugin打包优化插件

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

2.修改vue的配置文件 vue.config.js

const path = require('path');

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

module.exports = {
  publicPath:'/appShare/',
  productionSourceMap: false,
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      } 
    },
    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
      })
    ]

  },

测试：根据网上查找的方案优化，可以说是毫无效果

继续找优化：配置项加一行代码

chainWebpack: (config) => {
    config.plugins.delete("prefetch");
}

继续测试：配置有效，加载时间由30秒变成了15秒，但是登陆成功进入首页也变成了15秒等待（随后删除配置）

以上配置参考地址：参考地址

再次优化：因为我是后端，所以想从nginx方向优化，查询相关资料，发现不用优化了，只需要把上面项目压缩配置加上，然后在nginx配置加入如下配置信息

server{
        gzip on;
        gzip_static on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
}

结果：优化成功，1秒级加载

总结：优化完成发现是自己知识储备量的问题，原来nginx也要配置开启gzip才行，以前居然没有主要到过这种常见问题！