用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. 通过 docker 搭建自用的 gitlab 服务

    前言 git 是当下如日中天的版本管理系统.现在如果不是工作在 git 版本管理系统之下,几乎都不好意思和人打招呼了.有很多现成的互联网的 git 服务提供给大家使用,例如号称程序员社交网络的 Git ...

  2. Servlet开发笔记（二）

    ServletContext对象 WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象,它代表当前web应用.        ServletConfig对象中维 ...

  3. VS2010主题设置及插件推荐

    本文主要写了个人使用 VS2010 的一些配置及实用插件,从而打造一个符合个人风格的开发环境. 基础设置 安装 Visual Assist X 在 VS2010 中若不安装 Visual Assist ...

  4. flutter 本地存储 （shared_preferences）

    Flutter本地存储 和Android.Ios类似,Flutter也支持Preferences(Shared Preferences and NSUserDefaults) .文件.和Sqlite3 ...

  5. omit 配合antd from使用 hoistStatics

    import omit from 'omit.js'; // 作用: 从已经存在的对象中过滤特定属性 const formProps = omit(this.props, [ 'prefixCls', ...

  6. git　submoudle提交

    进入到各个submoudle文件夹 git status 查看所在branch和文件修改状态 git add [files]; git commit "" git pull ori ...

  7. centos7之openvpn搭建

    一.环境介绍 操作系统centos7.4 openvpn版本:openvpn-2.1 lzo版本:lzo-2.03 二.搭建 关闭firewalld防火墙,并设置开机不启动.关闭selinux sys ...

  8. 转载泡泡机器人——IMU预积分总结与公式推导2

    本文为IMU预积分总结与公式推导系列技术报告的第二篇. 承接第一篇的内容,本篇将推导IMU预积分的测量值,并分析其测量误差的分布形式. 传统捷联惯性导航的递推算法,以初始状态为基础,利用IMU测量得到 ...

  9. sql中检查时间是否重叠

    先画一个时间轴,方便理解. 设新的时间块,开始时间为@BeginDate,结束时间为@EndDate.数据库中的数据为BeginDate和EndDate 这样可以直观的看出来,新的时间块插入进来,只需 ...

  10. consul 剔除node_exporter的脚本

    #!/bin/bash clear echo "node_exporter注销工具" read -p "请输入要踢掉的节点IP,如果有多个IP,请使用英文格式 ',' 隔 ...