Intent to replace terser with esbuild

[NullVoxPopuli]

Draft PR to test things out.

Todos:

• acquire better package name from @alexlafroscia <3
  • (or rename to ember-cli-esbuild-minification, since this effort is minification focused to improve the build speed of production builds)
  • (or merge with @alexlafroscia's package, and only use a newly added minification api / addition)
• find & replace @nullvoxpopuli/ember-cli-esbuild with whatever that new package is
• see if expected source map behaviors are defined anywhere and ensure they still work
• ember-cli to drop support for node 12? EOL is 2022-04-30... so... I wonder what it would take for ember-cli-esbuild to support node 12 🤔

Related PRs:

• ESBuild for minification embroider-build/embroider#1006
• Add ESBuild for minification embroider-build/ember-auto-import#467

Stats from a pretty-large™ app internally:

Instead of looking at total build time, I remembered that it'd be better to look at total time spent minifying.
These stats came from the results of:

DEBUG="*terser*" ember build --environment=production # in the terser / default branch
DEBUG="*esbuild*" ember build --environment=production # in the esbuild branch

Stats Collection: https://docs.google.com/spreadsheets/d/1Q1Lhkt_N8LjfRFkrH06AXN3mxn5L2CGh4SW8tNSy720/edit#gid=0

• assets/chunk.some-chunk.js (~382KB)
  • 92% faster (took 8% of the time terser did)
  • final size 373.25 KB vs terser's 372.52 KB
• assets/app-name.js (~1078KB)
  • 90% faster (took 10% of the time terser did)
  • final size 681.8KB vs terser's 656.72KB
• assets/vendor.js (~18MB)
  • 95% faster (took 5% of the time terser did)
  • final size 9.39MB vs terser's 9.08MB

using esbuild@0.13.12
minification benchmark comparison between tools

NOTE: final size is not gzipped or brotli'd. just post-minification

[alexlafroscia]

I'm happy to donate the package name or something, if you can find a way to make it useful 😬 I never got around the fact that decorators would need Babel still, so esbuild was unable to replace Babel, which was my original goal.

If you can find some other useful thing that esbuild can do for the community, I'm happy to let you take the package name and run with it 🤷‍♂️

[NullVoxPopuli]

looks like they've recentlyish added support for decorators? evanw/esbuild#104

but, we have a bunch of other custom plugins, like, debug macros. But maybe if we can do all our custom stuff in babel, which is pretty light on cpu, compared to what's happening today), we'll still get some good perf gains?

I'm going to investigate this on monday

[NullVoxPopuli]

More stats

┌────────────────────────────────┬────────────┬───────────┬───────────┬─────────────┬──────────────┬────────────────┬──────────────┬────────────────┬────────────┬─────────────┬──────────────┬────────────────┬──────────────┬────────────────┐
│            (index)             │    time    │    Δt     │ app   .js │ app    Δ.js │ app   .js.br │ app    Δ.js.br │ app   .js.gz │ app    Δ.js.gz │ vendor.js  │ vendor Δ.js │ vendor.js.br │ vendor Δ.js.br │ vendor.js.gz │ vendor Δ.js.gz │
├────────────────────────────────┼────────────┼───────────┼───────────┼─────────────┼──────────────┼────────────────┼──────────────┼────────────────┼────────────┼─────────────┼──────────────┼────────────────┼──────────────┼────────────────┤
│         Default Terser         │ '5m 7.9s'  │ '+87.12%' │ '2.13 MB' │    '+0%'    │ '148.81 kB'  │     '+0%'      │ '214.77 kB'  │     '+0%'      │ '13.11 MB' │    '+0%'    │  '1.71 MB'   │     '+0%'      │  '2.37 MB'   │     '+0%'      │
│ Terser w/ sequences/semicolons │ '4m 35.4s' │ '+67.36%' │ '2.13 MB' │    '+0%'    │ '148.81 kB'  │     '+0%'      │ '214.77 kB'  │     '+0%'      │ '13.11 MB' │    '+0%'    │  '1.71 MB'   │     '+0%'      │  '2.37 MB'   │     '+0%'      │
│        Default ESBuild         │ '2m 44.5s' │   '+0%'   │ '2.16 MB' │  '+1.41%'   │ '150.82 kB'  │    '+1.35%'    │ '220.99 kB'  │    '+2.9%'     │ '13.61 MB' │  '+3.85%'   │  '1.81 MB'   │    '+6.14%'    │  '2.54 MB'   │    '+6.95%'    │
│          Default SWC           │ '3m 56.9s' │  '+44%'   │ '2.25 MB' │  '+5.52%'   │  '150.3 kB'  │     '+1%'      │ '218.29 kB'  │    '+1.64%'    │ '13.24 MB' │  '+1.06%'   │  '1.78 MB'   │    '+4.19%'    │  '2.44 MB'   │    '+2.95%'    │
└────────────────────────────────┴────────────┴───────────┴───────────┴─────────────┴──────────────┴────────────────┴──────────────┴────────────────┴────────────┴─────────────┴──────────────┴────────────────┴──────────────┴────────────────┘

New tools:

• https://github.com/NullVoxPopuli/ember-build-scenario-tester

Yet another new minifier:

• https://github.com/NullVoxPopuli/ember-cli-swc-minifier/

[patocallaghan]

@NullVoxPopuli what's the status on this prototype? are you using it anywhere?

[NullVoxPopuli]

yeah, I don't think it makes sense to replace terser with esbuild at this time as the tradeoffs aren't so easy to make, and will vary depending on your app's needs.
Like, my company's many many apps are all using this, but we're favoring speed over minification -- if you're favoring minification, terser is hard to beat -- only SWC would be an option, I think -- there are some perf benefits with SWC used for the same purpose, and that's demonstrated here: https://github.com/NullVoxPopuli/ember-cli-swc-minifier
But, it's slower than ESBuild for minification (because ESBuild does less) -- I think this is kinda shown by the benchmarking done earlier -- but I haven't re-ran any of that since both SWC and ESBuild have been so actively developed -- would be interested to re-run the benches.

I think it may make sense to provide a minifier as an option to folks -- and all of these libraries can be used today -- folks need only be informed of the tradeoffs they're making.

[patocallaghan]

Interesting, thanks for the response. I might give this a run over our app, curious to see how it holds up. We're trying to improve deploy times and the production build is a major bottleneck. Be interesting to see the difference in payload size between ESBuild and Terser for us.

[bertdeblock]

Closing for now if that's okay!