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 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
js实现简单的无缝轮播效果
Sep 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 xml文件操作实现代码(二)
2009/03/20 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
浅谈python之新式类
2018/08/12 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
scrapy-splash简单使用详解
2021/02/21 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
大专生自荐书范文
2014/06/22 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电