A post-processing tool that creates dual builds with import maps for cross-origin caching
npm install vite-sustainable

A Vite post-processing tool that enhances your existing build with a sustainable alternative. It creates an additional optimized mini build with externalized dependencies loaded from esm.sh CDNs using import maps, then updates your index.html to conditionally load the based on the sustainable-extension-loaded attribute on the html document. This ensures the mini build is only loaded when the sustainable browser extension is installed.
ļæ½ļø Dual Build System - Creates both standard and optimized builds in a single step
š Smart Loading - Automatically selects build based on window.__SUSTAINABLE_BUILD__ flag
š¦ Import Maps - Generates HTML import maps with exact dependency versions from lock files
ā” CDN Externalization - Reduces bundle size by loading dependencies from extension
š§ Customizable - Configure CDN mappings and exclusions per project
š Post-Build Processing - Runs after your normal Vite build completes
``bash`
npm install -D vite-sustainable
> Note:
> - Install as a dev dependency (-D flag)
> - Requires Vite 4+ as a peer dependency
> - This is a post-processing tool that runs after your normal Vite build
Add to your package.json scripts:
`json`
{
"scripts": {
"build": "vite build",
"postbuild": "vite-sustainable"
}
}
Then run your normal build:
`bash`
npm run buildvite-sustainable runs automatically after build completes
`bash`With custom options
npx vite-sustainable --outDir dist --exclude react,react-dom
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| root | string | process.cwd() | Root directory of the project |outDir
| | string | 'dist' | Output directory for builds |exclude
| | string[] | [] | Packages to exclude from externalization |
Create a cdn-mappings.json file to define which packages should be loaded from CDNs:
`json`
{
"react": "https://esm.sh/react@{version}",
"react-dom": "https://esm.sh/react-dom@{version}",
"framer-motion": "https://esm.sh/framer-motion@{version}",
"clsx": "https://esm.sh/clsx@{version}"
}
The {version} placeholder will be replaced with the exact version from your lock file.
1. Runs After Build - Processes your existing Vite build output
2. Dependency Analysis - Reads lock files to find exact versions of all dependencies
3. Mini Build Creation - Creates optimized build with CDN-mapped dependencies in dist/mini/window.__SUSTAINABLE_BUILD__
4. Import Map Generation - Injects import maps for externalized dependencies
5. Index.html Enhancement - Updates your index.html with conditional loading:
- When is true: loads standard buildindex.original.html
- Otherwise: loads mini build with CDN dependencies
6. Original Backup - Keeps your original index.html as
After running the post-processor, your dist/ directory will contain:
``
dist/
āāā index.html # Smart loader with conditional loading
āāā assets/ # Standard build files
ā āāā index-xxxxx.js
ā āāā index-xxxxx.css
āāā mini/ # Optimized build files
āāā index-xxxxx.js
The generated index.html includes:
`html
``
- Vite 4+
- Node.js 18+
- Modern browsers with import maps support
MIT Ā© Ludwig Schubert
Issues and pull requests are welcome on GitHub.