react打包优化和配置优化都有哪些？

一、代码层优化（从源头减少包大小）

1. 按需引入 UI 库

   • Ant Design：使用 babel-plugin-import 或 Vite 的 unplugin-import

     import { Button } from 'antd' // 按需引入

   • Material-UI、Chakra UI 也要避免全量引入。

2. 路由懒加载

   • 使用 React.lazy + Suspense 分割页面组件：

     const Home = React.lazy(() => import('@/pages/Home'))

   • 搭配 骨架屏 / Loading 提升用户体验。

3. 第三方库优化

   • 替换大库：moment → dayjs，lodash → lodash-es / 自己实现小工具函数。

   • 避免一次性引入：

     import get from 'lodash/get'  // 推荐
     // import _ from 'lodash'     // 不推荐

4. 减少无用依赖

   • 使用 webpack-bundle-analyzer 分析包体积。
   • 删除未用到的 polyfill 或用 core-js 按需引入。

5. Hooks 性能优化

   • 使用 React.memo、useMemo、useCallback 避免重复渲染。
   • 避免在 render 中做复杂计算。

---

二、构建层优化（Webpack / Vite 配置）

1. 代码压缩与 Tree Shaking

   • Webpack 默认开启，推荐额外配置 TerserPlugin 去掉 console.log / debugger。
   • Vite 内置 esbuild 压缩，速度更快。

2. CSS 优化

   • Webpack: mini-css-extract-plugin + cssnano 压缩 CSS。
   • PurgeCSS 清理未用到的 CSS。
   • CSS-in-JS 方案可搭配 babel-plugin-styled-components（去掉 className hash）。

3. 分包策略

   • Webpack：splitChunks 拆 vendor、common。
   • Vite：rollupOptions.output.manualChunks 自定义分块。
   • 比如把 react、react-dom、antd 拆成单独 chunk。

4. 开启 Gzip / Brotli 压缩

   • Webpack: compression-webpack-plugin
   • Vite: vite-plugin-compression
   • 能压缩 60%~70% 的传输体积。

5. 图片与资源优化

   • Webpack: image-webpack-loader
   • Vite: vite-plugin-imagemin
   • 小图 base64 内联，大图走 CDN。
   • 使用 svgr 把 SVG 变成 React 组件。

6. 缓存优化

   • 文件名加 [contenthash]，保证浏览器缓存有效。
   • 把 runtimeChunk 独立出来，避免每次构建缓存失效。

---

三、运行时优化（用户体验层）

1. 首屏加载优化

   • 路由懒加载 + 骨架屏 / Loading。
   • 关键数据提前注入（SSR / 静态预渲染）。

2. 懒加载优化

   • 组件懒加载（React.lazy）。
   • 图片懒加载（react-lazyload 或 IntersectionObserver）。

3. 长列表优化

   • 使用 react-window / react-virtualized 实现虚拟滚动。

4. 状态管理优化

   • 避免全局状态过大，拆分 context。
   • Zustand / Jotai 等轻量状态库比 Redux 更高效。

5. SSR / SSG

   • 使用 Next.js 做 SSR 或静态生成，减少首屏白屏。
   • 对 SEO 有明显帮助。

---

四、运维层优化（部署与网络）

1. CDN 加速

   • React、ReactDOM、Antd 等走 CDN，不打包进 bundle。

   • Webpack externals / Vite external 配置：

     externals: {
       react: 'React',
       'react-dom': 'ReactDOM'
     }

2. HTTP/2 + 浏览器缓存

   • 启用 HTTP/2 多路复用。
   • 给静态资源设置强缓存 / 协商缓存。

3. 分环境构建

   • 生产环境去掉 redux-devtools-extension、调试日志等。
   • .env.production 配置 API 地址、CDN 地址。

---

🔑 总结

React 打包优化的关键思路：

• 代码层：按需引入、懒加载、优化依赖。
• 构建层：分包、压缩、Tree Shaking、图片优化。
• 运行时：懒加载 + 虚拟滚动 + hooks 优化。
• 运维层：CDN、缓存策略、HTTP/2。

---