大家好，我是Kason。在React文档中，构建新React应用程序的首选方法是CRA（create-react-app）。CRA是在2016年推出的，那时候还没有系统的React脚手架工具供大家使用。另外，这是一个官方工具，一推出就受到欢迎。截至目前，CRA仓库已经收获了将近10wstar。但是随着时间的推移，出现了很多优秀的替代品，比如parcel和vite提供的React模板。然而，CRA本身的进展正在放缓。它的最后一次提交要追溯到去年9月8日：另外，CRA对一些流行工具的支持不是很好。比如TailwindCSS文档不推荐CRA：近期在Youtube上拥有10w粉丝的前端网红“Theo”在React文档仓库发起PR[1]，号召React文档默认不推荐CRA，而是将Vite作为构建应用程序的首选。看看围观人数，就可以看出大家对这个敏感问题的关心程度：那么，React团队是如何看待这个问题的呢？他们会将Vite作为构建应用程序的首选吗？这篇文章就是想谈谈“丹”（React的核心成员）对这个问题的看法。CRA的定位既然CRA是众矢之的，那么首先我们需要了解一下CRA在React体系下的定位，再看看Vite在这个定位下能否替代前者。CRA诞生的时期（2016年）是SPA（SinglePageApplication）最火的时期。当时他很好的解决了两个痛点：0配置初始化项目这一点不需要过多介绍。执行如下命令后，可以生成一个CSR（客户端渲染）React项目：npxcreate-react-app项目名称集成工具链CRA在react-scripts包下封装了当时的一些最佳工程实践，并平滑排除这些工具的不兼容性。开发人员享受开箱即用的最佳实践，无需担心某些工具升级对项目的影响（CRA会处理）。许多优秀的脚手架工具（如Vite、Parcel）也遵循了这种“开箱即用”的理念。除了以上两点，随着CRA的流行，React团队也将其作为新特性的快速分发渠道，例如：FastRefresh（React的热更新，不丢失组件状态）之后的一系列Hooks启动lint规则依赖于CRA的巨大安装容量和使用率。这些集成到CRA中的特性可以快速部署到开发者的项目中，以达到快速提高渗透率的目的。试想，如果没有CRA的推广，Hookslint规则很难在开发者中有这么高的普及率，Hooks的概念也不会这么快席卷整个前端框架领域。从以上三点来看，Vite可以成为比CRA更好的替代品。然而，React团队的想法不止于此。脚手架工具不足CRA虽然开箱即用，但提供的能力并不全面。比如不提供：为什么不提供状态管理方案、路由方案、数据请求方案？因为在CRA发展时期，这些方案还没有形成最佳实践。随着时间的推移，开发人员逐渐想出了解决这些问题的最佳实践。例如请求瀑布问题，考虑以下组件：functionApp(){const[data,update]=useState(null);useEffect(()=>{fetch('http://...').then(res=>update(res.json()))},[])return<子数据={data}/>}App组件只有在渲染完成后才能开始请求数据。这个请求的时间比较晚。如果Child依赖数据Request自己的数据，那么由于App请求的滞后，Child的请求也会滞后。这就是请求瀑布问题。这个问题的一个常见解决方案是将请求数据的逻辑收敛到路由方案中。再比如，随着业务的不断迭代，业务代码越来越大，常见的优化方式就是组件懒加载。然而，手动执行延迟加载通常会产生意想不到的问题。比如页面上有一个图表组件
