用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的文章

nginx服务器安装及配置文件详解

nginx配置location总结及rewrite规则写法

nginx配置ssl加密（单/双向认证、部分https）

nginx做负载均衡器以及proxy缓存配置

Nginx+Keepalived实现站点高可用

相同域名多个vue应用的部署

https://www.cnblogs.com/lcosima/p/9627165.html

Nginx开启gzip压缩解决react打包文件过大的更多相关文章

  1. Nginx 开启gzip压缩(图片,文件,css)

    1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzi ...

  2. Nginx开启Gzip压缩提升页面加载速度

    1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...

  3. nginx 开启gzip压缩

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度,!  Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于 ...

  4. nginx开启gzip压缩后导致apk包下载不能正常安装

    最后更新时间:2019/4/27 nginx一般都会开启gzip压缩,以提升传输性能. 配置如下: gzip on; gzip_comp_level 2; gzip_min_length 1k; gz ...

  5. Nginx开启gzip压缩功能

    在Nginx安装完成之后,我们可以开启Gzip压缩功能,这里Nginx默认只能对text/html类型的文件进行压缩.下面的指令为开启Gzip的指令: gzip on; gzip_http_versi ...

  6. Nginx 开启gzip 压缩

    随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术. 经过gz ...

  7. Nginx 开启gzip 压缩，实现基于域名的虚拟主机。

    一:gzip(GNU-ZIP)是一种压缩技术. 经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会块得多. gzip 的压缩页面需要浏览器和服务器双方都支持,实际上 ...

  8. Nginx开启Gzip压缩

    .Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf .找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzip_ ...

  9. Nginx开启Gzip压缩大幅提高页面加载速度(转)

    转自:http://www.cnblogs.com/mitang/p/4477220.html 刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非 ...

随机推荐

  1. java中的超类是什么

    超类(SuperClass) :用java术语来讲,被继承的类称为超类(SuperClass),也有叫做父类,继承的类称为子类.

  2. .NET、PHP、MySql、JS中的时间戳你每次是手写还是复制？这篇文章让你一次性搞懂

    什么是时间戳(chuō)? 答:时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. 为什么时间戳要从1970年01月0 ...

  3. java基础-01基本概念

    java的特点 跨平台 所谓的平台,我们可以理解为操作系统. 大部分语言是不能跨平台的,比如c语言的程序在windows和linux上需要编写不同的代码. java程序是运行在JVM(Java Vir ...

  4. Django（七）缓存、信号、Form

    大纲 一.缓存 1.1.五种缓存配置 1.2配置 2.1.三种应用(全局.视图函数.模板) 2.2 应用多个缓存时生效的优先级 二.信号 1.Django内置信号 2.自定义信号 三.Form 1.初 ...

  5. Java中newInstance()和new()区别

    前言: 最近在看springIOC和AOP是看见代码中很实用newInstance来实例化一个对象,之前对newInstance和new实例化对象的区别很模糊,特意在这里记录一下 一.newInsta ...

  6. cpu_relax

    https://blog.csdn.net/justlinux2010/article/details/8533451

  7. ClientValidationEnabled

    ClientValidationEnabled 去掉这个的时候就无效了,前端验证 <add key="ClientValidationEnabled" value=" ...

  8. cocos creator入门

    前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator ...

  9. python 元组用法

    tup1 = ('physics', 'chemistry', 1997, 2000) 元组中的元素值是不允许修改的 序号 方法及描述 1 cmp(tuple1, tuple2)比较两个元组元素. 2 ...

  10. Python TypeError: not all arguments converted during string formatting ——元组tuple(a)和(a,)的区别

    今天写程序,想输出一个array的shape,原程序为: print('shape of testUImatrix:%s\nStart to make testUImatrix...'%(testui ...