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

一、代码层优化(从源头减少包大小)

  1. 按需引入 UI 库

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

      javascript 复制代码
      import { Button } from 'antd' // 按需引入
    • Material-UI、Chakra UI 也要避免全量引入。

  2. 路由懒加载

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

      javascript 复制代码
      const Home = React.lazy(() => import('@/pages/Home'))
    • 搭配 骨架屏 / Loading 提升用户体验。

  3. 第三方库优化

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

    • 避免一次性引入:

      python 复制代码
      import get from 'lodash/get'  // 推荐
      // import _ from 'lodash'     // 不推荐
  4. 减少无用依赖

    • 使用 webpack-bundle-analyzer 分析包体积。
    • 删除未用到的 polyfill 或用 core-js 按需引入。
  5. Hooks 性能优化

    • 使用 React.memouseMemouseCallback 避免重复渲染。
    • 避免在 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 自定义分块。
    • 比如把 reactreact-domantd 拆成单独 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 配置:

      css 复制代码
      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。

相关推荐
昔人'8 小时前
css`text-underline-offset` 为文本下划线设置偏移量
前端·css
旺仔牛仔QQ糖8 小时前
防抖(或节流)自定义传参
前端
莎莎小公举8 小时前
AI 应用中 Markdown 流式渲染图片闪动问题
前端
天蓝色的鱼鱼8 小时前
Next.js的水合:静默的页面“唤醒”术
前端·react.js·next.js
莎莎小公举8 小时前
AI项目中对话模块实现及markdown适配
前端
irises8 小时前
前端国际化方案结构设计
前端
brzhang8 小时前
Node 服务遇到血崩,汤过坑才知道,限流与熔断是你绕不过的坑
前端·后端·架构
Moment8 小时前
NestJS 在 2025 年:对于后端开发者仍然值得吗 ❓︎❓︎❓︎
前端·javascript·后端
Jolyne_8 小时前
一些我推荐的前端代码写法
前端
赵小川9 小时前
Taro 包升级实录 — 从 3.3 到 3.6.3 完整指南
前端·架构