systemjs-assetgraph
Advanced tools
AssetGraph transform for optimizing SystemJS pages for production
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.
npm install assetgraph systemjs-assetgraph
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.
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'
}
}
}
}))
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.
MIT
FAQs
AssetGraph transform for optimizing SystemJS pages for production
The npm package systemjs-assetgraph receives a total of 0 weekly downloads. As such, systemjs-assetgraph popularity was classified as not popular.
We found that systemjs-assetgraph demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.