[RFC] 068 - 首屏性能优化

[arvinxx]

背景

优化性能

思路

基于 3b6432 commit （2024.11.03）的分析：

Route (app)                                   Size     First Load JS
┌ ƒ /                                         9.44 kB         447 kB
├ ƒ /_not-found                               171 B           105 kB
├ ƒ /(.)settings/modal                        5.22 kB         141 kB
├ ƒ /api/auth/[...nextauth]                   0 B                0 B
├ ƒ /api/auth/error                           1.23 kB         106 kB
├ ƒ /api/webhooks/casdoor                     0 B                0 B
├ ƒ /api/webhooks/clerk                       0 B                0 B
├ ƒ /api/webhooks/logto                       0 B                0 B
├ ƒ /chat                                     17.3 kB         676 kB

其中首屏 First Load JS 来到了 447 kb，这个应该是导致首屏加载比较慢的关键因素，看看可以怎么优化。

首先通过 npm run build:analyze 用 Webpack 来分析下构建产物：

将base path 选成 app/page 就可以将入口设定为 / 路径：

产物预览如下：

可以看到首屏中有几个比较大体积的chunk （尺寸都按 gzip 来评估）：

• 40604 (103kb): 包含dexie / i18next / mdast-util-from-markdown 等模块
• 92880（75kb）：包含antd modal 、rc-form 等组件；
• 66965（30kb）：包含 @ant-design/cssinjs 等基础依赖;
• 73766（28kb）： src/config/modelProviders 供应商配置文件；
• 48945（16kb）： client db、 user store 等业务代码；
• 57118 （13.32kb） zod 模块；
• 555（7.68kb）： ua-parser 模块；
• ...

剩余比较小的模块就不列了，上述列下来的总体积大致已经有 270+kb ，如果优化上述部分的 chunk 尺寸，理论上应该能提升一波首屏加载速度。

---

上述核心 chunk 中，一眼看过去并不需要的依赖有：

• dexie.mini.js 、mdast-util-from-markdown（在 server db 下理论上就不应该加载）
• config/modelProviders（首屏不需要）
• antd 的基础组件（首屏也不需要）

这些是首屏不需要的，但都直接被引入，所以如果能将这些依赖在首屏加载时移除，那么应该能较大程度地提升加载速度。

[BrandonStudio]

还有一点，很多ts文件只用到注释的类型也用import导入了，如果全部改成 import type 会不会有帮助？

[arvinxx]

这个不会，type 在 webpack 构建过程中会自动移除的，对包体积没有太大影响