VUE之首次加载项目缓慢

  方案一 使用Gzip

    下载插件：

压缩Webpack插件 (docschina.org)https://v4.webpack.docschina.org/plugins/compression-webpack-plugin/

npm i compression-webpack-plugin -D

     vue.config.js配置：

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  transpileDependencies: ['resize-detector', 'crypto-js'],
  publicPath: process.env.VUE_APP_publicPath,
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    host: 'localhost',
    hot: true,
    port: 5566,
    open: true
  },
  chainWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.js$|\.html$|.\css/,
          threshold: 10240,
          exclude: /.map$/,
          deleteOriginalAssets: true
        })
      )
    }
    config.plugin('html').tap((args) => {
      args[0].title = process.env.VUE_APP_Title
      return args
    })
  }
}

   nginx.conf配置：

     我这里使用的是nginx，需要添加一下配置

  gzip on;
  gzip_static on;
  gzip_min_length 1k;
  gzip_buffers 4 32k;
  gzip_http_version 1.1;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php  application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
  gzip_vary on;
  gzip_disable "MSIE [1-6].";