背景

负责新的业务，之前那边的技术栈是nextjs，没有SEO的需求个人觉得next太重了，我开始尝试使用的react+vite，征求到同意之后，开始创建搭建项目。对我来说是一次大胆的尝试，因为react我也是先学先写的，之前用的都是vue

成长记录

1. 打包出来的单文件很大，超过1M，解决：分包，使用lazy配合Suspense，如果没有Suspense包裹跟元素页面会报错或者摆平，或者闪一下，反正就是体验不好。Suspense 的工作原理是一个 lazy 组件加载的时候，会顺着这个组件往上层去找，直到匹配到第一个 Suspense 组件，然后去渲染它的 fallback 值。所以在我们项目中有可能会存在需要多个Suspense 包裹的情况

2. 本地开发环境没有问题，build一直报js内存溢出，反复尝试查看排查问题，发现是同事配置的unocss配置文件写的有问题，导致build失败。

3. React 里面 useEffect 里面监听的键盘事件，用到的数据，所有的依赖都需要加上，否则没办法拿到最新的数据（就一直用着老数据执行原来的方法

4. 频繁数据更新的时候，可以使用immer进行数据操作，因为太频繁的，用原生的更新很有可能出现更新不够及时

5. 创建项目的时候，默认 html 元素的 lang 值是en，我们需要手动修改为 zh-CN。因为打开浏览器就会提示你要不要翻译成中文，一旦你点击了，当你的页面有元素隐藏的时候报错。就会报错执行“removeChild”失败on“Node”:要删除的节点不是该节点的子节点。原因是谷歌的翻译插件有问题

6. 所以插件或者框架的语法都会无限接近原生，或者说和原生一样，比如Link标签，原生a标签有的，他都有，navigate也是，如果不太清楚的，可以点击去，到实现里面看看具体的。 react-router-dom 里面的 Link 标签，就是一个 a 标签，他的 to 属性就是 a 标签的 href 属性…

总结

使用不熟悉的框架的时候，多看文档就完了。看多了自然就熟悉了，自然写代码的时候碰到的问题就少了