teaching
esbuild
teaching | esbuild | |
---|---|---|
1 | 338 | |
3 | 38,134 | |
- | - | |
2.9 | 9.2 | |
11 days ago | 18 days ago | |
Dockerfile | Go | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
teaching
-
Start a new typescript project with gts and esbuild
To minize the effort gts is a nice tool to help you setting up the project. Our of deployment/devliver purposes we also want to bundle the code to create nice and small artifacts. For those purposes we use esbuild. The whole example can be found here
esbuild
-
Make your Vite applications run a little faster
Using a more raw toolchain is also a good way to speed things up; the SWC website shows it to be 20 to 70 times faster than Babel, and there are tons of speed advantages in complex real-world applications, which proves that rawness can be a big help in speeding things up. Instead of vite-plugin-react, you can use @vitejs/plugin-react-swc, with LightningCSS instead of PostCSS, SWC or esbuild instead of Babel, etc. etc. to achieve better performance.
-
Webpack Performance Tuning: Minimizing Build Times for Large Projects
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:
-
Optimising package size for Typescript AWS Lambda functions using serverless-esbuild
Added a plugin to exclude vendor sourcemaps from the scripts (big reduction) exclude node_modules from source map Issue #1685 ยท evanw/esbuild ยท GitHub
-
Building NPM packages for CommonJS with ESM dependencies
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.
-
Oh CommonJS! Why are you mESMing with me?! Reasons to ditch CommonJS
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.
-
Mako โ fast, production-grade web bundler based on Rust
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/
-
Farm: Fast vite compatible build tool written in Rust
Indeed!
They probably took the idea from https://esbuild.github.io
-
5 years in, JavaScript Modules are still painful
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
-
Why and How to Migrate Your React App from CRA to Vite
Vite is not a bundler but a frontend tool that intelligently uses ESBuild and Rollup for their best use cases.
-
๐ง 50 Articles to Level Up
esbuild 0.21 is out! (https://github.com/evanw/esbuild/releases/tag/v0.21.0) by Evan Wallace Decorators for the win.
What are some alternatives?
gts - โ๏ธ TypeScript style guide, formatter, and linter.
swc - Rust-based platform for the Web
selfie - An educational software system of a tiny self-compiling C compiler, a tiny self-executing RISC-V emulator, and a tiny self-hosting RISC-V hypervisor.
vite - Next generation frontend tooling. It's fast!
xturtle
Rollup - Next-generation ES module bundler
ESLint - Find and fix problems in your JavaScript code.
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
oppia - A free, online learning platform to make quality education accessible for all.
parcel - The zero configuration build tool for the web. ๐ฆ๐
terser - ๐ JavaScript parser, mangler and compressor toolkit for ES6+
tsup - The simplest and fastest way to bundle your TypeScript libraries.