vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)
@H_301_0@ 找到Nginx多网站配置文件：类似 Nginx/sites-available/www.baidu.com
<div class="jb51code">
<pre class="brush:js;">
server {
listen 80;
index index.html index.htm index.
Nginx-debian.html;
server_name www.baidu.com;
location / {
root /mnt/www/www.baidu.com;
try_files $uri $uri/ /index.html;
}
}
@H_
301_0@参考
页面：
@H_301_0@
cnpm run build 文件过大
@H_
301_0@ 打包
生成文件：
@H_
301_0@ 浏览器访问
效果：
@H_
301_0@
@H_
301_0@ 找到
Nginx.config。关于gzip压缩
代码：
关闭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"
}
@H_
301_0@
@H_
301_0@ 浏览器访问
效果：
@H_
301_0@ 上面为数据流接收大小，下面为解压后实际大小。
@H_
301_0@
识别gzip与非gzip请求
@H_
301_0@ gzip请求：
@H_
301_0@ 非gzip请求：
@H_
301_0@ gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。
@H_
301_0@ 而上面通过接收数据与实际数据大小相比也能明显看出差异
@H_
301_0@
webpack gzip
@H_
301_0@ vue项目中config/index.js
@H_
301_0@开启后cnpm run build会
生成*.gz
文件。
@H_
301_0@像这样：
@H_
301_0@
上传到服务器，测试查看接受
文件大小。
@H_
301_0@ gzip相应539kb。并非加载app.........gz的 412kb
@H_
301_0@
删除*.gz
文件，依旧539kb。
@H_
301_0@ 莫非，webpack打包gzip
文件毫无卵用？？？？？？
@H_
301_0@
gzip_static 静态压缩
@H_
301_0@ 经过一番
百度。得一宝贝。gzip_static
@H_
301_0@ 什么东东呢？字面上意思就是：gzip静态。
@H_
301_0@ 卖个关子：
@H_
301_0@ 上面配置了。
Nginx是可以开启gzip压缩，而且能够实现压缩
效果。而它是如何工作的呢？
@H_
301_0@ 客户端发起请求
@H_
301_0@ -》
Nginx接收请求
@H_
301_0@ -》
Nginx加载
文件进行gzip打包压缩成*.gz
@H_
301_0@ -》返回给浏览器
@H_
301_0@ -》浏览器解压*.gz （应该是它干的，反正看不见）
@H_
301_0@ 也就是说，每次请求，
Nginx都会进行压缩返回、压缩返回、压缩返回、 将会导致浪费大量
cpu。
@H_
301_0@ 这么个大bug是谁设计的？如果请求量大，
cpu会不会挂掉？//猜测
@H_
301_0@ 当然，并不会，gizp打包压缩后会临时缓存，
@H_
301_0@ 所以，能不消耗
cpu就不消耗
cpu。
@H_
301_0@ 废话太多，步入正题。放大招！！
@H_
301_0@
Nginx.conf
关闭gzip on off gzip_static on;#是否开启gzip静态资源
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"
}
@H_
301_0@ emmmmmmmm.....重启
Nginx
@H_
301_0@ OK。上图！
@H_
301_0@ before:
@H_
301_0@ after:
@H_
301_0@ 对比
文件：
@H_
301_0@ so 。开启gzip_static后。流程就会变成
文件
}else{
return gzip() //压缩再扔给浏览器
}
@H_
301_0@
Nginx的gzip压缩力度从1-9 。如果开启过大，cpu会严重浪费，而webpack压缩gzip默认是9.因此，打包压缩gzip静态资源是很有必要的
@H_
301_0@ 所以，按需加载暂时不用考虑了
@H_
301_0@
