oven-sh / bun

Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
https://bun.sh
Other
73.01k stars 2.66k forks source link

`bun build` could do better minification #9418

Closed Electroid closed 1 week ago

Electroid commented 5 months ago

This is the first few lines of minified code from running bun build --minify with 10 copies of Three.js:

var X28=Object.defineProperty;var Z9=(J,$)=>{for(var Z in $)X28(J,Z,{get:$[Z],enumerable:!0,configurable:!0,set:(Q)=>$[Z]=()=>Q})};var Gg0={};
Z9(Gg0,{createCanvasElement:()=>{{return Ht}},ZeroStencilOp:()=>{{return F28}},ZeroSlopeEnding:()=>{{return yG}},ZeroFactor:()=>{{return nq0}},ZeroCurvatureEnding:()=>{{return jG}},WrapAroundEnding:()=>{{return Aw}},WireframeGeometry:()=>{{return dN0}},
WebGPUCoordinateSystem:()=>{{return DF}},WebGLUtils:()=>{{return ht}},WebGLRenderer:()=>{{return FN0}},WebGLRenderTarget:()=>{{return cZ}},

Notice the ()=>{{ return ??? }}

Where as esbuild show the following:

"use strict";(()=>{var vIt=Object.defineProperty;var ns=(s,e)=>{for(var t in e)vIt(s,t,{get:e[t],enumerable:!0})};
var HXe={};ns(HXe,{ACESFilmicToneMapping:()=>QTe,AddEquation:()=>Pv,AddOperation:()=>ZTe,AdditiveAnimationBlendMode:()=>P9,
AdditiveBlending:()=>g$,AgXToneMapping:()=>eEe,AlphaFormat:()=>sEe,AlwaysCompare:()=>SEe,AlwaysDepth:()=>kTe,AlwaysStencilFunc:()=>X$,AmbientLight:()=>YF,AnimationAction:()=>rO,AnimationClip:()=>w_,AnimationLoader:()=>xj,AnimationMixer:()=>Dj,AnimationObjectGroup:()=>Uj,
AnimationUtils:()=>yXe,ArcCurve:()=>H9,ArrayCamera:()=>aF,ArrowHelper:()=>aee,AttachedBindMode:()=>v$,Audio:()=>tO,

Notice the ()=>???, that is better. We could even make this: _=>???.

How to reproduce:

bun install github:mrdoob/three.js esbuild
bun copy-three.mjs
bun build dist/Three.js --sourcemap=external --minify --outfile=out/bun/Three.bun.js --outdir=out/bun --entry-naming=[name].bun.[ext]
bunx esbuild dist/Three.js --bundle --sourcemap --minify --outfile=out/esbuild/Three.esbuild.js

copy-three.mjs:

// Create 10 copies of three.js
// https://github.com/evanw/esbuild/blob/617eddaa32b7649ad23ddd15257816df3f0f544c/Makefile#L913

import { join } from "node:path";
import { cpSync, existsSync, rmSync, writeFileSync } from "node:fs";

const src = join("node_modules", "three", "src");
const force = process.argv.includes("--force");

let entry = "";
for (let i = 1; i <= 10; i++) {
  const dst = join("dist", `three-${i}`);
  if (force) {
    rmSync(dst, { recursive: true, force: true });
  }
  if (!existsSync(dst)) {
    cpSync(src, dst, { recursive: true });
  }
  entry += `import * as three${i} from "./three-${i}/Three.js"; export { three${i} };\n`;
}

writeFileSync(join("dist", "Three.js"), entry);
cimchd commented 5 months ago

We considered using bun instead of esbuild for bundling in our monorepo and tested it on our real codebase. It turned out that esbuild's minified code is 15-30% smaller than bun's minified output.

paperdave commented 2 months ago

this issue's title is too board. I am converting it into a tracking issue, with the goal of becoming equal or smaller than esbuild bundles.

The displayed issue of bad codegen in __export is fixed in #12144

Jarred-Sumner commented 1 week ago

This should be an issue label and not one issue.