react和vue如何优化
React 优化方法
代码分割与懒加载
使用 React.lazy 和 Suspense 实现组件懒加载，减少初始加载体积。结合 import() 动态导入拆分代码块。
避免不必要的渲染
通过 React.memo 缓存组件，避免子组件无效更新。使用 useMemo 和 useCallback 缓存计算结果和函数引用。
虚拟列表优化长列表
使用 react-window 或 react-virtualized 实现虚拟滚动，仅渲染可视区域内的元素。
状态管理精细化
避免全局状态滥用，将状态下沉到所需组件。使用 Context 或状态管理库（如 Redux）时，通过选择器（Selectors）减少无关更新。
生产环境构建
启用 React 的生产模式（NODE_ENV=production），利用 Webpack 的 TerserPlugin 压缩代码，移除开发环境警告。
Vue 优化方法
组件懒加载
使用 defineAsyncComponent 或路由懒加载（() => import('./Component.vue')）拆分代码。
计算属性与缓存
利用 computed 缓存依赖响应式数据的计算结果，避免重复执行复杂逻辑。
v-for 优化
为列表项添加唯一 key，避免使用 v-if 与 v-for 同时作用同一元素。长列表建议使用 vue-virtual-scroller。
响应式数据扁平化
减少嵌套层级过深的响应式数据，非必要字段可用 Object.freeze 冻结或使用 shallowRef/shallowReactive。
编译时优化
使用 Vue 3 的 <script setup> 语法糖，减少运行时开销。生产构建时启用 @vue/compiler-sfc 的优化选项。
通用优化策略
CDN 与静态资源缓存
将第三方库（如 React/Vue 本体）通过 CDN 引入，配置长期缓存（Cache-Control: max-age）。
SSR/SSG 提升首屏速度
服务端渲染（SSR）或静态生成（SSG）框架（如 Next.js、Nuxt.js）减少白屏时间。
性能监控与分析
使用 Lighthouse 或 Web Vitals 指标（如 LCP、FID）定位瓶颈，结合 Chrome DevTools 的 Performance 面板分析渲染性能。
按需引入第三方库
避免全量引入 Lodash 等工具库，使用 lodash-es 或 Babel 插件实现按需加载。
