首页/ 文章/前端/正文

「react进阶」年终送给react开发者的八条优化建议(篇幅较长,占用20-30分钟)

笔者是一个 react 重度爱好者,在工作之余,也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰,手留余香,阅读的朋友可以给笔者点赞,关注一波 。 陆续更新前端文章。

本文篇幅较长,将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源,长列表渲染
方向分别加以探讨。

一 不能输在起跑线上,优化babel配置,webpack配置为项

1 真实项目中痛点

当我们用create-react-app或者webpack构建react工程的时候,有没有想过一个问题,我们的配置能否让我们的项目更快的构建速度,更小的项目体积,更简洁清晰的项目结构。 随着我们的项目越做越大,项目依赖越来越多,项目结构越来越来复杂,项目体积就会越来越大,构建时间越来越长,久而久之就会成了一个又大又重的项目,所以说我们要学会适当的为项目‘减负’,让项目不能输在起跑线上。

2 一个老项目

拿我们之前接触过的一个react老项目为例。我们没有用dva,umi快速搭建react,而是用react老版本脚手架构建的,这对这种老的react项目,上述的问题都会存在,下面让我们一起来看看。

我们首先看一下项目结构。

再看看构建时间。

为了方便大家看构建时间,我简单写了一个webpack,plugin ConsolePlugin ,记录了webpack在一次compilation所用的时间。



打赏

好文章,更需要你的鼓励

免责声明:本文转载至互联网,不代表本站的观点和立场。

浏览次数:54 次浏览

发布时间:2020-12-25 12:20:26

相关标签: react

本文链接:http://v3.pro.demo.hisiphp.com/show-75.html