Web Bundling（Single HTML）是一个用于将 Web 应用打包为单个 HTML 文件的技能，适用于必须产出可分享、可分发的自包含单 HTML 输出物的场景。
一、适用场景与与其它技能的区分 当需要产出可分享、可分发的自包含单 HTML 输出时，使用 web-bundling。当以部署自动化和 GitHub Pages 发布为主要目标时，使用 web-deploy-github。对于托管式单文件产物，可以先在此处打包，再通过 web-deploy-github 部署。
二、什么时候使用
- 要作为 Telegram Mini App 分发的游戏
- 要上传到 itch.io 的 HTML5 游戏
- 单文件 demo / 原型
- 作品集（portfolio）产物
三、打包模式
- 简单游戏（无框架）：如果本身已经是单个 HTML，则无需打包；将 CSS/JS 内联到 <style>/<script> 标签中；图片以 base64 data URI 形式嵌入。
- React 应用 → 单个 HTML：技术栈为 React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS。命令如下：
1. 用 Vite 构建项目
npm run build
2. 用 Parcel 打包为单文件
npx parcel build dist/index.html --no-source-maps
3. 用 html-inline 内联资源
npx html-inline dist/index.html -o bundle.html
四、资源内联技巧
- 图片 → base64：<img src="data:image/png;base64,iVBOR..." />
- 字体 → base64 @font-face： <style> @font-face { font-family: 'GameFont'; src: url(data:font/woff2;base64,...) format('woff2'); } </style>
- 音频 → base64（仅较小的音效）：<audio src="data:audio/mp3;base64,..."></audio>
五、游戏分发检查清单
- 已打包为单个 HTML 文件
- 无外部 CDN 依赖（可离线运行）
- 支持移动端触控（Telegram Mini App）
- 考虑 safe-area（WebView 环境）
- 优化文件体积（图片压缩、代码 minify）
- 控制台无报错
六、部署路径
- Telegram Mini App → 托管在 eastsea.monster
- itch.io → 直接上传 HTML 文件
- GitHub Pages → push 到仓库
- CrazyGames/Poki → 确认平台要求
七、约束规则（Guardrails）
- 打包体积限制：超过 100KB 时输出警告并必须审查优化方案；超过 500KB 的包不可分发——需压缩图片、做代码分割、移除不必要的依赖后重试。
- 尽量减少外部 CDN 依赖：生产包中禁止包含 cdn.jsdelivr.net、unpkg.com 等外部 CDN 链接；为保证离线运行，需将所有依赖内联进包中。
- 生产部署时移除 source map：使用 --no-source-maps 选项或在构建配置中确认 sourcemap: false；需验证生产包中不包含 .map 文件或 //# sourceMappingURL= 注释。
上述内容为该技能资料所涵盖的全部事实信息，未提及收费、价格、平台限制或效果数据。