What are the best frontend JavaScript module bundlers?

Question

14

Options
Considered

186

User
Recs.

Jul 6, 2019

Last
Updated

Here’s the Deal

14 Options Considered

Best frontend JavaScript module bundlers	Price	Number of Plugins	Task instruction style
79 Webpack	-	-	-
-- Parcel	free	-	-
-- FuseBox	-	-	-
-- Browserify	-	-	-
-- rollup	-	-	-

See Full List

I Recommend...

Built By the Slant team

Find the best product instantly.

Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome

Try it now - it's free

score 56 · Answer 1

Webpack

Top Pro

Rich and flexible plugin infrastructure

Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building. See More

Top Con

Config file may be hard to understand

Due to a somewhat hard to grasp syntax, configuring Webpack may take some time. See More

Top Pro

Tap into npm's huge module ecosystem

Using Webpack opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly. See More

Top Con

Can not load files discovered during runtime

Top Pro

Can create a single bundle or multiple chunks loaded on demand, to reduce initial loading time

Webpack allows you to split your codebase into multiple chunks. Chunks are loaded on demand. This reduces the initial loading time. See More

Top Pro

ES6 module support

Webpack supports ES6 modules and their import and export methods without having to compile them to CommonJS require See More

Top Pro

Supports source maps for easier debugging

Source maps allow for easier debugging, because they allow you to find the problems within the origin files instead of the output file. See More

Top Pro

Share the same modules client-side and server-side

Because Webpack allows you to use the same require() function as node.js, you can easily share modules between the client-side and server-side. See More

Top Pro

Bundles CommonJs and AMD modules (even combined)

Webpack supports AMD and CommonJS module styles. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries. See More

Top Pro

Mix ES6 AMD and CommonJS

Webpack supports using all three module types, even in the same file. See More

Top Pro

Limit plugin integration issues

See All

Built by Slant

Find the best product
instantly.

Stop wasting time searching endlessly. Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome - It's Free Try now - it's free

score 14 · Answer 2

Parcel

Top Con

Running yarn under the hood fails on Windows from time to time

Top Pro

Auto-fetch dependencies

Run parcel watch on javascript file. It will auto download dependencies when you import modules. See More

Top Pro

Works nice with Vue.js

Just set "lang" parameter and parcel will install required dependencies like pug or node-sass. You don't even need to restart the process. See More

See All

score 22 · Answer 3

FuseBox

Top Pro

Without complex config

Javier Pérez Ruiz's Experience

Webpack is like grunt, huge config file Fusebox is like gulp, code what ever you want See More

Top Pro

Super easy to use

Top Pro

Built-in tasks system

Top Pro

Server, npm or browser target

Top Pro

Dynamics imports

Top Pro

Super fast

Top Pro

Hot module reload

Top Pro

Es6 export

Top Pro

Pluggable

Top Pro

Treeshake

See All

score 11 · Answer 4

Browserify

Top Pro

Provides browser-friendly shims of Node modules

Browserify provides browser-friendly shims of Node modules, that allow for things like Node event systems, path parsing, URL parsing. See More

Top Con

Requires NodeJS environment

Browserify does nothing client-side. It's only a server-side builder. If you want to load files from other domains, look at RequireJS. If you want to break your code up into multiple modules, look at RequireJS or Webpack. See More

Top Pro

Simple to use dependency management

To require a file, just use the require() function. var foo = require('./foo.js'); These files may have dependencies of their own. Browserify will build a dependency graph and bundle it into a single file that you just have to put in a script tag. <html> <body> <script src="bundle.js"></script> </body> </html> See More

Top Con

Not all javascript libraries have an npm version

While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not. It's possible to require local files instead, at the expense of not having npm managed version control. See More

Top Pro

Each module is wrapped in a closure

Top Con

No dynamic loading

With Browserify it is impossible to do something like this: var mod = require('path/'+name+'.js'); See More

Top Pro

Tap into npm's huge module ecosystem

Using browserify opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly. See More

Top Pro

Friendly plugin interface

Writing plugins is relatively easy and straight forward as each file, you can run a function that gives a file name and path, based on that you can decide if you want to do something like parse, transform, modify etc the file or skip it. See More

Top Pro

Share the same modules client-side and server-side

Because browserify allows you to use the same require() function as node.js, you can easily share modules between the client-side and server-side. See More

Top Pro

deAMDify & debowerify allow using modules written for other systems

Browserify includes transforms such as deAMDify, that allow you to use modules written in the AMD module format, and debowerify, that allows you to use modules intended to be managed by Bower package manager. See More

Top Pro

CJS module format

See All

score 11 · Answer 5

rollup

Top Pro

Implements tree-shaking

Can reduce resulting bundle size by performing "tree-shaking" (removing unused parts of code). See More

Top Con

Async/await support lack

Doesn't support async/await out of the box for the time being, and there is no available working plugin to fill the gap. See More

Top Pro

Easy configuration

Simple config files See More

Top Pro

Small and fast installation

It's only one file. See More

Top Pro

Ideal for shipping es2015/ES6 modules

See All

score 13 · Answer 6

JSPM

Top Pro

Module style agnostic

Loads ES6, AMD, CommonJS and globals. See More

Top Con

Poor bundler performance

Bundling performance is slow, though offset by the fact that bundling is not required during development, since it can load dependencies asynchronously. See More

Top Pro

Registry agnostic

JSPM is registry agnostic, it can pull packages from npm and github and is built in such a way it can support more. See More

Top Pro

Versioned package urls

It creates a packages folders which are versioned. This makes it future proof for a time where we stop bundling all the code. In the following presentation Guy Bedford calls bundling an anti-pattern. See More

Top Pro

Module loading

Could use a module loader or use the bundle without config anything. See More

Top Pro

Don't need to bundle again with every change

A bundle is very difficult to debug in mid-big projects (20k lines). JSPM allow you to develop without generate a bundle. See More

See All

score 5 · Answer 7

Brunch

Top Pro

Skeletons

Ready made application boilerplates that provide a good starting point for your application. See More

Top Con

Testing

Testing is a little cumbersome. See More

Specs

Number of Plugins:~100

Task instruction style:Code

Processing method:Pipeline

Top Pro

Plugins

A large selection of plugins are available. See More

Top Pro

Concatenates scripts and styles and auto-generates matching source maps

Brunch automatically produces a source map for all javascript files and CSS stylesheets whenever it minifies an app's resources. This little feature is extremely helpful when debugging is required at the client end. See More

Top Pro

Time to setup is extremely low

After installing Brunch the next step is to load a skeleton from git.io/skeletons. This step is as easy as installing another plugin from the npm registry, just point Brunch to the path of the required skeleton/generator then wait for it to work out its magic. Next, run brunch build then wait for a second or two and voila! The project is ready. See More

Top Pro

Compilation is super fast

According to speed benchmarks, Brunch is one of the fastest tools around for compiling files. According to the authors of Brunch the reason behind this speed is that it recompiles only the changes that were made to an app and performs extensive caching of the app's code. See More

Top Pro

Handle different js/css bundles

Allow to compile and bundle js/es20xx/sass etc. without pain See More

Top Pro

Small configs

See All

score 1 · Answer 8

Angular

Add Video or Image

score 3 · Answer 9

stealjs

Add Video or Image

score 7 · Answer 10

Lasso

Top Pro

Command line interface

Top Pro

Support for preprocessors and compilers

Top Pro

Fingerprinted resource URLs

Top Pro

Compression

Top Pro

Conditional dependencies

Top Pro

Lazy loading

Top Pro

Code splitting

Top Pro

Bundling

See All

score 6 · Answer 11

Require.js

Top Pro

Simple

Because of its easy to understand documentation, the RequireJS module loader is super simple to use; module definitions are as easy as defining just a key/value pair. See More

Top Con

Not the best solution for sharing client-side and server-side code

RequireJS is awesome for bundling and managing dependencies in an async manner. But the server-side needs neither of this killer features. Because of this it's not as good if your building a library that should work on both client and server (i.e. PouchDB). See More

Brian Genisio's Experience

This isn't really a bundler. It is more of a loader, but there are better ones out there. See More

Top Pro

Has a RequireJS optimizer

After building all the modules to be loaded, the built files can be optimized as well (minified and joint together), even though this is a completely optional step, but doing so could be a lot beneficial for your site's performance. See More

Top Con

Quietly fails with circular references

If you create a circular reference, the side loaded last will fail with a confusing error that makes it look like the reference doesn't exist. See More

Ɐha Hah's Experience

Combine with grunt/gulp for bundling via r.js Optimizer. Use HATEOAS over REST and hot swap namespace change potential of networked structure. See More

Top Pro

Hot loading of modules out-of-box

Lazy loading modules as a primary feature See More

Top Pro

Well documented

The RequireJS module loader is extremely well documented. So no matter whether you're a pro at JS based web development or just a newbie, you will find the documentation very helpful whenever you're stuck or just starting out. Everything is well-defined and logically placed in proper sections in a manner such that it is very easy to understand. See More

Top Pro

Well tested

Since the RequireJS is quite popular among the dev community, that automatically means that problems get sorted out very quickly and most of the core code has already been tested. See More

Top Pro

No necessary build step

Not only do you not need a server, it works in browser without a build step. See More

Top Pro

AMD & CJS support

While RequireJS is mainly an AMD implementation, it can, with rare exceptions, implement CJS as well. See More

Top Pro

Supports nested dependencies

If your project has nested dependencies, you won't have to worry about resolving them at all. Because RequireJS will do that for you. See More

Top Pro

You don't need a server to get started

One of the best advantages of RequireJS over Browserify is that you don't need a nodejs environment to get started. Just "require" your dependencies and it takes care of loading them. By contrast, Browserify requires a running NodeJS implementation so you can build your one monolithic file, then you can push the file to your static web server. See More

Top Pro

Works with basically every desktop browser, even IE6

RequireJS supports IE6+, FF2+, Safari3.2+, Chrome3+ & Opera 10+. See More

See All

score 3 · Answer 12

Systemjs-Builder

Top Pro

Special support for systemjs-loader

Top Con

Can be very slow

SupportiveAntaeus's Experience

Slow See More

Top Pro

Modern bundling for packages and bundle export

See All

score 1 · Answer 13

module-concat

Top Pro

Supports Client-side Browser Projects

Provides some support for concatenating client-side browser JavaScript modules. Also, can process the browser property in package.json. See More

Top Con

Not a full-featured bundler

This doesn't handle CSS or HTML stuff. It only bundles JavaScript files. See More

Top Pro

Supports languages that compile to JS

For example, CoffeeScript is supported using the compilers option. See More

Top Pro

Lightweight

This library just concatenates CommonJS modules together into a single *.js file. Nothing else. It only uses 1 dependency: resolve See More

See All

Answer 14

Bit Bundler

Add Video or Image

14 Options Considered

My Recommendation for Webpack

My Recommendation for Webpack

Rich and flexible plugin infrastructure

Config file may be hard to understand

Tap into npm's huge module ecosystem

Can not load files discovered during runtime

Can create a single bundle or multiple chunks loaded on demand, to reduce initial loading time

ES6 module support

Supports source maps for easier debugging

Share the same modules client-side and server-side

Bundles CommonJs and AMD modules (even combined)

Mix ES6 AMD and CommonJS

Limit plugin integration issues

My Recommendation for Parcel

My Recommendation for Parcel

Running yarn under the hood fails on Windows from time to time

Auto-fetch dependencies

Works nice with Vue.js

My Recommendation for FuseBox

My Recommendation for FuseBox

Without complex config

Super easy to use

Built-in tasks system

Server, npm or browser target

Dynamics imports

Super fast

Hot module reload

Es6 export

Pluggable

Treeshake

My Recommendation for Browserify

My Recommendation for Browserify

Provides browser-friendly shims of Node modules

Requires NodeJS environment

Simple to use dependency management

Not all javascript libraries have an npm version

Each module is wrapped in a closure

No dynamic loading

Tap into npm's huge module ecosystem

Friendly plugin interface

Share the same modules client-side and server-side

deAMDify & debowerify allow using modules written for other systems

CJS module format

My Recommendation for rollup

My Recommendation for rollup

Implements tree-shaking

Async/await support lack

Easy configuration

Small and fast installation

Ideal for shipping es2015/ES6 modules

My Recommendation for JSPM

My Recommendation for JSPM

Module style agnostic

Poor bundler performance

Registry agnostic

Versioned package urls

Module loading

Don't need to bundle again with every change

My Recommendation for Brunch

My Recommendation for Brunch

Skeletons

Testing

Plugins

Concatenates scripts and styles and auto-generates matching source maps

Time to setup is extremely low

Compilation is super fast

Handle different js/css bundles

Small configs

My Recommendation for Angular

My Recommendation for Angular

My Recommendation for stealjs

My Recommendation for stealjs

My Recommendation for Lasso

My Recommendation for Lasso

Command line interface

Support for preprocessors and compilers

Fingerprinted resource URLs

Compression

Conditional dependencies