diff options
author | Florian Dold <florian.dold@gmail.com> | 2016-10-10 03:50:11 +0200 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2016-10-10 03:50:11 +0200 |
commit | de4628b3a7e7618681a76c01d00c1632a96688cf (patch) | |
tree | 49d4d97cf1c591b8567c83aa2469522f7fa57d27 /thirdparty/systemjs/docs/production-workflows.md | |
parent | 7989859ed6520d4e8d18f48545e5998bf66e253c (diff) | |
parent | 9af485a584e47fd503ed5c62b9f6482574715f1e (diff) | |
download | wallet-core-de4628b3a7e7618681a76c01d00c1632a96688cf.tar.xz |
Merge commit '9af485a584e47fd503ed5c62b9f6482574715f1e' as 'thirdparty/systemjs'
Diffstat (limited to 'thirdparty/systemjs/docs/production-workflows.md')
-rw-r--r-- | thirdparty/systemjs/docs/production-workflows.md | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/thirdparty/systemjs/docs/production-workflows.md b/thirdparty/systemjs/docs/production-workflows.md new file mode 100644 index 000000000..6af698915 --- /dev/null +++ b/thirdparty/systemjs/docs/production-workflows.md @@ -0,0 +1,83 @@ +### Compiling Modules into a Bundle + +[SystemJS builder](https://github.com/systemjs/builder) provides comprehensive support for compiling all +module formats into a single bundle in a way that supports +[circular references and zebra-striping](https://github.com/ModuleLoader/es6-module-loader/blob/v0.17.0/docs/circular-references-bindings.md). + +It also offers the ability to [create self-executing bundles](https://github.com/systemjs/builder#self-executing-sfx-bundles) +that can run without needing SystemJS present at all by embedding a micro-loader implementation. + +### DepCache + +An alternative to bundling into a single bundle is to leave files as separate for loading in production. + +The depcache extension allows specifying the dependencies of all modules upfront through configuration so that loads can +happen in parallel. + +```javascript +System.config({ + depCache: { + 'moduleA': ['moduleB'], // moduleA depends on moduleB + 'moduleB': ['moduleC'] // moduleB depends on moduleC + } +}); + +// when we do this import, depCache knows we also need moduleB and moduleC, +// it then directly requests those modules as well as soon as we request moduleA +System.import('moduleA') +``` + +Over HTTP/2 this approach may be preferable as it allows files to be individually cached in the browser meaning bundle +optimizations are no longer a concern. + +### Bundle Extension + +It can be useful to load bundles of code on-demand instead of having them all included in the HTML page blocking the +initial load. + +The bundle extension will automatically download a bundle as soon as an attempt to import any module in that bundle is made. + +```javascript + // the bundle at build/core.js contains these modules + System.config({ + bundles: { + 'build/core': ['jquery', 'app/app', 'app/dep', 'lib/third-party'] + } + }); + + // when we load 'app/app' the bundle extension interrupts the loading process + // and ensures that build/core.js is loaded first + System.import('app/app'); + + // this way a request to any one of 'jquery', 'app/app', 'app/dep', 'lib/third-party' + // will delegate to the bundle and only a single request is made +``` + +A built file must contain the exact named defines or named `System.register` statements for the modules +it contains. Mismatched names will result in separate requests still being made. + +### CSP-Compatible Production + +SystemJS comes with a separate build for production only. This is fully [CSP](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)-compatible using script tag injection to load scripts, +while still remaining an extension of the ES6 Module Loader. + +Replace the `system.js` file with `dist/system-csp-production.js`. + +If we have compiled all our modules into a bundle we can then write: + +```html + <script src="system-csp-production.js"></script> + <script> + System.config({ + bundles: { + 'bundle': ['app/main'] + } + }); + System.import('app/main').then(function(m) { + // loads app/main from the app-built bundle + }); + </script> +``` + +> Note the main build of SystemJS will also use script tag injection for AMD, register and global modules when it can for maximum CSP compatibility. + It is typically just plugin loaders, CommonJS and custom global metadata options that cause XHR source-loading to be needed. |