react项目首屏优化方案 从10s到2s的极致提升

react项目首屏优化方案

一.压缩请求资源的体积

后端使用gzip对请求的静态资源进行压缩 （这个能使代码体积缩减30%左右）

二.webpack打包优化

• 使用ugilfy-plugin对代码进行压缩 混合并且去除注释和console.log() （这个能将代码体积缩减10%左右）
• 使用MiniCssExtractPlugin单独打包css (react-cli构建的项目css是被打包到js的) 因为css和js能同时加载
• CommonsChunkPlugin：提取通用模块文件
• 使用compression-plugin进行gzip压缩(如果后端进行gzip压缩了这个就不需要了)

比较舒服的是以上这这些东西多数都被脚手架在生产环境都配置好了,你只需要做一下gzip的处理就可以了，或者直接交给后端进行gzip的压缩

三.项目相关

• 组件按需引入 import {message,Input} from ‘~antd’

• 路由懒加载

• 图片过多

  预加载和惰性加载

  对图片进行压缩

  总结：在使用react-cli脚手架的时候你只需做两件事

• 将css单独打包

• 进行gzip压缩

要是自己配制webpack的话 上面那些plugin一定要配上

-----------------------------------------------------下面是一些废话-----------------------------------------------------

问题场景

这两天在家闲着用react写了一个人博客，在阿里云部署后首页竟然要十几秒才打开。f12看了一下，加载资源一共耗时14.6s ，webpack打包的入口文件耗时14s，这个文件1.2M 。我的带宽是1M/s 请求资源的速度为128kb/s .1.2M*/128kb = 9.6s 再加上一些其他的资源和http请求确实需要十几秒才加载完。

解决问题的思路

• 提升带宽(升级服务器配置)
• 缩减代码体积
• 使用第三方代理 如千牛云 （送10G 用完需要付费）

提升带宽是要花钱的，所以直接选择第二种方案。网上看了一下午的webpack打包优化的文档,各种方案都尝试了没有效果，入口文件仍然是1.2M，原因是在使用脚手架构建项目的时候，webpack的配置文件里都帮你配过了，build的代码已经是经过一些优化插件处理的最终在nodejs里面使用了koa-compress中间件，成功的将1.2M的入口文件压缩到362k。 重新部署后首屏加载只需2s（没有使用任何第三方代理）