7KB gzip 零依赖背后的工程化秘诀：morphicons 的 CI 尺寸门禁、按导出 tree-shake 验证与安全模型

7KB gzip 零依赖背后的工程化秘诀morphicons 的 CI 尺寸门禁、按导出 tree-shake 验证与安全模型【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphiconsmorphicons 是一个零依赖的 SVG 图标变形动画库icon morphing library任意一个图标都能以弹簧物理平滑地变形为另一个图标核心包仅约 7 KB gzip。本文带你拆解它如何用CI 尺寸门禁、按导出的 tree-shake 验证与最小攻击面安全模型把小体积、零依赖从口号变成可执行、可审计的工程约束。先说结论体积承诺如果没有自动化门禁来守护就是一句空话。morphicons 的答案是——每一次提交都要通过尺寸检查每一个导出都要能被单独称量。CI 尺寸门禁把体积承诺变成可执行的检查很多项目只在 README 里写本库仅 X KB然后随着版本迭代悄悄膨胀。morphicons 的做法是把体积目标写进 CI每次推送到主分支或提交 PR都会无条件跑一条完整的检查链。一次提交要过的五道关卡CI 工作流 .github/workflows/ci.yml 的步骤非常克制没有花活LintBiome 规则见 biome.jsonTypecheckstrict 模式跑 6 套配置coredom、playground、react、react-native、vue、svelteTest156 个测试 / 约 13,700 个断言Buildtsdown 多入口构建入口清单见 tsdown.config.tsSize gatesbun run size即 size-limit 体积门禁关键点在第 5 步构建完成之后用 size-limit 对每个入口分别测量 gzip 体积超过阈值整个 CI 直接变红。门禁不是拍的实测值 约 10% 余量所有阈值集中在 package.json 的size-limit配置里。以核心入口为例package.json配置意图写在字段名里core (gzip — anti-regression tripwire, see README)——它自称防回归绊线核心实测 6.60 KB门禁设在 7 KBmorphicons/dom核心驱动实测 7.12 KB门禁 7.5 KBmorphicons/react、morphicons/vue实测约 8.0 KB门禁 8.5 KB这套数字来自 README.md 的 Size 章节规则只有一条门禁比实测值留约 10% 余量如果某个功能确实需要更多空间就必须显式重新谈判这个数字绝不允许悄悄长大。 这里最值得抄的细节每个条目都带一个自解释的nameCI 失败时你能一眼看出是谁超了而不是面对一串匿名路径。按导出 tree-shake 验证让 CI 替你盯住隐藏膨胀这是 morphicons 工程化上最精巧的一招。问题入口级门禁抓不到耦合morphicons/adapters是一个可选入口里面有三个格式适配器svgToIconSVG 标记输入、maskTargetCSS mask 输出、canvasTarget2D canvas 输出。如果只对入口做总量门禁会发生什么——某个适配器的代码悄悄依赖了另一个适配器总量没超但只导入一个适配器的用户被迫多付了字节。解法对每个命名导入单独测量size-limit 支持按命名导入测量。于是 package.json 里除了聚合门禁4.8 KB还有三条按导出门禁条目实测门禁adapters聚合允许随适配器增长4.32 KB4.8 KBadapters › { svgToIcon }单独导入3.34 KB3.7 KBadapters › { maskTarget }单独导入0.70 KB0.8 KBadapters › { canvasTarget }单独导入0.48 KB0.55 KB效果是如果有一天两个适配器被耦合到无法独立摇走对应的按导出门禁会在 CI 中直接触发——拦住它的是自动化绊线而不是评审者的眼睛。src/adapters/index.ts 的头部注释把这层意思写得明明白白。这个决策背后的取舍记录在 docs/adr/0001-frozen-core-contracts-adapters-entry.md 中他们否决了核心内运行时开关所有用户无差别付费和每个能力一个入口入口泛滥最终选择单一 adapters 入口 每个导出独立门禁。配套的设计原则叫付费单位是导入unit of payment——某能力的体积只由导入它的代码买单术语定义见 CONTEXT.md。配合 package.json 中的sideEffects: false与纯 ESM 子路径导出.、./dom、./react、./vue、./svelte、./element、./astro你只用多少就只付多少成为打包器层面可验证的事实。morphicons 安全模型把攻击面收缩到一句话安全模型不神秘收缩攻击面即可。morphicons 在 SECURITY.md 中把自己的安全边界声明得非常干脆零运行时依赖——依赖树里没有可以出事的第三方无网络访问——不 fetch、不追踪、不遥测无eval——不动态执行任何字符串DOM 面仅限setAttribute——库只写你交给它的那个元素的属性构建链路的供应链卫生除了运行时零依赖工程链路本身也做了硬化Actions 全部按 SHA 钉死.github/workflows/ci.yml 的注释说明——工作流动作按 SHA 固定供应链卫生再由 .github/dependabot.yml 的 Dependabot 负责保持钉住的新鲜度发布走 OIDC 可信发布 provenance.github/workflows/publish.yml 中npm publish --provenance让每个 npm 版本都能回溯到产生它的确切提交与工作流仓库里不存任何长期 token发布由版本号触发工作流对比本地版本号与 npm 注册表同版本则绿色空跑——升版本号就是发布开关没有 tag 簿记漏洞处理与核心契约冻结安全事件走私有漏洞报告通道不公开 issue修复以补丁版本经自动化管道发布并有 provenance 可验证。同时docs/adr/0001-frozen-core-contracts-adapters-entry.md 冻结了核心契约输入面固定为IconNoded字符串写合同固定为PathEl——外部格式一律走 adapters 入口。攻击面不随功能增长而扩张这在架构层面同样是安全设计。3 个可以立刻抄进自己项目的实践给每个入口配 gzip 门禁余量控制在 10% 左右用 size-limit 在 CI 里按入口测量阈值 实测 一点余量超线即红要提额就改配置、走评审让体积增长永远显性化用命名导入测量验证 tree-shake对关键的多导出入口额外配置import: { 某导出 }的单独门禁耦合无法独立摇走的瞬间就会被 CI 抓住把安全范围写成一段话明确声明零依赖 / 无网络 / 无 eval / 最小 DOM 面并让 SHA 钉死的 CI 动作 provenance 发布与之配套——攻击面小审计成本就小总结morphicons 的 7 KB 不是运气而是一套**承诺 → 测量 → 门禁 → 谈判** 的闭环CI 尺寸门禁守住每个入口的体积按导出的 tree-shake 验证守住每个用户只付自己那份而零依赖 无网络 最小 DOM 面的安全模型让这份轻量不需要用信任去换。对任何想做小而精库项目的团队这三招都值得直接抄进 CI。 想动手验证克隆仓库后运行bun install bun run size即可本地复现全部体积门禁git clone https://gitcode.com/gh_mirrors/mo/morphicons【免费下载链接】morphiconsAny icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.项目地址: https://gitcode.com/gh_mirrors/mo/morphicons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考