Metadata

:LiPen: 作者信息：ped_yc

:LiFlag: 文档状态：YCDONE

:LiCalendarDays: 创建日期：2025-03-03

:LiTags: 标签列表：#性能优化

待办列表

• 打包分片 🔼 ✅ 2025-02-27
• 预加载逻辑 🔼 ✅ 2025-03-04
• 按需加载 🔼 ✅ 2025-03-04

打包分片记录

痛点

一开始的逻辑是所有组件都包含三个属性：

export type QuartzComponent = ComponentType<QuartzComponentProps> & {
  css?: string
  beforeDOMLoaded?: string
  afterDOMLoaded?: string
}

• 其中所有组件的 css 被打包成 index.css
• 所有组件的 beforeDOMLoaded 被打包成 prescript.js
• 所有组件的 afterDOMLoaded 被打包成 postscript.js

这样会产生一个问题，打包出来产物体积过大导致 FCP 过慢，所以需要分片处理

实现：重构组件分类逻辑，优化资源依赖关系

• 所有 css 仍然打包成 index.css
• 所有组件的 beforeDOMLoaded 属性仍然打包成 prescript.js
• 将原有 afterDOMLoaded 的部分进行分片
• 新建一个配置项 componentBundleConfig 用于控制打包分片的行为：

const componentBundleConfig = {
  core: {
    components: ['Header', 'Footer', 'Body'],
    async: false
  },
  features: {
    components: ['Graph', 'Search', 'TableOfContents'],
    dependencies: ['core'],
    async: true,
    preload: true
  },
  analytics: {
    components: [],
    async: true,
    defer: true
  },
  fonts: {
    components: [],
    async: true,
    defer: true
  }
}
```- 所有组件的beforeDOMLoaded属性仍然打包成prescript.js
## 成果展示