Comfy-Org / Comfy-Org/ComfyUI_frontend

[Optimization] Remove UMD build - Pure ESM only

Open
#4,697 0 comments 0 reactions 0 assignees View on GitHub
area:litegraph developer experience
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.