前端项目时因chunk-vendors过大导致首屏加载太慢的优化 (转载)

因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。
一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
1.npm使用下面命令安装

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

二、接下来要去修改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
      })
    ]

  },

三、nginx配置

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-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]\.";

    location /appShare {
       client_max_body_size    10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }

}