Skip to content

Commit 060ba5e

Browse files
sokrasokra
committed
added code-splitting-harmony example
1 parent 9a8446b commit 060ba5e

8 files changed

Lines changed: 323 additions & 0 deletions

File tree

‎examples/code-splitting-harmony/README.md‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
This example show how to use Code Splitting with the ES6 module syntax.
2+
3+
The standard `import` is sync.
4+
5+
`System.import(module: string) -> Promise` can be used to load modules on demand. This acts as split point for webpack and creates a chunk.
6+
7+
Providing dynamic expressions to `System.import` is possible. The same limits as with dynamic expressions in `require` calls apply here. Each possible module creates an additional chunk. In this example `System.import("c/" + name)` creates two additional chunks (one for each file in `node_modules/c/`). This is called "async context".
8+
9+
# example.js
10+
11+
``` javascript
12+
import a from "a";
13+
14+
System.import("b").then(function(b) {
15+
console.log("b loaded", b);
16+
})
17+
18+
function loadC(name) {
19+
return System.import("c/" + name)
20+
}
21+
22+
Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
23+
console.log("c/1 and c/2 loaded", arr);
24+
});
25+
```
26+
27+
28+
# js/output.js
29+
30+
``` javascript
31+
/******/ (function(modules) { // webpackBootstrap
32+
/******/ // install a JSONP callback for chunk loading
33+
/******/ var parentJsonpFunction = window["webpackJsonp"];
34+
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModule) {
35+
/******/ // add "moreModules" to the modules object,
36+
/******/ // then flag all "chunkIds" as loaded and fire callback
37+
/******/ var moduleId, chunkId, i = 0, resolves = [];
38+
/******/ for(;i < chunkIds.length; i++) {
39+
/******/ chunkId = chunkIds[i];
40+
/******/ if(installedChunks[chunkId])
41+
/******/ resolves.push(installedChunks[chunkId][0]);
42+
/******/ installedChunks[chunkId] = 0;
43+
/******/ }
44+
/******/ for(moduleId in moreModules) {
45+
/******/ modules[moduleId] = moreModules[moduleId];
46+
/******/ }
47+
/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
48+
/******/ while(resolves.length)
49+
/******/ resolves.shift()();
50+
51+
/******/ };
52+
53+
/******/ // The module cache
54+
/******/ var installedModules = {};
55+
56+
/******/ // objects to store loaded and loading chunks
57+
/******/ var installedChunks = {
58+
/******/ 2: 0
59+
/******/ };
60+
61+
/******/ // The require function
62+
/******/ function __webpack_require__(moduleId) {
63+
64+
/******/ // Check if module is in cache
65+
/******/ if(installedModules[moduleId])
66+
/******/ return installedModules[moduleId].exports;
67+
68+
/******/ // Create a new module (and put it into the cache)
69+
/******/ var module = installedModules[moduleId] = {
70+
/******/ exports: {},
71+
/******/ id: moduleId,
72+
/******/ loaded: false
73+
/******/ };
74+
75+
/******/ // Execute the module function
76+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
77+
78+
/******/ // Flag the module as loaded
79+
/******/ module.loaded = true;
80+
81+
/******/ // Return the exports of the module
82+
/******/ return module.exports;
83+
/******/ }
84+
85+
/******/ // This file contains only the entry chunk.
86+
/******/ // The chunk loading function for additional chunks
87+
/******/ __webpack_require__.e = function requireEnsure(chunkId) {
88+
/******/ if(installedChunks[chunkId] === 0)
89+
/******/ return Promise.resolve()
90+
91+
/******/ // an Promise means "currently loading".
92+
/******/ if(installedChunks[chunkId]) {
93+
/******/ return installedChunks[chunkId][2];
94+
/******/ }
95+
/******/ // start chunk loading
96+
/******/ var head = document.getElementsByTagName('head')[0];
97+
/******/ var script = document.createElement('script');
98+
/******/ script.type = 'text/javascript';
99+
/******/ script.charset = 'utf-8';
100+
/******/ script.async = true;
101+
102+
/******/ script.src = __webpack_require__.p + "" + chunkId + ".output.js";
103+
/******/ head.appendChild(script);
104+
105+
/******/ var promise = new Promise(function(resolve, reject) {
106+
/******/ installedChunks[chunkId] = [resolve, reject];
107+
/******/ });
108+
/******/ return installedChunks[chunkId][2] = promise;
109+
/******/ };
110+
111+
/******/ // expose the modules object (__webpack_modules__)
112+
/******/ __webpack_require__.m = modules;
113+
114+
/******/ // expose the module cache
115+
/******/ __webpack_require__.c = installedModules;
116+
117+
/******/ // on error function for async loading
118+
/******/ __webpack_require__.oe = function(err) { throw err; };
119+
120+
/******/ // __webpack_public_path__
121+
/******/ __webpack_require__.p = "js/";
122+
/******/ // Load entry module and return exports
123+
/******/ return __webpack_require__(__webpack_require__.s = 4);
124+
/******/ })
125+
/************************************************************************/
126+
/******/ ([
127+
/* 0 */
128+
/*!****************!*\
129+
!*** ./~/a.js ***!
130+
\****************/
131+
/***/ function(module, exports) {
132+
133+
// module a
134+
135+
/***/ },
136+
/* 1 */
137+
/*!****************************!*\
138+
!*** ./~/c async ^\.\/.*$ ***!
139+
\****************************/
140+
/***/ function(module, exports, __webpack_require__) {
141+
142+
var map = {
143+
"./1": [
144+
2,
145+
1
146+
],
147+
"./1.js": [
148+
2,
149+
1
150+
],
151+
"./2": [
152+
3,
153+
0
154+
],
155+
"./2.js": [
156+
3,
157+
0
158+
]
159+
};
160+
function webpackAsyncContext(req) {
161+
var ids = map[req]; if(!ids)
162+
throw new Error("Cannot find module '" + req + "'.");
163+
return __webpack_require__.e(ids[1]).then(function() {
164+
return __webpack_require__(ids[0]);
165+
});
166+
};
167+
webpackAsyncContext.keys = function webpackAsyncContextKeys() {
168+
return Object.keys(map);
169+
};
170+
module.exports = webpackAsyncContext;
171+
webpackAsyncContext.id = 1;
172+
173+
174+
/***/ },
175+
/* 2 */,
176+
/* 3 */,
177+
/* 4 */
178+
/*!********************!*\
179+
!*** ./example.js ***!
180+
\********************/
181+
/***/ function(module, exports, __webpack_require__) {
182+
183+
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_a__ = __webpack_require__(/*! a */ 0);
184+
185+
__webpack_require__.e/* System.import */(3).then(__webpack_require__.bind(null, /*! b */ 5)).then(function(b) {
186+
console.log("b loaded", b);
187+
})
188+
189+
function loadC(name) {
190+
return __webpack_require__(/*! c */ 1)("./" + name)
191+
}
192+
193+
Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
194+
console.log("c/1 and c/2 loaded", arr);
195+
});
196+
197+
198+
/***/ }
199+
/******/ ]);
200+
```
201+
202+
203+
# Info
204+
205+
## Uncompressed
206+
207+
```
208+
Hash: 43678a0f919ae4b7120a
209+
Version: webpack 1.11.0
210+
Time: 126ms
211+
Asset Size Chunks Chunk Names
212+
0.output.js 163 bytes 0 [emitted]
213+
1.output.js 163 bytes 1 [emitted]
214+
output.js 4.96 kB 2 [emitted] main
215+
3.output.js 155 bytes 3 [emitted]
216+
chunk {0} 0.output.js 13 bytes {2} [rendered]
217+
[3] ./~/c/2.js 13 bytes {0} [optional] [built]
218+
context element ./2.js [1] ./~/c async ^\.\/.*$
219+
context element ./2 [1] ./~/c async ^\.\/.*$
220+
chunk {1} 1.output.js 13 bytes {2} [rendered]
221+
[2] ./~/c/1.js 13 bytes {1} [optional] [built]
222+
context element ./1.js [1] ./~/c async ^\.\/.*$
223+
context element ./1 [1] ./~/c async ^\.\/.*$
224+
chunk {2} output.js (main) 440 bytes [rendered]
225+
> main [4] ./example.js
226+
[0] ./~/a.js 11 bytes {2} [built]
227+
harmony import a [4] ./example.js 1:0-18
228+
[1] ./~/c async ^\.\/.*$ 160 bytes {2} [built]
229+
System.import context c [4] ./example.js 8:8-34
230+
[4] ./example.js 269 bytes {2} [built]
231+
chunk {3} 3.output.js 11 bytes {2} [rendered]
232+
> [4] ./example.js 3:0-18
233+
[5] ./~/b.js 11 bytes {3} [built]
234+
b [4] ./example.js 3:0-18
235+
```
236+
237+
## Minimized (uglify-js, no zip)
238+
239+
```
240+
Hash: 43678a0f919ae4b7120a
241+
Version: webpack 1.11.0
242+
Time: 306ms
243+
Asset Size Chunks Chunk Names
244+
0.output.js 38 bytes 0 [emitted]
245+
1.output.js 38 bytes 1 [emitted]
246+
output.js 1.25 kB 2 [emitted] main
247+
3.output.js 38 bytes 3 [emitted]
248+
chunk {0} 0.output.js 13 bytes {2} [rendered]
249+
[3] ./~/c/2.js 13 bytes {0} [optional] [built]
250+
context element ./2.js [1] ./~/c async ^\.\/.*$
251+
context element ./2 [1] ./~/c async ^\.\/.*$
252+
chunk {1} 1.output.js 13 bytes {2} [rendered]
253+
[2] ./~/c/1.js 13 bytes {1} [optional] [built]
254+
context element ./1.js [1] ./~/c async ^\.\/.*$
255+
context element ./1 [1] ./~/c async ^\.\/.*$
256+
chunk {2} output.js (main) 440 bytes [rendered]
257+
> main [4] ./example.js
258+
[0] ./~/a.js 11 bytes {2} [built]
259+
harmony import a [4] ./example.js 1:0-18
260+
[1] ./~/c async ^\.\/.*$ 160 bytes {2} [built]
261+
System.import context c [4] ./example.js 8:8-34
262+
[4] ./example.js 269 bytes {2} [built]
263+
chunk {3} 3.output.js 11 bytes {2} [rendered]
264+
> [4] ./example.js 3:0-18
265+
[5] ./~/b.js 11 bytes {3} [built]
266+
b [4] ./example.js 3:0-18
267+
268+
WARNING in output.js from UglifyJs
269+
Side effects in initialization of unused variable __WEBPACK_IMPORTED_MODULE_0_a__ [./example.js:1,0]
270+
```

‎examples/code-splitting-harmony/build.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require("../build-common");

‎examples/code-splitting-harmony/example.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import a from "a";
2+
3+
System.import("b").then(function(b) {
4+
console.log("b loaded", b);
5+
})
6+
7+
function loadC(name) {
8+
return System.import("c/" + name)
9+
}
10+
11+
Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
12+
console.log("c/1 and c/2 loaded", arr);
13+
});

‎examples/code-splitting-harmony/node_modules/a.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/code-splitting-harmony/node_modules/b.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/code-splitting-harmony/node_modules/c/1.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/code-splitting-harmony/node_modules/c/2.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/code-splitting-harmony/template.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
This example show how to use Code Splitting with the ES6 module syntax.
2+
3+
The standard `import` is sync.
4+
5+
`System.import(module: string) -> Promise` can be used to load modules on demand. This acts as split point for webpack and creates a chunk.
6+
7+
Providing dynamic expressions to `System.import` is possible. The same limits as with dynamic expressions in `require` calls apply here. Each possible module creates an additional chunk. In this example `System.import("c/" + name)` creates two additional chunks (one for each file in `node_modules/c/`). This is called "async context".
8+
9+
# example.js
10+
11+
``` javascript
12+
{{example.js}}
13+
```
14+
15+
16+
# js/output.js
17+
18+
``` javascript
19+
{{js/output.js}}
20+
```
21+
22+
23+
# Info
24+
25+
## Uncompressed
26+
27+
```
28+
{{stdout}}
29+
```
30+
31+
## Minimized (uglify-js, no zip)
32+
33+
```
34+
{{min:stdout}}
35+
```

0 commit comments

Comments
 (0)