Introducing splittable

Malte Ubl
2 min readNov 17, 2016

--

Splittable is a next-generation module bundler for JavaScript with support for

  • super simple code splitting.
  • Currently exactly one configuration option.
  • ES6 modules.
  • CommonJS modules (with some caveats).
  • extremely efficient packing of modules.
  • dead code elimination (also sometimes called tree shaking).
  • smaller code for real world projects than all other known module bundlers.
  • JSX (and React)

Why this exists

There has been a lot of chatter in the JS community lately about code splitting being essential for shipping performant web apps on mobile.

The 1–0–1 on code splitting is: Every application will eventually be too large, for loading the entire app at once being feasible, but only a small part is needed for it to start up. Code splitting allows turning an application into multiple bundles that are loaded when needed (or when the app has nothing better to do).

Yet, no solution for code splitting was really satisfying:

  • Webpack has a reputation of being relatively hard to use and it generates pretty verbose code.
  • Closure Compiler equally has a reputation of being hard to configure. I’m personally not aware of anyone outside of Google using its code splitting feature (although there are certainly projects that do!) since it is essentially undocumented.
  • Rollup generates awesome code and is easy to use, but doesn’t support code splitting, and has no direct support for CommonJS modules.

And so I decided to make a solution that is hopefully both easy to use and that generates close-to-ideal code.

Splittable uses Babel and Browserify for dependency resolution and then uses Closure Compiler’s little known code splitting feature to generate super tightly packed code. In particular:

  • all module code is compiled away leading to zero per-module overhead (similar to Rollup).
  • all code is subject to dead code elimination (tree shaking) including private functions, classes, methods, and other declarations.
  • module code is split apart across bundles (so that functions that are not called in a bundle get moved to the bundle where they are called, or removed).

Usage

Running splittable on the command line
Loading splittable bundles in HTML files .

It is very early days for splittable. Give it a try! Feedback and pull requests welcome!

--

--