用途
该技能用于 MUI（Material UI）应用的前端性能优化，覆盖四个方面：tree-shaking 与打包体积控制、运行时重渲染抑制、大型列表与重型组件处理、服务端渲染（SSR）样式接入。
主要能力
1. Tree-Shaking 与导入方式
- 使用 @mui/material 的命名导入，但强调不要从 barrel 文件或 index 导入，因为打包工具难以有效 tree-shake。
- 给出对照写法：从 '@mui/material' 整体导入会带入整个包（约 300 KB+ gzipped），而逐组件深层导入可被单独 tree-shake。
- 图标始终深层导入：从 '@mui/icons-material' 导入会带入 2100+ 图标（约 1 MB+）。
- 若必须使用 barrel 命名导入，可用 babel-plugin-import 在构建时转换，配置项包括 libraryName、libraryDirectory 与 camel2DashComponentName。
2. 打包分析
- source-map-explorer：安装后加入 package.json 的 analyze 脚本。
- Next.js 使用 @next/bundle-analyzer，通过 ANALYZE=true npm run build 运行。
- CRA 或自定义 webpack 使用 webpack-bundle-analyzer 的 BundleAnalyzerPlugin。
3. Emotion 缓存
- 未启用缓存时，Emotion 会在每次 SSR 请求重新生成样式表。
- 使用 createCache（key: 'css', prepend: true）配合 CacheProvider。
- 给出 Next.js Pages Router 下 _app.tsx 与 _document.tsx 的完整配置：在 getInitialProps 中用 extractCriticalToChunks 提取关键 CSS，并将 style 标签注入 Head。
4. 避免重渲染
- sx 对象：sx prop 每次渲染都会新建对象，导致 Emotion 重算样式。依赖 props/state 的动态 sx 用 useMemo 包裹；静态样式定义在组件外，并可数组形式合并。
- 组件 memo：使用 memo 与 useCallback 稳定 props 与回调。
- 避免 render 内联函数处理器，改用 useCallback。
5. 大列表虚拟化
- 方案一：MUI X DataGrid 自带虚拟化，可用于 10000+ 行，仅渲染约 20 行可见行。
- 方案二：react-window 的 FixedSizeList 自定义列表。
- 方案三：react-virtuoso，API 更简单，支持可变行高。
6. 懒加载重型组件
- DataGrid、DatePicker 等 MUI X 组件体积较大，可用 lazy + Suspense 拆分为独立 chunk，配合 CircularProgress 作为 fallback。
- 对仅在客户端运行的重组件，可用 Next.js dynamic 配合 ssr: false。
7. SSR 接入
- Pages Router：安装 @emotion/server、@emotion/cache、@emotion/react；每请求创建新的 EmotionCache（不可跨请求共享）；在 getInitialProps 提取关键 CSS；在 Head 中先于页面渲染注入 style 标签。
- App Router（v13+）：通过 ThemeRegistry 客户端组件与 NextAppDirEmotionCacheProvider 封装，使用 useServerInsertedHTML 插入样式，cache.compat 设为 true，并重写 cache.insert 收集插入的样式名。
8. 主题单例
- 不要在渲染中调用 createTheme，否则每次渲染生成新主题对象，导致所有消费者重渲染。主题应在组件外创建；动态主题（如暗色模式切换）用 useMemo 依赖 mode。
使用方式
资料以代码示例与检查清单形式给出。可直接采用其中的导入写法、缓存配置、memo/useCallback 模式、虚拟化组件与 lazy 加载方式。SSR 部分按 Next.js 的 Pages Router 或 App Router 选择对应配置。
适用场景
基于 React 与 MUI 构建的前端项目，尤其是使用 DataGrid、DatePicker 等 MUI X 组件、列表数据量大、或采用 Next.js SSR 的应用。检查清单覆盖导入方式、sx 对象处理、事件处理器、列表虚拟化、重型组件懒加载、Emotion 请求级缓存、主题创建位置与依赖变更后运行打包分析等检查项。
限制
资料未说明该技能对非 MUI 组件库的适用性、具体性能提升数值、支持的框架版本范围（除 Next.js v13+ 外），也未提供安装该技能本身的命令或平台、收费信息，这些暂未提供。