Skip to content
This repository has been archived by the owner on Aug 7, 2018. It is now read-only.

swimlane/systemjs-route-bundler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SystemJS Route Bundle Builder

A build tool for SystemJS Builder that will identify your routes and build separate JS files for each.

Concept

Bundling isn't a new concept but with a large applications you have quite a bit of overlap of components between your routes. Typically those bundles would just be looped up into the main momdule. Our bundler is unique in the fact that it identifies potential optimizations and creates micro-bundles. So lets take a look at:

example

We can see that the Modal component is used by Login and Profile but not by Admin. We can also see that Select is used by all the modules. The most optimal way to download this module graph would be to only download Modal when Login or Profile is requested. But you don't want to include it in the main download nor do you want to include it twice in each module. Our bundler identifies the overlap and creates a new module that is shared between those. So the above example results in something like:

result

This bundler can work with ANY platform, all you need is a route definition and to use SystemJS. At Swimlane we use Angular 1.x in our production application, so we wanted to make it work nicely with Angular. So we created a demo AngularJS + SystemJS seed project that demonstrates this!

In short, the bundler can cut your initial load time to tenths of what it is now without having to manage your bundle definitions!

Configuration

Option Description
baseURL Base URL of the project
dest Destination folder for the output
main The main file of your application
destMain The destination folder of your main file
routes An array of the file names of the main routes of your project. Each of the routes will have its own bundle
bundleThreshold The ratio of routes including a module over which the module will be bundled in the main bundle. Value must been between 0 and 1. 0.6 means that if 60% of the routes contain a single module, that module will be bundled in the main bundle
jspmConfigPath Path to the systemjs config file
jspmBrowserPath Path to the systemjs browser config file
sourceMaps Build sourceMaps for the bundles
minify Minify the javascript
mangle Mangle javascript variables
verboseOutput Output debug information while tracing and bundling
ignoredPaths Paths that will not be bundled. Put all paths that contain external libraries here

Check the AngularJS + SystemJS seed project for an example configuration.

Credits

systemjs-route-bundler is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.