1 | There are three main workflows for production:
|
2 |
|
3 | 1. [Compile into a bundle](#creating-a-bundle)
|
4 | 2. [Create a self-executing bundle](#creating-a-self-executing-bundle)
|
5 | 3. [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 |
|
13 | Creates a file `build.js` containing `app/main` and all its imported dependencies.
|
14 |
|
15 | We 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 |
|
27 | Note 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 |
|
35 | Creates 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 |
|
39 | If 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 |
|
45 | The 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 |
|
47 | bundles 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 | ```
|
58 | As 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 |
|
60 | You can also use arithmetic bundle:
|
61 |
|
62 | ```
|
63 | jspm bundle app/main.js - app/core.js main-bundle.js --inject
|
64 | ```
|
65 |
|
66 | This command will make a `main-bundle.js` file from `app/main.js` excluding `app/core.js`.
|
67 |
|
68 | If 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 |
|
74 | Which will automatically clear out any injected bundle configuration.
|
75 |
|
76 | ### Creating a self-executing bundle
|
77 |
|
78 | To 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
|
85 | maintaining bindings and circular references as with normal bundles.
|
86 |
|
87 | ### Creating a Dependency Cache
|
88 |
|
89 | The jspm CDN uses SPDY, optimal cache headers, and minified files, making this workflow suitable for production use.
|
90 |
|
91 | The remaining performance issue is the round trip latency required to load deep dependencies, as we only find out
|
92 | the dependencies of a module once we have fetched that module, before fetching its dependencies in turn.
|
93 |
|
94 | We can get around this by injecting the full dependency tree upfront into a dependency cache, so that all dependencies
|
95 | can be fetched in parallel.
|
96 |
|
97 | ```
|
98 | jspm depcache app/main.js
|
99 | ```
|
100 |
|
101 | The above will trace the full tree for `app/main` and inject it into the `config.js` **depCache**.
|
102 |
|
103 | Now any imports will load the full tree in parallel, reducing the latency delay to one round trip.
|