用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. slice 与 splice 的区别

    slice: 定义一个数组:let b = ['a','b','c','d','e'] b:["a", "b", "c", "d& ...

  2. win 10 精简组件列表

    轻松访问工具 操作中心 应用程序虚拟化(App-V) Telemetry Client (Asimov)(遥测) Assigned Access(按需访问) 自动播放 网络后台传输 备份 生物识别服务 ...

  3. 彻底搞懂spark的shuffle过程（shuffle write）

    什么时候需要 shuffle writer 假如我们有个 spark job 依赖关系如下 我们抽象出来其中的rdd和依赖关系: E <-------n------,              ...

  4. mysql中将多行数据合并成一行数据

    .1GROUP_CONCAT()中的值为你要合并的数据的字段名; SEPARATOR 函数是用来分隔这些要合并的数据的: ' '中是你要用哪个符号来分隔: 2.必须要用GROUP BY 语句来进行分组 ...

  5. 用div画三角/矩形/圆

    1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  6. 遍历HashMap的四种方式

    转至:https://www.cnblogs.com/Berryxiong/p/6144086.html public static void main(String[] args) { Map< ...

  7. （五）jdk8学习心得之默认方法

    五.默认方法 1. 使用方法:写在接口中,就是为了接口可以做一些事情. 2. 目的:有很多实现类,有一个公共的抽象方法,其实这些实现类实现该抽象方法的内容是完全一致的,完全没有必要都重新实现一遍.并且 ...

  8. php扩展之Yar

    Yar 是一个轻量级, 高效的RPC框架, 它提供了一种简单方法来让PHP项目之间可以互相远程调用对方的本地方法. 并且Yar也提供了并行调用的能力. 可以支持同时调用多个远程服务的方法. 情况: 有 ...

  9. java循环1

    public class f_w { public static void main(String []args) { int a=0; System.out.print("_info__w ...

  10. git总结二、关于分支上——好好认识下分支是怎么回事

    同样需要先来明确两件事: HEAD指针指向的是当前分支 分支(master, dev)指向的是最新的提交 一开始,git 中只有一个master分支,严格来讲,HEAD不是指向提交而是指向master ...