Comfy-Org / Comfy-Org/ComfyUI_frontend
[Optimization] Remove UMD build - Pure ESM only
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 495
Description
## Overview
Since LiteGraph is only consumed through ComfyUI frontend (not as a standalone library), we can **remove the UMD build** and go Pure ESM. This would provide significant benefits with minimal risk.
## Current Situation
**Dual Build Overhead:**
- ESM build: ~300KB
- UMD build: ~400KB
- **Total package**: ~700KB
- **Build time**: 2x formats to generate
**Pure ESM Benefits:**
- Package size: ~300KB (**57% reduction**)
- Build time: ~50% faster
- Simpler configuration
- Better tree-shaking
- Future-proof approach
## Risk Assessment
### Pre-Implementation Audit
Use these Sourcegraph queries to check for potential issues:
**1. Development/Testing Tools:**
```
repo:^github\.com/Comfy-Org/ (require\(.*litegraph < /dev/null | require\(.*@comfyorg/litegraph)
```
**2. Documentation Examples:**
```
repo:^github\.com/Comfy-Org/ (script.*src.*litegraph|require.*litegraph) file:\.(md|html)$
```
**3. Extension Usage Patterns:**
```
repo:^github\.com/.*comfy.*extension require\(.*@comfyorg/litegraph\)
```
**4. ComfyUI Frontend Integration:**
```
repo:^github\.com/Comfy-Org/ComfyUI_frontend require\(.*@comfyorg/litegraph\)
```
### Risk Level: **LOW**
- ✅ ComfyUI frontend uses Vite (ESM-first)
- ✅ Source code already Pure ESM
- ✅ No standalone library usage
- ✅ Node.js 17+ has excellent ESM support
- ✅ Modern browsers support ESM natively
## Implementation Plan
### Phase 1: Audit (Run Sourcegraph Queries)
- [ ] Check for any CommonJS usage in Comfy ecosystem
- [ ] Verify no UMD dependencies in docs/examples
- [ ] Confirm extension compatibility
### Phase 2: Update Build Configuration
```typescript
// vite.config.mts - Remove UMD format
export default defineConfig({
build: {
lib: {
formats: ["es"], // Remove "umd"
fileName: () => "litegraph.js"
}
}
})
```
### Phase 3: Update Package.json
```json
{
"type": "module",
"exports": "./dist/litegraph.js",
"engines": {
"node": ">=16.0.0"
}
// Remove: "main", "module", complex "exports"
}
```
### Phase 4: Test & Validate
- [ ] Build package: `npm run build`
- [ ] Verify single output: `ls -la dist/`
- [ ] Test in ComfyUI frontend
- [ ] Check bundle sizes before/after
## Expected Results
**Before:**
```
dist/
├── litegraph.es.js (~300KB)
├── litegraph.umd.js (~400KB)
├── litegraph.d.ts
└── css/
```
**After:**
```
dist/
├── litegraph.js (~300KB)
├── litegraph.d.ts
└── css/
```
## Compatibility Notes
**✅ Works With:**
- ComfyUI frontend (Vite)
- Modern bundlers (Webpack 5+, Rollup, esbuild)
- Node.js 16+
- All modern browsers
- TypeScript projects
- Extensions using `import` syntax
**❌ Would Break:**
- Extensions using `require()` (check with Sourcegraph)
- Very old bundlers (Webpack <4)
- Node.js <14 (unlikely in Comfy ecosystem)
## Rollback Plan
If issues are discovered:
1. Revert build config changes
2. Re-add UMD format
3. Restore dual exports in package.json
Changes are minimal and easily reversible.
## Success Metrics
- [ ] Package size reduced by 50%+
- [ ] Build time improved
- [ ] ComfyUI frontend continues working
- [ ] No extension breakage reports
- [ ] Simplified build pipeline
## Related Issues
- Comfy-Org/ComfyUI_frontend#4698 - Multiple entry points refactoring
- Bundle optimization efforts
This change aligns with modern web development practices and removes unnecessary complexity from our build process.
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-4697-Optimization-Remove-UMD-build-Pure-ESM-only-2476d73d365081fb99cfe3cf9e1f9f80) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.