vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)


Posted in Javascript onJanuary 16, 2018

找到nginx多网站配置文件:类似 nginx/sites-available/www.baidu.com

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;
  }
}

参考页面:https://router.vuejs.org/zh-cn/essentials/history-mode.html

cnpm run build 文件过大

打包生成文件:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

浏览器访问效果:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

Nginx开启gzip

找到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"
}

配置完重启Nginx

浏览器访问效果:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

上面为数据流接收大小,下面为解压后实际大小。

识别gzip与非gzip请求

gzip请求:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

非gzip请求:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

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

而上面通过接收数据与实际数据大小相比也能明显看出差异

webpack gzip

vue项目中config/index.js

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

开启后cnpm run build会生成*.gz文件。

像这样:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

上传到服务器,测试查看接受文件大小。

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

gzip相应539kb。并非加载app.........gz的 412kb

删除*.gz文件,依旧539kb。

莫非,webpack打包gzip文件毫无卵用??????

gzip_static 静态压缩

经过一番百度。得一宝贝。gzip_static

什么东东呢?字面上意思就是:gzip静态。

卖个关子:

上面配置了。Nginx是可以开启gzip压缩,而且能够实现压缩效果。而它是如何工作的呢?

客户端发起请求

-》Nginx接收请求

-》Nginx加载文件进行gzip打包压缩成*.gz

-》返回给浏览器

-》浏览器解压*.gz (应该是它干的,反正看不见)

  也就是说,每次请求,Nginx都会进行压缩返回、压缩返回、压缩返回、 将会导致浪费大量CPU。

  这么个大bug是谁设计的?如果请求量大,CPU会不会挂掉?//猜测

  当然,并不会,gizp打包压缩后会临时缓存,

  所以,能不消耗CPU就不消耗CPU。

  废话太多,步入正题。放大招!!

  nginx.conf 

http { gzip on; #开启或关闭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"
}

emmmmmmmm.....重启nginx

OK。上图!

before:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

after:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

对比文件:

vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

so 。开启gzip_static后。流程就会变成

//偷懒写法。。。。。if(*.gz){
 return *.gz //懒得压缩直接扔文件
}else{
 return gzip() //压缩再扔给浏览器 
}

nginx的gzip压缩力度从1-9 。如果开启过大,CPU会严重浪费,而webpack压缩gzip默认是9.因此,打包压缩gzip静态资源是很有必要的

所以,按需加载暂时不用考虑了

Javascript 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
详解layui中的树形关于取值传值问题
Jan 16 #Javascript
基于JavaScript实现抽奖系统
Jan 16 #Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 #Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 #Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 #Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 #Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 #Javascript
You might like
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
javascript 数组操作详解
2015/01/29 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
linux面试题参考答案(5)
2016/11/05 面试题
企业统计员岗位职责
2013/12/13 职场文书
人事文员岗位职责
2014/02/16 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
市场营销策划方案
2014/06/11 职场文书
争先创优公开承诺书
2014/08/30 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
党员发展大会主持词
2015/07/03 职场文书
公证书
2019/04/17 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Python中super().__init__()测试以及理解
2021/12/06 Python