用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. 使用Builder模式创建复杂可选参数对象

    在新建对象时,若需要对大量可选参数进行赋值,最常见的做法是JavaBeans模式,即调用一个无参构造方法创建对象,然后调用setter方法来设置每个必要的参数,以及每个相关的可选参数.代码示例如下: ...

  2. 爬虫基础(五)-----scrapy框架简介

    ---------------------------------------------------摆脱穷人思维 <五> :拓展自己的视野,适当做一些眼前''无用''的事情,防止进入只关 ...

  3. Ubuntu下找不到ttyUSB*问题解决

    一.硬件连接 确认Ubuntu对USB转串口设备的支持. 1.# lsmod | grep usbserial如果有usbserial,说明系统支持USB转串口. 如果没有,先安装ch340驱动或者c ...

  4. 算法01 C语言设计

    8.21 #include <stdio.h> void bubbleSort(int **p, int n); int main(void){ int a[100]; int *b[10 ...

  5. MongoDB之常用操作

    最近经常使用MongoDB来进行数据的操作,特此记录总结一下

  6. VScode插件以及配置

    Auto Rename Tag —— 自动同步修改标签 AutoFileName —— 自动补全路径提示 background —— 一个萌萌的插件,可以自己设置vsc的背景图 Bootstrap 3 ...

  7. USB虚拟串口通信

    https://blog.csdn.net/errorhai/article/details/85333914

  8. 关于Tomcat

    详情转自:http://blog.csdn.net/jiuqiyuliang/article/details/48094373和http://blog.csdn.net/u012934325/arti ...

  9. Educational Codeforces Round 63 Div. 2

    A:找到两个相邻字符使后者小于前者即可. #include<bits/stdc++.h> using namespace std; #define ll long long #define ...

  10. TOP按钮

    TOP按钮 博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色backgro ...