React 项目打包后文件体积过大,网页加载速度慢的问题。(gzip的使用)

react项目中利用dva脚手架,roadhog打包工具打包后只生成了一个index.css 和 index.js 。所有的 js文件 都打包在了一个 index.js 文件中,所以这个文件有1.1M。部署到服务器上,首次访问首页加载的会特别慢,这样会流失很多的用户。

解决办法: gzip 压缩。

GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了,效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

gzip可以极大的加速网站.有时压缩比率高达80%,近来测试了一下,最少都有40%以上,还是相当不错的.在Apache2之后的版本,模块名不叫gzip,而叫mod_deflate。

Nginx 开启 gzip :

在 nginx.conf 中添加以下配置:

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;

React 项目打包后文件体积过大,网页加载速度慢的问题。(gzip的使用)_第1张图片

重启 nginx:

/usr/local/nginx/sbin/nginx -s reload

清除浏览器缓存,重新访问网页,可以发现首次加载速度快了很多。

React 项目打包后文件体积过大,网页加载速度慢的问题。(gzip的使用)_第2张图片

你可能感兴趣的:(前端小技巧,gzip,react打包,项目体积过大,加载速度慢,服务器)