vue 首屏优化 主要针对index.js过大问题，splitChunks分包白屏

接手了一个项目，打包完index.js居然有十几M，本地还好，部署线上以后
网速快的情况可能十几秒就能加载完，网速慢的话就会出现
“喂，你们项目挂了，白屏一直。。 哦！！ 有了有了有了 挂了哈。”
慢到一定境界了。

查询了很多资料，发现原来webpack也不是那么那么的晦涩难懂，真用到的时候，
学学 用用还挺好玩。

1. 首先是最管用的一招，就是直接在服务端nginx开启gzip压缩。贼好使，开了就管用。具体方法如下:

	gzip on;
	gzip_disable "msie6";
	gzip_static on;
	gzip_vary on;
	gzip_proxied any;
	gzip_comp_level 6;
	gzip_buffers 4 32k;
	gzip_http_version 1.1;
	gzip_min_length 1k;
	gzip_proxied expired no-cache no-store private auth;	
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
               image/gif image/png;

具体每一块代表的意思 我这里粘一下，但是其实我这段代码 可以直接粘过去用。

l gzip:决定是否开启gzip模块。

l gzip_disable：(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩)。指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配)。

l gzip_vary：增加响应头”Vary: Accept-Encoding”。

l gzip_proxied：Nginx做为反向代理的时候启用：·

off –关闭所有的代理结果数据压缩· expired –如果header中包含”

Expires”头信息，启用压缩· no-cache –如果header中包含”Cache-Control:no-cache”头信息，启用压缩·

no-store –如果header中包含”Cache-Control:no-store”头信息，启用压缩·

private –如果header中包含”Cache-Control:private”头信息，启用压缩·

no_last_modified –启用压缩，如果header中包含”Last_Modified”头信息，启用压缩·

no_etag –启用压缩，如果header中包含“ETag”头信息，启用压缩·

auth –启用压缩，如果header中包含“Authorization”头信息，启用压缩·

any –无条件压缩所有结果数据

l gzip_types：这个参数是指设置需要压缩的MIME类型,如果不在设置类型范围内的请求不进行压缩。lgzip_comp_level：设置gzip压缩等级，等级越压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大。范围是1-9，根据需求设定。

l gzip_buffers：设置用于处理请求压缩的缓冲区数量和大小。比如32 4K表示按照内存页（one memory page）大小以4K为单位（即一个系统中内存页为4K），申请32倍的内存空间。建议此项不设置，使用默认值。

l gzip_http_version：用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了支持前期版本加了此选项。默认在http/1.0的协议下不开启gzip压缩。

在自己的nginx服务器的server上方加上gzip的这些配置，重启nginx就可以了。

2. webpack-bundle-analyze