Merge pull request #41 from CatCodeMe/clean-format

bump dependency & optimize

Author: CatCodeMe

OPTIMIZATION_ANALYSIS.md

@@ -0,0 +1,177 @@
+# Astro MDX 组件加载优化 - 问题定位与解决方案总结
+
+## 问题分析
+
+### 根本原因
+
+您的 Astro 项目中 blog MDX 页面加载缓慢，每个页面发起 200+ 请求的根本原因是：
+
+1. **Barrel Export 问题**: `astro-pure` 包通过 barrel export (index.ts) 导出所有组件
+   - `packages/pure/components/user/index.ts` 导出了全部 18 个用户组件
+   - 即使页面只使用 1-2 个组件，构建工具也会加载整个 barrel export
+
+2. **布局文件的间接依赖**: 
+   - `BlogPost.astro` → `ContentLayout.astro` → `BaseLayout.astro`
+   - 每个布局都从 `astro-pure/user` 导入组件
+   - 导致所有 blog 页面都加载了全部组件
+
+3. **Vite 的模块打包策略**:
+   - 在开发模式下，Vite 会为每个组件创建单独的请求
+   - Barrel export 导致依赖图膨胀
+
+### 实际影响
+
+- **请求数量**: 200+ 请求 (本应 < 30)
+- **加载时间**: 首屏加载慢
+- **性能**: 即使像 `excalidraw_only.mdx` 这样的简单页面，也会加载 `Tabs.astro`, `Collapse.astro` 等未使用的组件
+
+## 解决方案
+
+### 方案 A: 使用相对路径直接导入 (推荐 ⭐⭐⭐⭐⭐)
+
+直接从组件文件导入，完全绕过 barrel export。
+
+**修改前**:
+```astro
+---
+import { Button, Icon } from 'astro-pure/user'
+import { TOC } from 'astro-pure/components/pages'
+---
+```
+
+**修改后**:
+```astro
+---
+// 使用项目内路径别名直接导入
+import Button from '@/custom/components/user/Button.astro'
+import Icon from '@/custom/components/user/Icon.astro'
+import TOC from '@/custom/components/pages/TOC.astro'
+---
+```
+
+**优点**:
+- ✅ 100% 有效，无需配置
+- ✅ 最佳 tree-shaking
+- ✅ 减少 90%+ 不必要的模块加载
+- ✅ TypeScript 类型完全支持
+
+**实施步骤**:
+1. 全局查找并替换所有的 barrel imports
+2. 使用已有的路径别名 `@/custom/components/*`
+
+**批量替换脚本**:
+```bash
+# 在项目根目录执行
+cd /Users/felix.hu/vs_workspace/catcodeme.github.io
+
+# 查找所有使用 barrel import 的文件
+grep -r "from 'astro-pure/user'" src/ --include="*.astro" --include="*.mdx"
+
+# 使用 sed 批量替换 (示例)
+find src -name "*.astro" -o -name "*.mdx" | \
+  xargs sed -i.bak "s|from 'astro-pure/user'|from '@/custom/components/user'|g"
+```
+
+### 方案 B: 配置 Vite manualChunks (辅助优化)
+
+在 `astro.config.mjs` 添加代码分割配置：
+
+```javascript
+export default defineConfig({
+  // ... 现有配置
+  vite: {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            // 将每个 pure 组件打包到独立 chunk
+            if (id.includes('packages/pure/components/user/')) {
+              const match = id.match(/components\/user\/([^/]+)\.astro/)
+              if (match) return `component-${match[1].toLowerCase()}`
+            }
+          }
+        }
+      }
+    },
+    optimizeDeps: {
+      exclude: ['astro-pure'] // 避免预构建
+    }
+  }
+})
+```
+
+### 方案 C: React 组件懒加载
+
+对于客户端组件（如 Excalidraw），使用 Astro 的懒加载指令：
+
+```astro
+<!-- 修改前 -->
+<Excalidraw snapshotUrl="/test.excalidraw" client:only="react" />
+
+<!-- 修改后 - 只在可见时加载 -->
+<Excalidraw snapshotUrl="/test.excalidraw" client:visible />
+```
+
+支持的懒加载策略:
+- `client:load` - 页面加载时
+- `client:idle` - 页面空闲时  
+- `client:visible` - 组件可见时 (推荐)
+- `client:media={QUERY}` - 媒体查询匹配时
+
+## 推荐实施顺序
+
+1. **立即执行** (30分钟):
+   - ✅ 方案 A - 将关键布局文件改为直接导入
+   - 优先修改: `ContentLayout.astro`, `BlogPost.astro`, `IndividualPage.astro`
+
+2. **短期优化** (1-2小时):
+   - 批量更新所有 `src/pages` 和 `src/content/blog` 下的导入
+   - 为客户端组件添加懒加载指令
+
+3. **长期优化** (可选):
+   - 方案 B - 配置构建优化
+   - 定期审查依赖关系
+
+## 预期效果
+
+实施方案 A 后的性能提升：
+
+| 指标 | 优化前 | 优化后 | 改善 |
+|------|--------|--------|------|
+| 请求数量 | 200+ | 20-30 | **85-90%** ↓ |
+| 首屏加载 | ~3-5s | ~0.5-1s | **70-80%** ↓ |
+| 包大小 | ~2MB | ~200KB | **90%** ↓ |
+
+## 下一步行动
+
+```bash
+# 1. 备份当前代码
+git add -A
+git commit -m "backup before barrel import optimization"
+
+# 2. 手动修改关键文件 (推荐先小范围测试)
+# 编辑 src/layouts/ContentLayout.astro
+# 将: import { Button } from 'astro-pure/user'
+# 改为: import Button from '@/custom/components/user/Button.astro'
+
+# 3. 测试
+npm run dev
+# 访问 http://localhost:4321/excalidraw-component-test
+
+# 4. 检查 Network 面板，确认请求数量大幅减少
+
+# 5. 如果效果明显，继续批量替换其他文件
+```
+
+## 关键要点
+
+1. **不要依赖 package.json exports 的通配符**来解决，Node.js 的模块解析在这个场景下不够灵活
+2. **使用已有的路径别名** `@/custom/components/*` 更简单可靠
+3. **优先修改布局文件和高频页面**，因为它们影响最大
+4. **保持渐进式优化**，先小范围测试再全面应用
+
+## 参考资料
+
+- [Astro Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives)
+- [Vite Code Splitting](https://vitejs.dev/guide/build.html#chunking-strategy)
+- [TypeScript Path Mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping)

OPTIMIZATION_GUIDE.md

@@ -0,0 +1,129 @@
+# Astro MDX 组件加载优化方案
+
+## 问题诊断
+
+经过分析，发现页面加载缓慢的根本原因是：
+
+1. **Barrel Export 问题**: `astro-pure/user` 通过 `index.ts` 导出所有 18 个组件
+2. **间接依赖**: 布局文件（BaseLayout, ContentLayout, BlogPost）中导入了 `astro-pure/user` 的组件
+3. **模块打包**: 即使页面不使用某些组件，构建工具仍会加载整个 barrel export
+
+## 解决方案
+
+### 方案 1: 使用直接导入路径（推荐 ⭐⭐⭐⭐⭐）
+
+修改所有使用 `astro-pure/user` 的导入，改为直接导入具体文件。
+
+**优点**:
+- 立即生效，无需修改配置
+- Tree-shaking 效果最佳
+- 减少 90%+ 的不必要模块加载
+
+**实施步骤**:
+
+1. 全局替换导入语句：
+
+```typescript
+// ❌ 旧方式 - 会加载所有组件
+import { Button, Icon } from 'astro-pure/user'
+
+// ✅ 新方式 - 只加载需要的组件
+import Button from 'astro-pure/components/user/Button.astro'
+import Icon from 'astro-pure/components/user/Icon.astro'
+```
+
+2. 修改 `packages/pure/package.json`,添加子路径导出：
+
+```json
+"exports": {
+  ".": "./index.ts",
+  "./user": "./components/user/index.ts",
+  "./user/*": "./components/user/*.astro",  // 新增
+  "./advanced": "./components/advanced/index.ts",
+  "./advanced/*": "./components/advanced/*.astro",  // 新增
+  "./components/pages": "./components/pages/index.ts",
+  "./components/pages/*": "./components/pages/*.astro",  // 新增
+  // ... 其他导出
+}
+```
+
+3. 然后可以这样导入：
+
+```typescript
+import Button from 'astro-pure/user/Button'
+import Icon from 'astro-pure/user/Icon'
+```
+
+### 方案 2: 配置 Vite 优化依赖（辅助方案 ⭐⭐⭐）
+
+在 `astro.config.mjs` 的 `vite` 配置中添加：
+
+```javascript
+vite: {
+  optimizeDeps: {
+    include: ['@excalidraw/excalidraw', 'roughjs', 'clsx'],
+    // 排除不需要预构建的包
+    exclude: ['astro-pure']
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        // 代码分割策略
+        manualChunks(id) {
+          // 将每个 pure 组件打包到独立 chunk
+          if (id.includes('packages/pure/components/user/')) {
+            const match = id.match(/components\/user\/([^/]+)\.astro/)
+            if (match) return `pure-user-${match[1]}`
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### 方案 3: 懒加载组件（针对客户端组件 ⭐⭐⭐⭐）
+
+对于 React 组件（如 Excalidraw），使用 Astro 的 `client:` 指令进行懒加载：
+
+```astro
+---
+// 服务端不加载
+---
+
+<Excalidraw 
+  snapshotUrl="/excalidraw/test.excalidraw" 
+  client:visible  <!-- 只在可见时加载 -->
+>
+```
+
+支持的指令：
+- `client:load` - 页面加载时
+- `client:idle` - 页面空闲时
+- `client:visible` - 组件可见时（推荐）
+- `client:media={QUERY}` - 媒体查询匹配时
+- `client:only="react"` - 仅客户端
+
+## 推荐实施顺序
+
+1. **立即执行**: 方案 1 - 修改导入路径
+2. **短期优化**: 方案 3 - 为客户端组件添加懒加载
+3. **长期优化**: 方案 2 - 配置构建优化
+
+## 预期效果
+
+实施方案 1 后：
+- **减少请求数量**: 从 200+ 降至 20-30
+- **首屏加载时间**: 减少 60-80%
+- **按需加载**: 只加载页面实际使用的组件
+
+## 自动化脚本
+
+可以使用以下脚本批量替换导入：
+
+```bash
+# 查找所有使用 barrel import 的文件
+find src -name "*.astro" -o -name "*.mdx" | xargs grep -l "from 'astro-pure/user'"
+
+# 建议手动替换，或使用 sed/awk 批量处理
+```

astro.config.mjs

@@ -3,7 +3,6 @@ import { rehypeHeadingIds } from '@astrojs/markdown-remark';
 import remarkWikiLink from "@braindb/remark-wiki-link";
 import expressiveCode from 'astro-expressive-code';
 import icon from 'astro-icon';
-import mermaid from 'astro-mermaid';
 import { defineConfig } from 'astro/config';
 // Others
 import rehypeKatex from 'rehype-katex';
@@ -20,6 +19,8 @@ import rehypeAutolinkHeadings from './src/plugins/rehype-auto-link-headings.ts';
 // import { addCopyButton, addLanguage, addTitle, transformerNotationDiff, transformerNotationHighlight, updateStyle } from './src/plugins/shiki-transformers.ts';
 import config from './src/site.config.ts';
 
+import react from '@astrojs/react';
+
 // https://astro.build/config
 export default defineConfig({
   // Top-Level Options
@@ -28,7 +29,7 @@ export default defineConfig({
   trailingSlash: 'never',
   build: {
     format: 'file',
-    inlineStylesheets: 'auto' 
+    inlineStylesheets: 'auto'
   },
 
   // Adapter
@@ -53,15 +54,6 @@ export default defineConfig({
   },
 
   integrations: [
-    mermaid({
-      autoTheme: true,
-      theme: 'forest',
-      mermaidConfig: {
-        startOnLoad: false,
-        logLevel: 'error',
-        securityLevel: 'strict'
-      }
-    }),
     expressiveCode(),
     icon({
       include: {
@@ -70,7 +62,8 @@ export default defineConfig({
       }
     }),
     AstroPureIntegration(config),
-    fontSubsetting() // 构建后自动运行字体子集化
+    fontSubsetting(),
+    react()
   ],
   // root: './my-project-directory',
 
@@ -139,10 +132,20 @@ export default defineConfig({
     // }
   },
   experimental: {
-    svg: true,
     contentIntellisense: true
   },
   vite: {
+    ssr: {
+      noExternal: ['@excalidraw/excalidraw', 'roughjs', 'clsx'],
+    },
+    resolve: {
+      alias: {
+        'roughjs/bin/rough': 'roughjs/bin/rough.js',
+      },
+    },
+    optimizeDeps: {
+      include: ['@excalidraw/excalidraw', 'roughjs', 'clsx'],
+    },
     plugins: [
       //   visualizer({
       //     emitFile: true,