按需加载 on PlumePHP

组件库开发指南：Vite 库模式、发布 npm 与按需加载

Tue, 29 Sep 2026 14:00:00 +0800

引言

「在应用里写组件」和「做一套可发布的组件库」是两回事：库要被 npm 安装、按需引入、类型提示、样式可控、版本演进。Vite 的**库模式（lib mode）**正是为此设计。本文讲用 Vite 开发组件库的完整流程：先讲为什么独立构建组件库（复用/一致性/独立版本）、库模式构建配置（build.lib/formats/external/多入口）、组件与样式方案（CSS 方案选择/主题变量/样式隔离）、类型声明与 dts（构建生成 .d.ts）、按需加载与 sideEffects（子路径导出与摇树）、发布 npm 流程（打包/版本/发布/发布验证）、版本管理与变更日志（语义化版本/CHANGELOG）、与 Monorepo 的整合（多包管理）、最后是组件库的调试与文档（Storybook/文档站/测试）。目标：你能从零搭建一套可发布、可按需、可维护的组件库。

Vite 导入图与模块图内部：依赖追踪、解析与图结构

Tue, 29 Sep 2026 10:00:00 +0800

引言

Vite 启动快、按需加载，秘密都藏在**导入图（Import Graph）**里——一个记录「谁导入谁」的图结构，Vite 通过它知道该转换哪些文件、哪些模块是热更新边界、哪些依赖该预打包。本文讲透 Vite 的导入图与模块图内部：先讲导入图是什么（从入口递归展开的依赖映射）、模块节点（id、依赖、被依赖、模块信息）、解析流程（从裸导入 react 到 node_modules/react/... 的文件路径）、依赖追踪（静态分析 import 语句与动态 import）、模块图与转换流水线的协作（转换与依赖收集的关系）、动态导入与图的惰性扩展（为什么首屏只加载用到的）、模块图与 HMR 边界（为什么热更新要沿导入图传播）、图的内存与性能优化、最后是调试模块图的工具与实践（vite debug、插件钩子、可视化）。