【万字长文】使用最新的webpack5新特性从零一步一步搭建完整的react18+ts构建环境，完善的模块热替换和构建速度和构建结果的优化。

本文涉及到的代码已经整理到 github 仓库中，用 cra 搭建了一个示例工程，关于性能优化的部分可以打开控制台查看重渲染的情况。 勾选、全选与反选。 根据选中项计算总价。 首先我们请求到购物车数据，这里并不是本文的重点，可以通过自定义请求 hook 实现，也可以通过普通的 …

深入学习一个框架最直接的方式，就是弄明白框架的原理。React无疑是一个非常值得学习其原理的框架，它设计简单，没有引入任何新的概念，一个组件就是一个方法或一个类。 但是要完整弄明白React的源码并不简单，React的代码有数万行，特别是在引入Fiber架构后，在React简单…

整个项目大概有60+个页面，用到的组件大概150+，package里面的依赖大概有70+个，应该勉强算得上是一个中型的React的项目了。 打包时间约150s，打包完之后的资源gzip之后约1.2m，尽管之前分离了一些公用依赖，但是index包的体积达到了600+还是令人难以接…

⚛️React是目前前端社区最流行的UI库之一，它的基于组件化的开发方式极大地提升了前端开发体验，React通过拆分一个大的应用至一个个小的组件，来使得我们的代码更加的可被重用，以及获得更好的可维护性，等等还有其他很多的优点... 通过React, 我们通常会开发一个单页应用（…

一个月前，React 官方正式发布了 v16.3 版本。在这次的更新中，除了前段时间被热烈讨论的新 Context API 之外，新引入的两个生命周期函数 getDerivedStateFromProps，getSnapshotBeforeUpdate 以及在未来 v17.0 …

这不再是一个 实验性的 API，并且它更符合 工程化 的理念，目前它已成为 React 一级棒的 API。 React 中的 context API 相信大家都知道吧，可能跟大伙一样，当看到 React 的官方文档是这样时，都不敢直接使用它。 ⚠️ 注意，这里的改变包括 中断，…

这段时间公司的事情变得比较少，空下了很多时间，作为一个刚刚毕业初入职场的菜鸟级程序员，一点都不敢放松，秉持着我为人人的思想也想为开源社区做点小小的贡献，但是一直又没有什么明确的目标，最近在努力的准备吃透react，加上react的脚手架工具create-react-app已经很…

关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。 但随着 React 16 和 Webpack 4.0 的发布，很多过去的优化手段其实都或多或少有些“过时”了，而正好最近一段时间，公司的新项目迁移到了 Rea…