[Web前端/工程化] 浅谈Web前端工程化实践——打包(Bundle)

0 序

• 要研究当下主流的AI Agent项目，就必然离不开 Web前端(TypeScript/Nodejs/npm等工程化实践)、和Python。所以，Web前端工程化的一些原先遗忘的、不熟悉的内容需要捋一捋。

例如本篇提及的打包(Bundle)。

1 Wen前端工程化之打包

前端打包原理与流程

Bundle 的核心原理

Bundle 到底是什么？

• Bundle/打包，就是：打包器把几十甚至上百个源文件"揉"成一两个最终文件后的产物。浏览器只需加载这几个文件，整个应用程序就能跑起来。

上图展示的就是整个过程——左边是散落的源模块，中间是打包器干的四件事，右边就是最终的 Bundle。

为什么要打包？

痛点	不打包会怎样	打包后
HTTP 请求太多	100 个模块 = 100 次请求，延迟爆炸	1-2 个文件，1-2 次请求
浏览器不认识模块语法	早期不支持 import/export，直接报错	转成浏览器能执行的代码
体积太大	未压缩、含注释、有没用的死代码	压缩 + Tree-shaking，体积大幅缩小

【打包器】干了什么？

• 依赖解析 — 从入口文件出发，顺着 import 递归找出所有被引用的模块，构建出一张完整的依赖关系图（Dependency Graph）
• 模块合并 — 按正确的执行顺序把依赖图里的模块拼接成一个大文件，处理模块间的变量作用域
• Tree-shaking — 静态分析哪些 export 的代码从未被 import，直接删掉，"摇掉树上的枯叶"
• 压缩混淆 — 去注释、去空格、缩短变量名、压缩逻辑，把体积压到最小

常见打包工具

工具	特点	适用场景
Webpack	生态最成熟、配置最灵活、Loader/Plugin 体系强大	大型应用，需要复杂构建管线
Rollup	Tree-shaking 效果好、ES Modules 原生输出	打包库（npm 包）
esbuild	Go 编写，速度极快（比 Webpack 快 100 倍量级）	追求极致构建速度
Vite	开发时利用浏览器原生 ESM 按需加载（不打包），生产环境用 Rollup 打包	现代前端项目首选
Parcel	零配置，开箱即用	快速原型

重要趋势

• Vite 引领了一个新方向：开发时不打包。它利用浏览器原生支持的 ES Modules，按需编译单个模块——你改了哪个文件，就只重新编译那一个，开发体验极速提升。

但到了生产环境，仍然需要走完整的 Bundle 流程来优化加载性能。
所以，现在前端的标配是：开发时 No-Bundle（按需编译）+ 生产时 Bundle（打包优化），兼顾【开发体验】和【线上性能】。

Z FAQ for Web前端打包

Q: deepseek-harness 项目的打包工具是什么？

• 根据 deepseek-harness 项目根 package.json 和前端 package.json 的实际配置，项目的打包/构建工具体系：

核心构建工具: tsdown(库打包) + tsc + Vite(前端打包) + pnpm(包管理) + ...

层级	工具	用途
核心库构建	tsdown + tsc	构建 host/client 两个构建面（face），先用 tsc -b 做类型检查，再用 tsdown 打包输出 lib/
Web 前端构建	Vite 6 + @vitejs/plugin-react	构建 React Web UI（vite build），产物在 dist/，由 CLI 的 dsh web 命令托管
文档站点	VitePress	构建文档网站
包管理器	pnpm 11.7.0	monorepo workspaces 管理
测试	vitest 4	单元/E2E/快照测试
代码检查	oxlint	替代 ESLint 的 Rust linter
脚本执行	tsx	直接运行 TypeScript 脚本，无需预编译

其中，最关键的是 tsdown —— 这是项目主力打包器。它的构建脚本长这样：

"build:lib:host": "tsc -b tsconfig.host.json && tsdown --env.DSH_BUILD_FACE host",
"build:lib:client": "tsc -b tsconfig.client.json && tsdown --env.DSH_BUILD_FACE client"

• tsdown 是一个基于 Rolldown（Rust 编写的 JavaScript 打包器，兼容 Rollup API 但速度快得多）的现代库构建工具，可以理解为 tsup 的继任者——tsup 底层用 esbuild，而 tsdown 底层用 Rolldown。

dsh的两种打包情况

deepseek-harness 用了两种不同类型的"打包"：

• 库打包（tsdown/Rolldown） — 把 monorepo 中的 TypeScript 源码编译打包成可发布的 lib/ 产物，属于上述的 Bundle 流程的典型应用
• 前端打包（Vite） — 开发时 vite 不打包（按需编译），生产时 vite build 做 Bundle（底层用 Rollup），正好对应我们之前讲的"开发时 No-Bundle + 生产时 Bundle"模式

插件打包

• 如果插件的打包发布，那走的是另一条路：插件本身不需要打包器编译，直接以 npm 包形式分发：

pnpm publish          # 发布到 npm
pnpm pack            # 生成 .tgz tarball
dsh plugin add xxx   # 用户安装

Y 推荐文献

X 参考文献