Nginx开启gzip压缩解决react打包文件过大
用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽
nginx采用gzip打包方式
在nginx配置中添加如下字段
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
然后重启nginx即可
nginx -s reload
对比前后的文件大小和速度
压缩前 2.57s
压缩后0.883s
关于nginx的文章
相同域名多个vue应用的部署
https://www.cnblogs.com/lcosima/p/9627165.html
Nginx开启gzip压缩解决react打包文件过大的更多相关文章
- Nginx 开启gzip压缩(图片,文件,css)
1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...
- Nginx开启Gzip压缩提升页面加载速度
1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...
- nginx 开启gzip压缩
Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度,! Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于 ...
- nginx开启gzip压缩后导致apk包下载不能正常安装
最后更新时间:2019/4/27 nginx一般都会开启gzip压缩,以提升传输性能. 配置如下: gzip on; gzip_comp_level 2; gzip_min_length 1k; gz ...
- Nginx开启gzip压缩功能
在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...
- Nginx 开启gzip 压缩
随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术. 经过gz ...
- Nginx 开启gzip 压缩，实现基于域名的虚拟主机。
一:gzip(GNU-ZIP)是一种压缩技术. 经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会块得多. gzip 的压缩页面需要浏览器和服务器双方都支持,实际上 ...
- Nginx开启Gzip压缩
.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf .找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzip_ ...
- Nginx开启Gzip压缩大幅提高页面加载速度(转)
转自:http://www.cnblogs.com/mitang/p/4477220.html 刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非 ...
随机推荐
- 逆向-攻防世界-logmein
iDA载入程序,shift+F12查看关键字符串,找到双击来到所在地址,进入函数 然后进入主函数, 经过分析,可以得出:输入的字符要等于 经过处理的v7和v8的异或.v8很明显,但是v7是怎么回事呢 ...
- python科学计算库的numpy基础知识，完美抽象多维数组(原创)
#导入科学计算库 #起别名避免重名 import numpy as np #小技巧:从外往内看==从左往右看 从内往外看==从右往左看 #打印版本号 print(np.version.version) ...
- C#需要在项目程序生成前后执行相关的事件
分享4: 需求:需要在项目程序生成前后执行相关的事件,比如:需要将某个文件拷贝到bin\Debug中,或者创建某文件夹等. 分析:我们可利用项目属性(选择项目右键,选择属性)中的“生成事件”预定义相关 ...
- JQuery滚动分页查询功能
//获取滚动条的高度 function getScrollTop() { var scrollTop = 0; if (document.documentElement && docu ...
- 微信小程序-表单笔记
发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'searc ...
- SpringMVC 实现文件上传与下载，并配置异常页面
目录 上传文件的表单要求 Spring MVC实现上传文件 需要导入的jar包 配置MultipartResolver解析器 编写接收上传文件的控制器 Spring MVC实现文件下载 下载文件时的h ...
- 小程序ios开发注意点
两个月了啊,这两个月完成了一个vue的项目还有一个小程序,终于可以休息一下了, 今天先声明一个奇怪的bug,在我开发微信小程序的时候, 发现有个获取商品详情的接口在安卓手机上是可以获取数据的, 但是i ...
- webmagic保存数据
使用多线程:
- 硬盘安装Kali
网上找到一些用EasyBCD硬盘安装的方式,可能对Kali Linux 1.0 .2.0等较老版本有用.目前的最新的Kali Linux 2016.2 用EasyBCD可以进入 Live,但是进入li ...
- MySQL数据库、表常用操作
1.按条件查询表中数据: mysql> select user,host,password from user; 2.按组合条件查询表中数据: mysql> select id, pass ...