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

React 项目在打包和上线过程中，优化目标和 Vue 类似：减小包体积、提升首屏加载速度、提高运行性能。不过由于 React 常用构建工具是 Webpack / Vite，优化点会稍有差异。下面我帮你分层次梳理：

按需引入 UI 库
- Ant Design：使用 babel-plugin-import 或 Vite 的 unplugin-import
```
import { Button } from 'antd' // 按需引入
```
- Material-UI、Chakra UI 也要避免全量引入。
路由懒加载
- 使用 React.lazy + Suspense 分割页面组件：
```
const Home = React.lazy(() => import('@/pages/Home'))
```
- 搭配 骨架屏 / Loading 提升用户体验。
第三方库优化
- 替换大库：moment → dayjs，lodash → lodash-es / 自己实现小工具函数。
- 避免一次性引入：
```
import get from 'lodash/get'  // 推荐
// import _ from 'lodash'     // 不推荐
```
减少无用依赖
- 使用 webpack-bundle-analyzer 分析包体积。
- 删除未用到的 polyfill 或用 core-js 按需引入。
Hooks 性能优化
- 使用 React.memo、useMemo、useCallback 避免重复渲染。
- 避免在 render 中做复杂计算。

代码压缩与 Tree Shaking
- Webpack 默认开启，推荐额外配置 TerserPlugin 去掉 console.log / debugger。
- Vite 内置 esbuild 压缩，速度更快。
CSS 优化
- Webpack: mini-css-extract-plugin + cssnano 压缩 CSS。
- PurgeCSS 清理未用到的 CSS。
- CSS-in-JS 方案可搭配 babel-plugin-styled-components（去掉 className hash）。
分包策略
- Webpack：splitChunks 拆 vendor、common。
- Vite：rollupOptions.output.manualChunks 自定义分块。
- 比如把 react、react-dom、antd 拆成单独 chunk。
开启 Gzip / Brotli 压缩
- Webpack: compression-webpack-plugin
- Vite: vite-plugin-compression
- 能压缩 60%~70% 的传输体积。
图片与资源优化
- Webpack: image-webpack-loader
- Vite: vite-plugin-imagemin
- 小图 base64 内联，大图走 CDN。
- 使用 svgr 把 SVG 变成 React 组件。
缓存优化
- 文件名加 [contenthash]，保证浏览器缓存有效。
- 把 runtimeChunk 独立出来，避免每次构建缓存失效。

首屏加载优化
- 路由懒加载 + 骨架屏 / Loading。
- 关键数据提前注入（SSR / 静态预渲染）。
懒加载优化
- 组件懒加载（React.lazy）。
- 图片懒加载（react-lazyload 或 IntersectionObserver）。
长列表优化
- 使用 react-window / react-virtualized 实现虚拟滚动。
状态管理优化
- 避免全局状态过大，拆分 context。
- Zustand / Jotai 等轻量状态库比 Redux 更高效。
SSR / SSG
- 使用 Next.js 做 SSR 或静态生成，减少首屏白屏。
- 对 SEO 有明显帮助。

CDN 加速
- React、ReactDOM、Antd 等走 CDN，不打包进 bundle。
- Webpack externals / Vite external 配置：
```
externals: {react: 'React','react-dom': 'ReactDOM'
}
```
HTTP/2 + 浏览器缓存
- 启用 HTTP/2 多路复用。
- 给静态资源设置强缓存 / 协商缓存。
分环境构建
- 生产环境去掉 redux-devtools-extension、调试日志等。
- .env.production 配置 API 地址、CDN 地址。