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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
老生常谈js数据类型
Aug 03 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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
在线增减.htpasswd内的用户
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
简单学习Python time模块
2016/04/29 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
单链表反转python实现代码示例
2018/02/08 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python清空文件并替换内容的实例
2018/10/22 Python
深入理解Django-Signals信号量
2019/02/19 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python流程控制 if else实现解析
2019/09/02 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
《挑山工》的教学反思
2014/02/16 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
静心口服夜广告词
2014/03/20 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python