Code splitting with factor-bundle.

[jmcarp]

We currently bundle all JS (vendor libraries, internal modules, and initialization code) into a single bundle. There are a few problems with this:

• Users have to download all of our JS (including D3, DataTables, etc.) just to render the homepage.
• We can't write scripts that are specific to a single page, so every script has to handle every page for which it might be relevant. The data tables logic is a good example: tables.js includes a large and growing switch statement keyed on attributes of the table DOM node to figure out what kind of table to draw. The code would be simpler to read and write with per-page initialization files.

This is a proof of concept using factor-bundle to write small per-page initialization files for a few pages. Check out committees.js and candidates.js, which initialize data tables for the committees and candidates pages respectively. Each file only has to initialize data tables for a single page, and we can move all the page-specific logic out of tables.js, which becomes a simpler module of reusable functions.

This isn't complete and not ready for merge, but I can get it into shape if we want to use it. Thoughts @noahmanger @msecret?

[msecret]

@jmcarp this is looking great so far. So this will be done for every page the has lots of different requirements, or all pages?

[jmcarp]

I was thinking we'd only add page-specific JS files for pages that need significant customization. So there probably wouldn't be JS files for the homepage or other pages without data tables or charts.

[msecret]

Yea I'd agree with that approach

[jmcarp]

This is now up to date with develop and seems to be working fine. I tried to structure the changes to avoid merge conflicts with other ongoing features, and I'm happy to resolve any conflicts that come up. Pinging @msecret and @noahmanger for review.

[msecret]

@jmcarp this looks good. Just so I'm clear, common.js is all the code not part of pages? When merge conflicts are fixed, I'm ready to merge.

[jmcarp]

@msecret: merge conflicts are fixed.

Running the updated build-js task creates n+2 script files: one for each page in static/js/pages, one for init.js, and a bundle of common requirements called common.js. The factor-bundle plugin collects all requirements that are used in more than one of the entry points and puts them into common.js, although that threshold is configurable.