文档里反复出现的专有名词和缩写的统一解释。
源代码经过 parser 解析后的树形结构。lhx-kit 用 ts-morph 操作 AST 来安全地修改 project.config.ts,避免字符串拼接踩坑。
aliasGlobalsCDN entry 字段。加载 UMD 后把 window[globalVar] 追加到其他 global 名上。典型场景:Preact 替代 React——把 window.preactCompat 别名为 window.React。
applyOnCDN 配置字段。('dev' | 'build' | 'preview')[],指定哪些 Vite 命令启用 CDN。默认 ['build'],保证开发时源码直接引用便于调试。
Renderer 里的"基础配置"。所有 patches 都基于 base schema 合并。
MPA 的共享初始化代码。通常在每个 page 的 entry.{ts,tsx} 最早期被 import,负责调用 setupMobile / setupMock / 主题初始化等。
Google 开源的压缩算法,压缩比比 gzip 多省 15–25%。仅 HTTPS 场景下被浏览器接受。lhx-kit 默认产 .br 文件。
轻量级 CLI 框架,15KB 大小。lhx-kit 的 CLI 框架选型。见 CLI §10。
运行时代码(来自 @lhx-kit/runtime/cdn-loader),构建时以 IIFE 形式 inline 到 HTML。负责按顺序加载 CDN UMD、失败降级、通知业务代码。
Rollup 构建产物的单元,对应一个 .js 文件。lhx-kit 在 generateBundle 钩子里按 ownership 把 chunk 分到 <page>/assets/ 或 shared/assets/。
require / module.exports 风格的模块系统。Node.js 早期格式。react-dom 的生产构建就是一个大 CJS 闭包。
浏览器安全策略。生产 CSP 通常禁 unsafe-eval,这就是 lhx-kit renderer 不用 new Function 的原因。
代码里通过 if (false) import(...) 或条件为假的 await import(...) 产生的 chunk。在 dead path 上永远不会加载,但保留了"按需时才加载"的语义。
典型:@lhx-kit/renderer/schema-zod 的 1.12KB chunk。
物理像素与 CSS 像素的比值。iPhone Retina 是 2 / 3,Android 高端机 2 / 3 / 3.5。window.devicePixelRatio。
import(...) 返回 Promise 的语法。Rollup 遇到它会自动拆 chunk。
优化模式:在昂贵操作之前做一个快速检查,能跳过就跳过。lhx-kit transform() 钩子的 code.includes(name) 就是 early exit。
import / export 风格的模块系统。浏览器原生支持。
Rollup 术语:作为构建入口的 chunk。在 lhx-kit 里对应每个 page 的 entry.{ts,tsx} 产生的 chunk。
experimentalMinChunkSizeRollup 配置项。低于阈值的 chunk 自动合并到静态 importer。lhx-kit 设为 10 * 1024(10KB)。
lhx-kit 的自定义 chunk 分组策略。React / Vue 等"总是一起用"的包归到同一个 vendor chunk。
React reconciler 的内部数据结构。10 年稳定存在,是 react-dom 不能被拆分的根本原因。
降级机制。在 CDN 方案里指"CDN 全挂时走本地 vendor"的那一层。
generateBundleRollup / Vite 插件钩子。所有 chunk 已生成、写盘前最后一步。lhx-kit 在这里做 chunk 重组和 HTML 注入。
从 GitHub / tarball 拉模板的工具。lhx-kit 保留依赖但目前不用(走本地 templates)。
CDN entry 字段。UMD 暴露的全局变量名。默认按 kebab→PascalCase 推导(vue→Vue,vue-router→VueRouter)。
基础压缩算法,所有浏览器都支持。lhx-kit 默认产 .gz 文件。
0.5px 边框。DPR >= 2 的设备通常支持。lhx-kit setupMobile({detectHairlines: true}) 会自动给 <html> 加 .hairlines class。
HTTP/2 的头部压缩算法。每个 HTTP/2 请求的 overhead(即使头部很小)在 HPACK 下也是 ~200 bytes。
HTTP 协议的 2.0 版本,支持多路复用(一条 TCP 连接跑多个 stream)。lhx-kit 的 chunk 策略假设生产环境是 HTTP/2。
原生 App + WebView 混合的应用。淘宝 / 京东 / 各家银行 App 都是典型。lhx-kit 的 offline 功能专为此场景设计。
(function(){...})() 结构。CDN loader 就是一个 IIFE。
TCP 的初始拥塞窗口。Linux 默认 10,约等于 14KB。首轮 RTT 能传的字节数上限。这是 10KB chunk 门槛的理论依据。
initScriptCDN entry 字段。entry 加载后执行的 JS 片段,用于 polyfill。典型:给 Preact compat 加 createRoot polyfill。
运行时加载 .ts / .mjs / .js 的工具。lhx-kit 用它加载用户的 project.config.ts,不需要预编译。
用 lazy(() => import(...)) / defineAsyncComponent 包裹的组件。Rollup 会单独拆 chunk。
阿里团队早期的移动端适配库。思路:"根字体 = clientWidth / 10"。lhx-kit mobile.ts 基本是它的现代化重写。
localFallbackCDN entry 字段。覆盖自动扫描的本地 UMD 路径。典型场景:package.json#exports 封闭了子路径,自动扫描失败。
离线包的清单文件。包含 packageName / version / pages / assets 等元信息。容器侧读取它决定怎么加载。
Rollup 配置项。接受函数或映射,决定每个模块落到哪个 chunk。lhx-kit 的 nodeModulesPerPackageChunker 就是这个。
<link rel="modulepreload"> 标签。让浏览器并行下载关键 chunk 而不等 entry module 被解析。Vite build 自动注入。
多页面应用,每个页面一个独立 HTML 入口。对应 SPA(单页面应用)。lhx-kit 专为 MPA 场景优化。
接口 mock 工具,通过 Service Worker 拦截 fetch/XHR。@lhx-kit/runtime/mock 是它的封装。
离线包。由 lhx-cli offline build 产出的 zip,包含 HTML/JS/CSS/manifest。
lhx-kit 的术语。一个 chunk 被哪些 page 引用。ownership.size === 1 → 进 page 目录;>= 2 → 进 shared。
lhx-kit 的 MPA 产物布局。每个 page 独立目录:dist/home/、dist/dashboard/。
Vue 3 的推荐状态管理库。vue3-mpa 模板默认引入。
后处理 CSS 的工具。lhx-kit 移动端场景用 postcss-pxtorem 把 px 转 rem。
离线包配置的"预热规则"。容器启动后异步预取的 API 列表。
project.config.ts。lhx-kit 的单一真理源。
项目根目录。由 lhx-cli 通过 findNearestProjectRoot 向上查找 project.config.* 确定。
React 的内部调度系统。fiber tree + commit phase 的总称。不可 tree-shake。
相对根字体的尺寸单位。1rem === document.documentElement.style.fontSize。
运营后台下发的 schema。由 fetchRemoteSchema 拉取,合并到 base 之上。
@lhx-kit/renderer。配置驱动的 UI 渲染器。
Vite 生产构建的底层打包器。lhx-kit 在 Rollup 钩子里做 chunk 分配等工作。
网络往返时间。4G 典型 50ms,WiFi 典型 20ms,国际 200ms。
@lhx-kit/runtime。浏览器侧运行时能力集合。
@lhx-kit/renderer 里的 JSON 配置。定义页面组件树 + 绑定。
对 base schema 的修改声明。支持 set / insert / remove 三种 op。
被 2+ page 引用的 chunk。在 dist/shared/assets/。
logger 架构里的"输出端"。一个 logger 可以有多个 sink(console + HTTP 上报 + 等)。
单一真理源。lhx-kit 的核心架构原则——所有工具读同一份 project.config.ts。
package.json#exports 的子路径配置。允许 @lhx-kit/runtime/mobile 这种精细 import。
lhx-cli 的模板目录。packages/cli/templates/<name>/。
*.template 文件。拷贝时经过占位替换才变成最终文件。
template.htmlMPA 共用的 HTML 模板。{{ title }} 等占位在 generateIntermediateHtml 阶段被替换。
Vite 插件钩子。改写源码。lhx-kit 在这里做 CDN import 改写。
TypeScript AST 操作库。lhx-kit CLI 用它做 project.config.ts 的 AST 级修改。
基于 esbuild 的 TS 打包工具。lhx-kit 的所有内部包都用 tsup 构建。
浏览器发送给服务器的身份标识字符串。@lhx-kit/runtime/env 用 ua-parser-js 解析它。
兼容 CJS / AMD / 全局的模块格式。CDN 方案依赖 UMD 产物。React 19 不再提供 UMD。
Renderer 里的"变体"。按 when 条件选一组 base + patches。
来自 node_modules 的 chunk。相对于 user code chunk。
@lhx-kit/vite-plugin。整个 kit 的编排层核心。
Vue 2 / 3 兼容层。Pinia 通过它支持 Vue 2。作为 vue 家族 chunk 的一部分。
@lhx-kit/renderer/walker.ts 里的 walkComponents 函数。组件树遍历 + 表达式求值。
原生 App 里嵌入的浏览器组件。iOS WKWebView / Android WebView。
when expressionRenderer schema 里的条件表达式。结构化布尔(and/or/not/eq/...)。
offline.config.ts 字段。哪些 page 进离线包。
pnpm 的 workspace 协议。"@lhx-kit/config": "workspace:*" 表示用 workspace 里的版本。
TS 优先的 schema 校验库。lhx-kit 的 @lhx-kit/config / @lhx-kit/renderer / @lhx-kit/offline 都用它。
轻量 React 状态管理库。react-mpa 模板默认引入(替代 Redux)。