systemjs-assetgraph
v0.2.1
Published
AssetGraph transform for optimizing SystemJS pages for production
Downloads
7
Readme
SystemJS AssetGraph
An AssetGraph transform plugin to automatically detect and optimize the use of SystemJS in HTML files.
It works out the main entry point and configuration file for the HTML asset, and then generates the SystemJS bundle, or injects the depcache if using HTTP/2 for optimization.
Installation
npm install assetgraph systemjs-assetgraphUsage
Consider a simple SystemJS application:
app/main.html
<html>
<script src="system.js"></script>
<script src="config.js"></script>
<script>System.import('main')</script>We can build this with:
build.js
var AssetGraph = require('assetgraph');
var systemJsAssetGraph = require('systemjs-assetgraph');
var outRoot = 'app-built';
new AssetGraph({root: 'app'})
.loadAssets(['*.html', '*.js'])
.queue(systemJsAssetGraph({
outRoot: 'app-built',
bundle: true,
builderConfig: {
sourceMaps: true,
lowResSourceMaps: true,
minify: true,
mangle: true,
config: {
map: {
app: 'app-compiled',
},
}
}
}))
.writeAssetsToDisc({url: /^file:/}, 'app-built')
.run(function (err) {
if (err) throw err;
console.log('Done');
});The SystemJS transform will automatically detect the System.config(...) and know to bundle main.
It will then update the config to reference the bundled file, with full source maps support.
Config Overrides
It can be useful to specify configuration overrides that are specifically for the production / build config.
This can be added with the builderConfig.config option:
.queue(systemJsAssetGraph({
outRoot: 'app-built',
bundle: true,
builderConfig: {
config: {
map: {
'some/module': 'production/module'
}
}
}
}))HTTP/2 Optimization
In HTTP/2, rather than generating a single bundle file, we can inject the dependency tree into the page, so that all modules are loaded in parallel.
This mode is enabled by setting bundle: false in the options.
In addition, each of the separate module files will be moved to a hashed file name and the hashes injected into the configuration so that when making application updates, only those modules that have changed need to be reloaded in the browser cache.
License
MIT