UNPKG

3.26 kBMarkdownView Raw
1There are three main workflows for production:
2
31. [Compile into a bundle](#creating-a-bundle)
42. [Create a self-executing bundle](#creating-a-self-executing-bundle)
53. [Cache the dependency tree for flat multiplexing via SPDY / HTTP2](#creating-a-dependency-cache)
6
7### Creating a Bundle
8
9```
10 jspm bundle app/main build.js
11```
12
13Creates a file `build.js` containing `app/main` and all its imported dependencies.
14
15We can then load this with a script tag in the page:
16
17```html
18<!doctype html>
19 <script src="jspm_packages/system.js"></script>
20 <script src="config.js"></script>
21 <script src="build.js"></script>
22 <script>
23 System.import('app/main.js');
24 </script>
25```
26
27Note that bundles also support compiling ES6 code.
28
29#### Creating a bundle with arithmetic
30
31```
32 jspm bundle app/main - react + moment build.js
33```
34
35Creates a file `build.js` containing `app/main` and `moment` and all their dependencies, excluding `react` and all its dependencies.
36
37#### Loading a bundle automatically (inject)
38
39If you don't want to include the bundle with a script tag, but rather load it only when it is needed, we can do:
40
41```
42 jspm bundle app/main main-bundle.js --inject
43```
44
45The above will create the bundle, then inject configuration into config.js to tell the SystemJS loader what modules should be loaded from the `main-bundle.js` file.
46
47bundles section in modified config.js
48```javascript
49...
50 "bundles": {
51 "main-bundle": [
52 "app/my-class.js",
53 "app/main.js"
54 ]
55 }
56...
57```
58As soon as one of these modules is requested, the request is intercepted and the bundle is loaded dynamically first, before continuing with the module load.
59
60You can also use arithmetic bundle:
61
62```
63 jspm bundle app/main.js - app/core.js main-bundle.js --inject
64```
65
66This command will make a `main-bundle.js` file from `app/main.js` excluding `app/core.js`.
67
68If wanting to move back to separate file mode, you can remove the bundle configuration manually from the `config.js` file, or use:
69
70```
71 jspm unbundle
72```
73
74Which will automatically clear out any injected bundle configuration.
75
76### Creating a self-executing bundle
77
78To create an output distributable script file that can be included entirely on its own independent of SystemJS and jspm, we can use `build`.
79
80```
81 jspm build app/main.js app.js
82```
83
84`app.js` contains a micro-loader implementation (1.4KB gzipped), converts all module formats into ES5 (including compiling ES6), and
85maintaining bindings and circular references as with normal bundles.
86
87### Creating a Dependency Cache
88
89The jspm CDN uses SPDY, optimal cache headers, and minified files, making this workflow suitable for production use.
90
91The remaining performance issue is the round trip latency required to load deep dependencies, as we only find out
92the dependencies of a module once we have fetched that module, before fetching its dependencies in turn.
93
94We can get around this by injecting the full dependency tree upfront into a dependency cache, so that all dependencies
95can be fetched in parallel.
96
97```
98 jspm depcache app/main.js
99```
100
101The above will trace the full tree for `app/main` and inject it into the `config.js` **depCache**.
102
103Now any imports will load the full tree in parallel, reducing the latency delay to one round trip.