|Parcel||40k||Blazing fast, zero configuration web app bundler.|
|Vite||32k||Next generation frontend tooling. It’s fast!|
|Snowpack||19k||Fast unbundled development with optimized performance in production builds.|
|Browserify||14k||Browser-side require() the NodeJS way.|
They’re not general-purpose task runners or built tools but can be used like those with very limited supported behavior (like webpack focusing on automating frontend tasks and generate a website). They often have but not limited following features:
They’re often released as a CLI tool which you can use to run development server, watch changing files, build production, and serve static. They might be also support npm packages which you can integrate into other workflows.
They have been well developed with flexible architecture including highly customizable configurations, extensive plugins and loaders ecosystem.
While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
Webpack now by default supports import and export of any local WebAssembly module. This means that you can also write loaders that allow you to import Rust, C++, C and other WebAssembly host lang files directly.
Those above features has made webpack the number one choice to bundle modern web applications nowadays with little to zero configuration, has transformed from advanced complicated tool to something more user friendly.
Rollup is another module bundler that can output both library and application, has default support to ES Modules and famous for tree shaking from early days.
Rollup also has plugin system to customize its behavior like transpiling code before bundling or finding third-party modules in our node_modules folder.
Beside plugins, we can use hooks to affect how a build is run, provide information about a build or modify a build once complete
Rollup takes tree-shaking very seriously as selling point, by supporting ES-Modules by default it has access to static analysis that helps dead code elimination possible, very aggressive on removing unused code and generating small bundles.
Parcel focuses solely on bundling web application with zero-configuration. It has out of the box support for JS, CSS, HTML, file assets with no plugins needed.
Parcel creates the asset tree by parsing all supported file types, extracting their dependencies and transforming to their final compiled form.
Parcel creates the bundle tree, if an asset is required in more than one bundle, it is hoisted up to the nearest common ancestor in the bundle tree so it is not included more than once.
After the bundle tree is constructed, each bundle is written to a file by a packager specific to the file type. The packagers know how to combine the code from each asset together into the final file that is loaded by a browser.
Browserify is a tool for bundling Node packages for the browser, happens to work for browser-based apps pretending to be Node packages.
The module system that browserify uses is the same as node, so packages published to npm that were originally intended for use in node but not browsers will work just fine in the browser too.
Browserify lets you use
require in the browser, the same way you’d use it in Node. It’s not just syntactic sugar for loading scripts on the client. It’s a tool that brings all the resources NPM ecosystem off of the server, and into the client.
Browserify starts at the entry point files that you give it and searches for any
require() calls it finds using static analysis of the source code’s abstract syntax tree. For every
require() call with a string in it, browserify resolves those module strings to file paths and then searches those file paths for
require() calls recursively until the entire dependency graph is visited.
Metro resolves all modules that are required from the entry point to build a graph, then transforms all modules to formats understandable by target platforms, and finally serializes into one or multiple bundles.
Metro was originally part of
react-native project, then moved out separately for better development, aims for fast startup, quick bundling speeds, works with thousands of modules in a single application, and support React Native out of the box.
Snowpack serves your application unbundled during development. Each file needs to be built only once and then is cached forever. When a file changes, Snowpack rebuilds that single file. There’s no time wasted re-bundling every change, just instant updates in the browser.
Snowpack’s unbundled development still supports the same bundled builds that you’re used to for production. When you go to build your application for production, you can plug in your favorite bundler via an official Snowpack plugin for Webpack or Rollup. With Snowpack already handling your build, there’s no complex bundler config required.
Vite (French word for “fast”, pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
Most projects of any scale will have their code split between a number of files, manually including each file with an individual
<script> tag is hard and error-prone, you should use module bundlers to automatically bundle everything.
There are many bundlers out there, Rollup is good to bundle packages, Browserify is a wonderful tool for bundling node modules for the browser, Webpack is the preferred tool to bundle anything into web applications, and other less popular ones for limited use cases.
They can work out of the box with many built-in features and support an extensive ecosystem of plugins, loaders, transformers.
They can be used as standalone tools or integrated into a more complicated workflow orchestrated by task runners or build tools.
The primary advantage of a bundler is that it leaves you with far fewer files that the browser has to download. This can give your application a performance advantage, as it may decrease the amount of time it takes to load.