用赛道思想去思考日常前端开发

以前我的的格局小，局限于某一个问题的具体实现，而不去考虑跳出这个问题，换一个赛道角度去思考,最近看事情总喜欢横向对比，我称为赛道的思想（其实是不想卷了，发现很多卷是没有意义的）

我为什么会有这种感受，我会举三个例子来证明

1. webpack 如何优化

webpack如何做性能优化？

1. 90% 的人都会回答 webpack 相关的缓存、压缩、多线程、减少编译范围等

2. 少部分人会考虑到 webpack 构建速度

3. 极少人能回答到升级 webpack，其实升级 webpack 才是优化提升最大的

4. 升级 webpack 也还是慢怎么办，可能就会有人换成 vite 了

5. 假如又想要保留 vebpack 插件又要 vite 的速度，那可以考虑如字节的 rspack

这其实就是换一个赛道的思想，当前赛道很卷，但没啥太大提升的时候，可以考虑换一个了。

关键字：webpack、vite、umi、rspack 等

2. react 性能很好，加载速度很快？

网上经常能看到 react 和 vue 谁的性能更好，速度更快。但为什么移动端大家都喜欢用 vue ，而不是 react ?

本质是因为 vue 体积小，资源在相比于 pc 更不稳定的客户端环境能更快的加载出来，首屏速度更快，渲染差距不大，所以大部分 vue 的网站打开速度是优于 react 的。

如果用赛道思想去考虑，我既想要 vue 的加载速度，又想要 react的开发体验呢？

1. react 可以替换成 preact,

还有更快的吗？

1. 更快的是 js 模版引擎 template
2. 最快的是原生 js 开发，但开发体验很差，所以最优解是 preact，甚至是一些高性能模版引擎

3. 如何去优化 redux 性能

redux 优化特别多，各式各样的，例如

1. 避免不必要的渲染：使用 PureComponent 或 React.memo 等可以避免不必要的渲染，提高组件性能。

2. 使用异步 Action：将复杂的数据处理操作放入异步 Action 中，以避免阻塞UI线程和提高应用程序响应速度。

3. 限制Store更新范围：在Reducer中尽可能缩小更新状态的范围，减少更新 Store 的次数和提高性能。

4. 使用 Immutable.js：Immutable.js 可以提供不可变的数据结构和高效的数据更新操作，以减少不必要的对象复制和提高性能。

5. 使用 Reselect：使用 Reselect 可以避免不必要的派生数据计算和渲染，提高应用程序性能。

6. 批量更新 Action：使用 redux-batch 等库可以将多个 Action 合并为一个批量更新操作，从而减少更新Store 的次数和提高性能。

但最后我发现，大型项目，直接上 mobx，可以少做很多优化

1. mobx 状态管理，它自带很多方法，就已经做了很多 redux 需要引入各种繁琐的库才能做到的优化

额外扩展

大家可以自己去思考

1. 如果要开发一个快速打开的应用是用 flutter 还是原生、还是RN
2. 组件库和低代码

总结

其实上面的一步一步分析，就是一个一个赛道，遇到问题或者别人抛出问题的时候，不要陷入到具体某个赛道去思考问题，陷入进去之后，格局就会小很多，要用赛道的思想去思考，去选择最合适的，如果选择了不合适的，做了很多努力都是白费了。

这篇文写的有点乱，大家有没有什么白忙活的例子，或者踩过什么坑，欢迎评论区分享.