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

转载于:https://www.cnblogs.com/btxlc/p/10784957.html

Nginx开启gzip压缩解决react打包文件过大相关推荐

Nginx开启gzip压缩配置参数
Nginx开启gzip压缩配置参数场景图片资源较大,前端页面响应加载时间较长解决方案开启nginx的gzip进行资源的压缩,可以达到压缩静态文件大小,提高页面访问速度,节省流量和带宽的效果. ...
Nginx开启Gzip压缩配置详解
Nginx开启Gzip压缩配置详解最近生产上发生了一些问题,原先所有的静态资源文件都是经过gzip压缩的,然而这几天突然都没有压缩了,经过一顿排查,发现是Nginx的配置有问题,借此机会详细了解了N ...
解决pyinstaller打包文件过大的问题（Anaconda）
解决pyinstaller打包文件过大的问题(Anaconda) 前言过程记录关于pipenv创建的环境路径前言参考资料 pyinstaller基本操作 1.环境 anaconda.pycha ...
webpack+nginx开启gzip压缩部署项目
首先在服务器安装nginx sudo apt update sudo apt install nginx 安装完毕后将前端项目打包 webpack.output.publicPath里配置资源基础路径 ...
nginx 开启gzip压缩
一.背景介绍历史遗留问题,在项目创建初期前端力量薄弱,网站大部分image.js.css与业务应用存放在一起,未上传到CDN中,最终导致网站访问缓慢,经过排查由于静态资源大量消耗带宽. ...
解决webpack打包文件过大的问题
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件刚开始用 webpack 的时候,开发环境 ...
解决Pyinstaller打包文件太大的办法（绝对有效，亲测！！！）
Pyinstaller打包文件太大 1. 问题原因在Anaconda下打包会将很多没有用到的模块打包进去,最终导致exe文件特别大. 2. 解决方案通过pipenv建立一个纯净的Python虚拟环 ...
nginx开启Gzip压缩，Vue性能优化之使用gzip压缩打包
一.前言不管是vue项目还是react项目在使用webpack打包之后都会生成一个动辄一两兆甚至更大的js文件,在某些情况下严重影响项目性能,打开页面的时候白屏时间会很长,本文将介绍如何使用gzip ...
Nginx开启Gzip压缩大幅提高页面加载速度
2019独角兽企业重金招聘Python工程师标准>>> 有时候我们会碰到API接口响应很快,但是完成速度很慢的情况,其主要原因是数据传输过大.因此我们需要对数据进行压缩,现这里采用N ...

Nginx开启gzip压缩解决react打包文件过大

nginx采用gzip打包方式

对比前后的文件大小和速度

Nginx开启gzip压缩解决react打包文件过大相关推荐

最新文章

热门文章