esbuild – An extremely fast JavaScript bundler and minifier

Interesting work by Evan Wallace, a JS bundler/minifier written in Go. Since it compiles down to native code, it’s fast:

My main benchmark approximates a large codebase by duplicating the three.js library 10 times and building a single bundle from scratch, without any caches. For this benchmark, esbuild is 10-100x faster than the other JavaScript bundlers I tested (Webpack, Rollup, Parcel, and FuseBox).

It supports quite a lot of stuff, but is not considered to cover it all:

This is a hobby project that I wrote over the 2019-2020 winter break. I believe that it’s relatively complete and functional. However, it’s brand new code and probably has a lot of bugs. It also hasn’t yet been used in production by anyone. Use at your own risk.

Example usage:

# Produces dist/entry_point.js and dist/entry_point.js.map
esbuild --bundle entry_point.js --outdir=dist --minify --sourcemap

Also works with React, with some extra CLI arguments:

esbuild example.jsx --bundle '--define:process.env.NODE_ENV="production"' --minify --outfile=out.js

esbuild

pika/web – A Future Without Webpack

Interesting take on bundlers:

Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that has always taken pride in its view-source, easy-to-get-started ethos.

@pika/web is an attempt to free web development from the bundler requirement. In 2019, you should use a bundler because you want to, not because you need to.

Here’s how Pika does it:

@pika/web installs modern npm dependencies in a way that lets them run natively in the browser, even if they have dependencies themselves. No Browserify, Webpack or import maps required.

npm install && npx @pika/web
βœ” @pika/web installed web-native dependencies. [0.41s]

Pika does this by transforming all required packages into ES Modules, which are then stored in a web_modules folder. Import your packages from said location and you’re good to go:

import {slugy} from './web_modules/slugy.js';

const textToSlug = 'Hello World, @pika/web!';
document.getElementById('slugy-text').innerHTML = `slugy("${textToSlug}") <br/>➡️ ${slugy(textToSlug)}`;

If your browser supports ES Modules, you can run the code snippet above directly in your browsers – no adjustments required πŸ™‚

Pika – A Future Without Webpack →
About Pika →

Parcel: A blazing fast, zero configuration web application bundler

Earlier this week Parcel got dropped and it received quite some attention, because it tackles two important things when compared to other bundlers such as Webpack:

The first reason I was motivated to build a new bundler was performance. I’ve worked on some pretty large apps with thousands of modules, and was always disappointed with the speed of existing bundlers. Large apps can take minutes to build, which is especially frustrating during development.

The second reason I built Parcel was to help with the pain of managing configuration. Most other bundlers are built around config files with lots of plugins, and it is not uncommon to see applications with upwards of 500 lines of configuration just to get things working. […] Parcel is designed to need zero configuration: just point it at the entry point of your application, and it does the right thing. Parcel has out of the box support for JS, CSS, HTML, images, file assets, and moreβ€Šβ€”β€Šno plugins needed.

πŸš€ Announcing Parcel: A blazing fast, zero configuration bundler →
Parcel →