2.1 根因 #1：图标全量打包（14.9 MB）#

MainGridLayout 中使用了 astro-icon 的 <Icon> 组件，而 astro.config.mjs 中是这样配置的：

1
icon({
2
  include: {
3
    "material-symbols": ["*"],  // 全量导入
4
    "fa6-brands": ["*"],
5
    "fa6-regular": ["*"],
6
    "fa6-solid": ["*"],
7
    "tabler": ["*"],
8
    "flat-color-icons": ["*"],
9
  },
10
}),

["*"] 意味着将 6 套图标集的所有图标数据 全部打包进 SSR Worker。仅在 @iconify-json/material-symbols 一个包中就有成千上万个图标，每个图标的 SVG path 数据都被序列化为 JS 对象。

更关键的是，在 SSR 模式下，astro-icon 不会将 @iconify-json/* 标记为外部依赖（而在静态模式下会），导致所有图标数据被内联到 chunk 中。这就是 MainGridLayout 14.9 MB 的来源。

2.2 根因 #2：内容数据层膨胀（3.7 MB + 5 MB）#

项目有 68 篇 Markdown 文章，源文件合计约 460 KB。但在 SSR 模式下，Astro 5 将整个内容集合序列化为 JS 模块并打包进 Worker：

• data-layer-content（3.7 MB）：所有文章的前言字段 + 正文 + 渲染后的 HTML + 集合元数据
• 独立文章块（~5 MB）：每篇文章对应一个 60-110 KB 的 chunk，包含 expressive-code 语法高亮、Mermaid 图表等编译产物

这两部分合计约 8.7 MB，本质是将静态内容不必要地塞进了运行时。

2.3 根因 #3：RSS Feed 引入重型依赖（776 KB）#

rss.xml.ts 导入了 markdown-it 和 sanitize-html 两个包，只是为了在 RSS 的 <content:encoded> 中渲染文章全文。这对于一个已有 description 字段的 RSS feed 来说是完全多余的。

3.1 图标按需导入（节省 14.6 MB）#

首先统计项目中实际用到的所有图标。可以通过 grep 扫描全部 .astro、.svelte 文件中的 <Icon name="..."> 引用：

1
grep -rn 'name=' --include="*.astro" --include="*.svelte" src/ \
2
  | grep -iE 'material-symbols:|fa6-|tabler:|flat-color-icons:|ic:'

整理出实际使用的图标清单（我的项目约 60 个），将配置改为：

1
icon({
2
  include: {
3
    "material-symbols": [
4
      "arrow-forward-rounded",
5
      "book-2-outline-rounded",
6
      "chevron-right-rounded",
7
      // ... 约 30 个实际用到的图标
8
    ],
9
    "fa6-brands": ["github", "react", "vuejs", /* ... */],
10
    "fa6-solid": ["arrow-up-right-from-square"],
11
    "fa6-regular": ["address-card"],
12
    "tabler": ["rocket", "brand-tailwind", /* ... */],
13
  },
14
}),

注意： 如果你的组件中有动态图标名（如 <Icon name={item.icon} />），需要把所有可能的运行时值也加进去。我在首页的 TechStack、MovingTechStack、Projects 等组件中发现了大量此类用法。

效果立竿见影：MainGridLayout chunk 从 14,898 KB → 269 KB。

3.2 预渲染内容页面（节省 6-8 MB）#

对于博客这类内容驱动的站点，绝大多数页面在构建时就是确定的。Astro 5 支持对特定页面使用 export const prerender = true：

1
---
2
export const prerender = true;
3

4
export async function getStaticPaths() {
5
  // ...返回所有文章路径
6
}
7
---

为以下 6 个内容页面添加了预渲染声明：

预渲染后，这些页面的内容不再打包进 Worker，而是输出为静态 HTML 文件，由 CDN 直接服务。

踩坑记录： 预渲染时 Astro 会尝试优化远程图片（调用 inferRemoteSize 获取尺寸）。如果你的图片托管在 Cloudflare R2 等外部服务，需要确保构建环境能访问这些 URL。另一个选择是在 ImageWrapper 组件中提供显式的 width/height，并设置 inferSize: false 来跳过运行时图片尺寸推断。

同时修复了一个潜伏的 bug：BlogCard.astro、PostCard.astro 等多个组件使用了 currentLang 变量但从未定义（const currentLang = Astro.locals?.lang），在 SSR 模式下因为 Astro.locals 有全局默认值而没暴露，切换到预渲染后就报错了。

3.3 其他优化#

• banner 图片显式尺寸：给 <ImageWrapper> 添加 width={1920} height={1080}，避免预渲染时的网络请求
• RSS feed 预渲染：为 rss.xml.ts 添加 export const prerender = true，在构建时生成静态 XML
• robots.txt 预渲染：同上