VUE首屏加载优化

1、打包压缩优化，实测初始化加载 17000ms => 3800ms

这个优化是两方面的，前端将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件。

1.先引入 compression-webpack-plugin 打包插件，注意版本，高版本可能会报错： tapPromise of undefined 。

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

2.vue.config.js 配置插件

	const CompressionWebpackPlugin = require('compression-webpack-plugin')
	const productionGzipExtensions = ['js', 'css']

	module.exports = {
		indexPath: 'index.html',
		.......................,
		configureWebpack: {
		    plugins: [
		      // 配置 compression-webpack-plugin 压缩
		      new CompressionWebpackPlugin({
		        algorithm: 'gzip',
		        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
		        threshold: 10240,
		        minRatio: 0.8
		      })
		    ]
		}
	}

3.nginx 配置

	server {
	    
	    listen 80;
	    
	    # gzip config
	    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]\.";
	
		#......
	}