proposal-top-level-await VS esbuild

For more info about this feature, you can refer to the official proposal repo.

This one is Stage 4 (complete)

But browsers don't support top-level await yet. So we need to put it all inside as async function.

Note that ESM is not “backwards” compatible with CJS: a CJS module cannot require() an ES Module; it is possible to use a dynamic import (await import()), but this is likely not what consumers expect (and, unlike ESM, CJS does not support Top-Level Await).

top-level await feature for ES modules

That said, ES2022 does introduce a top-level await that works in the top level scope, but only in modules, not global scope. So if in a module this could work:

With the latest node version(s) (v14.8+), we should be able to rewrite the above code to something like this. proposal-top-level-await

Now a days, you'll likely mostly use async/await. The few cases where you'll need the Promise API (then()'s etc.) is when you're outside of an async function. With the new top-level await feature coming to modules, you wouldn't even need it outside of async functions in module code which will make its usage even less common.

The await is in top level. The top level await proposal is in stage 3. Currently, the browser support is also not good enough but should work in latest version of the google chrome browser.

There is a proposal for top-level await in JS. I'm guessing this would effectively kinda do the same thing? Or am I wrong there?

Babel with 49,577,061 npm downloads per week, is the most used tool for JavaScript transformation, we looked at Esbuild as a replacement but many functionalities, most notably loadable support, are missing. Another alternative SWC, written in Rust, supports all the necessary functionalities we need, and on top of that it has APIs similar to Babel, making migration much smoother than other alternatives:

Added a plugin to exclude vendor sourcemaps from the scripts (big reduction) exclude node_modules from source map Issue #1685 · evanw/esbuild · GitHub

You have to use a bundler such as esbuild which will compile your project and bundle all of it's dependencies along with it so they aren't imported. This bypasses the ESM/CommonJS incompatibility issue.

However, when you want to productionize your JS library, you need to bundle it. Otherwise, you will ship all the node_modules. Is used esbuild because it is able to bundle to CJS and ESM. Now, let's run the same benchmark with the bundled version.

Are you familiar with Java?

If so, a web bundler is like a build tool which creates a single fat jar from all your source code and dependencies, so all you have to "deploy" is a single file... except the fat jar is just a (usually minified) js file (and sometimes other resources like a css output file that is the "bundled" version of multiple input CSS files, and other formats that "compile" to CSS, like SCSS [1] which used to be common because CSS lacked lots of features, like variables for example, but today is not as much needed).

Without a bundler, when you write your application in multiple JS files that use npm dependencies (99.9% of web developers), how do you get the HTML to include links to everything? It's a bit tricky to do by hand, so you get a bundler to take one or more "entry points" and then anything that it refers to gets "bundled" together in a single output file that gets minified and "tree-shaken" (dead code elimination, i.e if you don't use some functions of a lib you imported, those functions are removed from the output).

Bundlers also process the JS code to replace stuff like CommonJS module imports/exports with ESM (the now standard module system that browsers support) and may even translate usages of newer features to code that uses old, less convenient APIs (so that your code runs in older browsers).

I've been learning a lot about this because I am writing a project that is built on top of esbuild[2], a web bundler written in Go (I believe Vite uses it, and Vite is included in the benchmarks in this post). It's extremely fast, so fast I don't know why bother writing something in Rust to go even faster, I get all my code compiled in a few milliseconds with esbuild!

Hope that helps.

[1] https://sass-lang.com/documentation/syntax/

[2] https://esbuild.github.io/

Indeed!

They probably took the idea from https://esbuild.github.io

Go has the benefit of not having to reach a distributed consensus amongst a handful of individual browser vendors. Try compiling a large Go project with tinygo to get a glimpse of that experience [1]. If the browser vendors had been able to ship ES4 or ES5 with module support between 1999 and 2009, Node probably would have implemented it and there would be no dichotomy between CJS and ESM.

[1] https://github.com/evanw/esbuild/issues/1111

Vite is not a bundler but a frontend tool that intelligently uses ESBuild and Rollup for their best use cases.

esbuild 0.21 is out! (https://github.com/evanw/esbuild/releases/tag/v0.21.0) by Evan Wallace Decorators for the win.

Vite is currently the best build tool for bundling Front-end applications. It's so fast because it uses esbuild under the hood. Vite hot reload is the fastest among other development tools I have used.