web-bundling

Web Bundling (Single HTML)

When to Use This vs Others

Use this (web-bundling) when you must produce a self-contained single HTML output for sharing/distribution.
Use web-deploy-github when deployment automation and GitHub Pages publishing are the primary objective.
For hosted single-file artifacts, bundle first here, then deploy via web-deploy-github.

Bundling a React/Vite app into a single HTML file.

When to use

Games to deploy as a Telegram Mini App
HTML5 games to upload to itch.io
Single-file demos/prototypes
Portfolio artifacts

Bundling patterns

Simple games (no framework)

If it is already written as a single HTML, no bundling is needed. Inline CSS/JS inside the <style>/<script> tag. Embed images as base64 data URIs.

React app → single HTML

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + 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

Asset inlining tips

<!-- 이미지 → 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>

Game deployment checklist

Bundled into a single HTML file
No external CDN dependencies (works offline)
Mobile touch support (Telegram Mini App)
Consider safe-area (WebView environment)
File size optimization (image compression, code minify)
No console errors

Deployment paths

Telegram Mini App → Host on eastsea.monster
itch.io → Upload the HTML file directly
GitHub Pages → Push to the repo
CrazyGames/Poki → Check platform requirements

Guardrails

Bundle size limit — If it exceeds 100KB, a warning is output and optimization must be reviewed. Bundles exceeding 500KB cannot be deployed — retry after image compression, code splitting, and removing unnecessary dependencies.
Minimize external CDN dependencies — In the production bundle, cdn.jsdelivr.net, unpkg.com Do not include external CDN links such as . Inline all dependencies into the bundle to guarantee offline operation.
Remove source maps when deploying to production — --no-source-maps Option or in the build settings, sourcemap: false check. In the production bundle, .map Verify that no files or //# sourceMappingURL= comments are included.