vue单页面打包文件大首次加载慢从75M到13M蜕变

npm run build 文件过大
打包生成文件：

浏览器访问效果：

第一步：Nginx 开启 gzip（配置完切记重启 nginx）

后台配置 nginx.config。关于 gzip 压缩代码：

http {
gzip on; #开启或关闭 gzip on off
gzip_disable “msie6”; #不使用 gzip IE6
gzip_min_length 100k; #gzip 压缩最小文件大小，超出进行压缩（自行调节）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
gzip_vary off; #跟 Squid 等缓存服务有关，on 的话会在 Header 里增加 “Vary: Accept-Encoding”
}

第二部：vue 项目中 config/index.js

productionGzip: true, // 是否开启 gizp 压缩
productionGzipExtensions: [‘js’, ‘css’],

开启后 cnpm run build 会生成 *.gz 文件。
像这样：

如何识别 gzip 与非 gzip 请求

gzip 请求：

非 gzip 请求：

gzip 与非 gzip 在响应头中区别就是 Content-Encoding 是否表明是 gzip 压缩格式。