最近公司有个大型的项目，使用vue2开发的，但是最终开发完成之后，项目发布到线上，首次加载项目特别缓慢，有时候至少三十秒才能加载完成，加载太慢了，太影响用户体验了，最近研究了一下优化方案

  方案一 使用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_Titlereturn 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].";