Rollup now has code-splitting! And we need your help

Rich Harris
Rollup
Published in
3 min readFeb 8, 2018

--

Gather round for some news that’s really going to shake your tree: as of version 0.55, <blink>Rollup, the JavaScript module bundler, finally has code-splitting</blink>! This has been the most popular feature request for a long time, since it lets complex apps load quickly in smaller increments while still leveraging Rollup’s obsessive focus on efficiency. Rollup has long been the tool of choice for library authors — it powers React, Vue, D3, Moment, Three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier, and thousands of other tools — but code-splitting means Rollup can now become a great choice for applications of all sizes.

We’ve also joined the crowdfunding platform OpenCollective to ensure a sustainable future for Rollup.

What is code-splitting, and why should I care?

Loading application code can take a long time, especially on mobile. Code-splitting breaks your app into smaller chunks, so that the user only has to load enough JavaScript to get started, and the application can quietly fetch the rest whenever it becomes relevant. For example, you probably don’t need to serve the code for your “settings” page until the user actually goes there.

Rollup’s implementation of code-splitting, by JSPM creator Guy Bedford, approaches the conceptual ideal for JavaScript. For the first time, your code-split chunks are themselves just standard ES modules that use the browser’s built-in module loader without any additional overhead, while still getting the full benefit of Rollup’s treeshaking. For browsers that don’t yet support ES modules, you can also use SystemJS or any AMD loader. It is completely automated and results in zero code duplication.

A sample configuration that supports both modern and legacy browsers

Check out the docs here or try a sample project.

Now we need your help

Up until now, Rollup has been developed by over one hundred volunteers who have collectively donated thousands of hours of coding and other forms of expertise, but it’s increasingly apparent that Rollup needs a more sustainable footing.

import $ from ‘opencollective’;

That’s why we’ve joined OpenCollective, the crowdfunding platform for open source projects. Your support will mean that we can continue to improve and iterate on cutting-edge features while ensuring this work is sustainable for our core team members — in particular Guy, who has also implemented dynamic import() support (the fudge sauce to the code-splitting sundae) and Lukas Taegert, who has overhauled Rollup’s treeshaking and laid the foundations for future optimisations.

We’re hugely grateful for the early backing we’ve received from Mixmax, Kent C. Dodds, Matt Pilott and Jeff Wainwright. Because we’re using OpenCollective, our accounting is fully transparent — you’ll be able to keep track of our funding status and how the money is being used.

How to support Rollup

You can donate here. If Rollup (or a library that’s built with it) is an important part of your project, please consider donating or sharing this with your employer.

If you represent a company and you would like to donate more than the current top ‘sponsor’ tier ($100 per month) then please reach out to us on Twitter! Our DMs are open.

Co-authored by Vijith Assar, Guy Bedford and Lukas Taegert

--

--

Rich Harris
Rollup

Graphics editor, @nytimes investigations team. Open sourceror