orbit-bundle-analysislisted

# 🪐 orbit-bundle-analysis — JS/CSS bundle profiler Your plugin ships JavaScript and CSS to every site. 1MB on the homepage = 30,000 sites × 1MB = 30GB of bandwidth per day if your plugin has any traction. Trim it. --- ## Quick start ```bash # Asset weight summary (per file, totals) bash ~/Claude/orbit/scripts/check-asset-weight.sh ~/plugins/my-plugin # Visual breakdown (JS only — needs source maps) npx source-map-explorer assets/js/main.js # Find unused CSS purgecss --css assets/css/frontend.css --content http://localhost:8881 \ --output reports/purgecss/ ``` Or via gauntlet (Step 4): ```bash bash scripts/gauntlet.sh --plugin . --mode quick ``` --- ## What it reports | Asset | Target | Bad | |---|---|---| | Total JS (all loaded on frontend) | < 100KB | > 300KB | | Total CSS (all loaded) | < 50KB | > 150KB | | Single largest JS file | < 80KB | > 200KB | | Single largest CSS file | < 40KB | > 100KB | | Unused CSS (% of shipped) | < 30% | > 60% | | `console.log` in production JS | 0 | any | | Source maps shipped to prod | No | Yes | --- ## Source-map-explorer (the visual tool) ```bash # Generate sourcemaps in your build # webpack: devtool: 'source-map' # rollup: sourcemap: true # Then run: npx source-map-explorer assets/js/main.js # → opens an interactive treemap in browser # Save the SVG report npx source-map-explorer assets/js/main.js --html reports/bundle-treemap.html ``` What it shows: - Every imported module sized by its contribution to the final bundle -