From c35ca4e4ad4565b0bd010f0a269fcc7da7dd20af Mon Sep 17 00:00:00 2001 From: Sean Larkin Date: Fri, 9 Dec 2016 22:32:42 -0600 Subject: [PATCH] feat(examples): add example for context modules + code split via import() --- .../README.md | 399 ++++++++++++++++++ .../build.js | 1 + .../example.js | 21 + .../template.md | 41 ++ .../templates/a.js | 3 + .../templates/b.js | 3 + .../templates/bar.js | 3 + .../templates/baz.js | 3 + .../templates/c.js | 3 + .../templates/foo.js | 3 + 10 files changed, 480 insertions(+) create mode 100644 examples/code-splitting-native-import-context/README.md create mode 100644 examples/code-splitting-native-import-context/build.js create mode 100644 examples/code-splitting-native-import-context/example.js create mode 100644 examples/code-splitting-native-import-context/template.md create mode 100644 examples/code-splitting-native-import-context/templates/a.js create mode 100644 examples/code-splitting-native-import-context/templates/b.js create mode 100644 examples/code-splitting-native-import-context/templates/bar.js create mode 100644 examples/code-splitting-native-import-context/templates/baz.js create mode 100644 examples/code-splitting-native-import-context/templates/c.js create mode 100644 examples/code-splitting-native-import-context/templates/foo.js diff --git a/examples/code-splitting-native-import-context/README.md b/examples/code-splitting-native-import-context/README.md new file mode 100644 index 000000000..5527e1fd1 --- /dev/null +++ b/examples/code-splitting-native-import-context/README.md @@ -0,0 +1,399 @@ +# example.js + +This example illustrates how to leverage the `import()` syntax to create ContextModules which are separated into separate chunks for each module in the `./templates` folder. + +``` javascript +// function getTemplate(templateName) { +// return import("./templates/"+templateName); +// } +// console.log(getTemplate("a")); +// console.log(getTemplate("b")); + +async function getTemplate(templateName) { + try { + let template = await import(`./templates/${templateName}`); + console.log(template); + } catch(err) { + console.error("template error"); + return new Error(err); + } +} + +getTemplate("a"); +getTemplate("b"); +getTemplate("c"); +``` + +# templates/ + +* a.js +* b.js +* c.js + +All templates are of this pattern: + +``` javascript +module.exports = function() { + return "This text was generated by template X"; +} +``` + +# js/output.js + +
`/******/ (function(modules) { /* webpackBootstrap */ })` +``` javascript +/******/ (function(modules) { // webpackBootstrap +/******/ // install a JSONP callback for chunk loading +/******/ var parentJsonpFunction = window["webpackJsonp"]; +/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) { +/******/ // add "moreModules" to the modules object, +/******/ // then flag all "chunkIds" as loaded and fire callback +/******/ var moduleId, chunkId, i = 0, resolves = [], result; +/******/ for(;i < chunkIds.length; i++) { +/******/ chunkId = chunkIds[i]; +/******/ if(installedChunks[chunkId]) +/******/ resolves.push(installedChunks[chunkId][0]); +/******/ installedChunks[chunkId] = 0; +/******/ } +/******/ for(moduleId in moreModules) { +/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { +/******/ modules[moduleId] = moreModules[moduleId]; +/******/ } +/******/ } +/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules); +/******/ while(resolves.length) +/******/ resolves.shift()(); + +/******/ }; + +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // objects to store loaded and loading chunks +/******/ var installedChunks = { +/******/ 6: 0 +/******/ }; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.l = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + +/******/ // This file contains only the entry chunk. +/******/ // The chunk loading function for additional chunks +/******/ __webpack_require__.e = function requireEnsure(chunkId) { +/******/ if(installedChunks[chunkId] === 0) +/******/ return Promise.resolve(); + +/******/ // an Promise means "currently loading". +/******/ if(installedChunks[chunkId]) { +/******/ return installedChunks[chunkId][2]; +/******/ } +/******/ // start chunk loading +/******/ var head = document.getElementsByTagName('head')[0]; +/******/ var script = document.createElement('script'); +/******/ script.type = 'text/javascript'; +/******/ script.charset = 'utf-8'; +/******/ script.async = true; +/******/ script.timeout = 120000; + +/******/ if (__webpack_require__.nc) { +/******/ script.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ script.src = __webpack_require__.p + "" + chunkId + ".output.js"; +/******/ var timeout = setTimeout(onScriptComplete, 120000); +/******/ script.onerror = script.onload = onScriptComplete; +/******/ function onScriptComplete() { +/******/ // avoid mem leaks in IE. +/******/ script.onerror = script.onload = null; +/******/ clearTimeout(timeout); +/******/ var chunk = installedChunks[chunkId]; +/******/ if(chunk !== 0) { +/******/ if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.')); +/******/ installedChunks[chunkId] = undefined; +/******/ } +/******/ }; +/******/ head.appendChild(script); + +/******/ var promise = new Promise(function(resolve, reject) { +/******/ installedChunks[chunkId] = [resolve, reject]; +/******/ }); +/******/ return installedChunks[chunkId][2] = promise; +/******/ }; + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // identity function for calling harmony imports with the correct context +/******/ __webpack_require__.i = function(value) { return value; }; + +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; + +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; + +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = "js/"; + +/******/ // on error function for async loading +/******/ __webpack_require__.oe = function(err) { console.error(err); throw err; }; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 7); +/******/ }) +/************************************************************************/ +``` +
+``` javascript +/******/ ({ + +/***/ 0: +/* unknown exports provided */ +/* all exports used */ +/*!**********************************!*\ + !*** ./templates async ^\.\/.*$ ***! + \**********************************/ +/***/ function(module, exports, __webpack_require__) { + +var map = { + "./a": [ + 1, + 5 + ], + "./a.js": [ + 1, + 5 + ], + "./b": [ + 2, + 4 + ], + "./b.js": [ + 2, + 4 + ], + "./bar": [ + 3, + 3 + ], + "./bar.js": [ + 3, + 3 + ], + "./baz": [ + 4, + 2 + ], + "./baz.js": [ + 4, + 2 + ], + "./c": [ + 5, + 1 + ], + "./c.js": [ + 5, + 1 + ], + "./foo": [ + 6, + 0 + ], + "./foo.js": [ + 6, + 0 + ] +}; +function webpackAsyncContext(req) { + var ids = map[req]; if(!ids) + return Promise.reject(new Error("Cannot find module '" + req + "'.")); + return __webpack_require__.e(ids[1]).then(function() { + return __webpack_require__(ids[0]); + }); +}; +webpackAsyncContext.keys = function webpackAsyncContextKeys() { + return Object.keys(map); +}; +module.exports = webpackAsyncContext; +webpackAsyncContext.id = 0; + + +/***/ }, + +/***/ 7: +/* unknown exports provided */ +/* all exports used */ +/*!********************!*\ + !*** ./example.js ***! + \********************/ +/***/ function(module, exports, __webpack_require__) { + +// function getTemplate(templateName) { +// return import("./templates/"+templateName); +// } +// console.log(getTemplate("a")); +// console.log(getTemplate("b")); + +async function getTemplate(templateName) { + try { + let template = await __webpack_require__(/*! ./templates */ 0)(`./${templateName}`); + console.log(template); + } catch(err) { + console.error("template error"); + return new Error(err); + } +} + +getTemplate("a"); +getTemplate("b"); +getTemplate("c"); + + + + +/***/ } + +/******/ }); +``` + +# Info + +## Uncompressed + +``` +Hash: 2143ae7aacbfebfb3d32 +Version: webpack 2.1.0-beta.27 +Time: 102ms + Asset Size Chunks Chunk Names +0.output.js 399 bytes 0 [emitted] +1.output.js 301 bytes 1 [emitted] +2.output.js 399 bytes 2 [emitted] +3.output.js 399 bytes 3 [emitted] +4.output.js 301 bytes 4 [emitted] +5.output.js 307 bytes 5 [emitted] + output.js 7.08 kB 6 [emitted] main +Entrypoint main = output.js +chunk {0} 0.output.js 38 bytes {6} [rendered] + [6] ./templates/foo.js 38 bytes {0} [optional] [built] + [exports: default] + context element ./foo [0] ./templates async ^\.\/.*$ + context element ./foo.js [0] ./templates async ^\.\/.*$ +chunk {1} 1.output.js 80 bytes {6} [rendered] + [5] ./templates/c.js 80 bytes {1} [optional] [built] + context element ./c [0] ./templates async ^\.\/.*$ + context element ./c.js [0] ./templates async ^\.\/.*$ +chunk {2} 2.output.js 38 bytes {6} [rendered] + [4] ./templates/baz.js 38 bytes {2} [optional] [built] + [exports: default] + context element ./baz [0] ./templates async ^\.\/.*$ + context element ./baz.js [0] ./templates async ^\.\/.*$ +chunk {3} 3.output.js 38 bytes {6} [rendered] + [3] ./templates/bar.js 38 bytes {3} [optional] [built] + [exports: default] + context element ./bar [0] ./templates async ^\.\/.*$ + context element ./bar.js [0] ./templates async ^\.\/.*$ +chunk {4} 4.output.js 80 bytes {6} [rendered] + [2] ./templates/b.js 80 bytes {4} [optional] [built] + context element ./b [0] ./templates async ^\.\/.*$ + context element ./b.js [0] ./templates async ^\.\/.*$ +chunk {5} 5.output.js 80 bytes {6} [rendered] + [1] ./templates/a.js 80 bytes {5} [optional] [built] + context element ./a [0] ./templates async ^\.\/.*$ + context element ./a.js [0] ./templates async ^\.\/.*$ +chunk {6} output.js (main) 597 bytes [entry] [rendered] + > main [7] ./example.js + [0] ./templates async ^\.\/.*$ 160 bytes {6} [optional] [built] + System.import context ./templates [7] ./example.js 9:23-60 + [7] ./example.js 437 bytes {6} [built] +``` + +## Minimized (uglify-js, no zip) + +``` +Hash: 2143ae7aacbfebfb3d32 +Version: webpack 2.1.0-beta.27 +Time: 152ms + Asset Size Chunks Chunk Names +0.output.js 125 bytes 0 [emitted] +1.output.js 105 bytes 1 [emitted] +2.output.js 125 bytes 2 [emitted] +3.output.js 125 bytes 3 [emitted] +4.output.js 105 bytes 4 [emitted] +5.output.js 104 bytes 5 [emitted] + output.js 6.75 kB 6 [emitted] main +Entrypoint main = output.js +chunk {0} 0.output.js 38 bytes {6} [rendered] + [6] ./templates/foo.js 38 bytes {0} [optional] [built] + [exports: default] + context element ./foo [0] ./templates async ^\.\/.*$ + context element ./foo.js [0] ./templates async ^\.\/.*$ +chunk {1} 1.output.js 80 bytes {6} [rendered] + [5] ./templates/c.js 80 bytes {1} [optional] [built] + context element ./c [0] ./templates async ^\.\/.*$ + context element ./c.js [0] ./templates async ^\.\/.*$ +chunk {2} 2.output.js 38 bytes {6} [rendered] + [4] ./templates/baz.js 38 bytes {2} [optional] [built] + [exports: default] + context element ./baz [0] ./templates async ^\.\/.*$ + context element ./baz.js [0] ./templates async ^\.\/.*$ +chunk {3} 3.output.js 38 bytes {6} [rendered] + [3] ./templates/bar.js 38 bytes {3} [optional] [built] + [exports: default] + context element ./bar [0] ./templates async ^\.\/.*$ + context element ./bar.js [0] ./templates async ^\.\/.*$ +chunk {4} 4.output.js 80 bytes {6} [rendered] + [2] ./templates/b.js 80 bytes {4} [optional] [built] + context element ./b [0] ./templates async ^\.\/.*$ + context element ./b.js [0] ./templates async ^\.\/.*$ +chunk {5} 5.output.js 80 bytes {6} [rendered] + [1] ./templates/a.js 80 bytes {5} [optional] [built] + context element ./a [0] ./templates async ^\.\/.*$ + context element ./a.js [0] ./templates async ^\.\/.*$ +chunk {6} output.js (main) 597 bytes [entry] [rendered] + > main [7] ./example.js + [0] ./templates async ^\.\/.*$ 160 bytes {6} [optional] [built] + System.import context ./templates [7] ./example.js 9:23-60 + [7] ./example.js 437 bytes {6} [built] + +``` diff --git a/examples/code-splitting-native-import-context/build.js b/examples/code-splitting-native-import-context/build.js new file mode 100644 index 000000000..41c29c9d1 --- /dev/null +++ b/examples/code-splitting-native-import-context/build.js @@ -0,0 +1 @@ +require("../build-common"); \ No newline at end of file diff --git a/examples/code-splitting-native-import-context/example.js b/examples/code-splitting-native-import-context/example.js new file mode 100644 index 000000000..cfaaf01bd --- /dev/null +++ b/examples/code-splitting-native-import-context/example.js @@ -0,0 +1,21 @@ +// function getTemplate(templateName) { +// return import("./templates/"+templateName); +// } +// console.log(getTemplate("a")); +// console.log(getTemplate("b")); + +async function getTemplate(templateName) { + try { + let template = await import(`./templates/${templateName}`); + console.log(template); + } catch(err) { + console.error("template error"); + return new Error(err); + } +} + +getTemplate("a"); +getTemplate("b"); +getTemplate("c"); + + diff --git a/examples/code-splitting-native-import-context/template.md b/examples/code-splitting-native-import-context/template.md new file mode 100644 index 000000000..2169f3344 --- /dev/null +++ b/examples/code-splitting-native-import-context/template.md @@ -0,0 +1,41 @@ +# example.js + +This example illustrates how to leverage the `import()` syntax to create ContextModules which are separated into separate chunks for each module in the `./templates` folder. + +``` javascript +{{example.js}} +``` + +# templates/ + +* a.js +* b.js +* c.js + +All templates are of this pattern: + +``` javascript +module.exports = function() { + return "This text was generated by template X"; +} +``` + +# js/output.js + +``` javascript +{{js/output.js}} +``` + +# Info + +## Uncompressed + +``` +{{stdout}} +``` + +## Minimized (uglify-js, no zip) + +``` +{{min:stdout}} +``` diff --git a/examples/code-splitting-native-import-context/templates/a.js b/examples/code-splitting-native-import-context/templates/a.js new file mode 100644 index 000000000..0fdaae501 --- /dev/null +++ b/examples/code-splitting-native-import-context/templates/a.js @@ -0,0 +1,3 @@ +module.exports = function() { + return "This text was generated by template A"; +} \ No newline at end of file diff --git a/examples/code-splitting-native-import-context/templates/b.js b/examples/code-splitting-native-import-context/templates/b.js new file mode 100644 index 000000000..cf33bd6fd --- /dev/null +++ b/examples/code-splitting-native-import-context/templates/b.js @@ -0,0 +1,3 @@ +module.exports = function() { + return "This text was generated by template B"; +} \ No newline at end of file diff --git a/examples/code-splitting-native-import-context/templates/bar.js b/examples/code-splitting-native-import-context/templates/bar.js new file mode 100644 index 000000000..3b34c4d7b --- /dev/null +++ b/examples/code-splitting-native-import-context/templates/bar.js @@ -0,0 +1,3 @@ +var bar = "bar"; + +export default bar; diff --git a/examples/code-splitting-native-import-context/templates/baz.js b/examples/code-splitting-native-import-context/templates/baz.js new file mode 100644 index 000000000..7f7547c8b --- /dev/null +++ b/examples/code-splitting-native-import-context/templates/baz.js @@ -0,0 +1,3 @@ +var baz = "baz"; + +export default baz; diff --git a/examples/code-splitting-native-import-context/templates/c.js b/examples/code-splitting-native-import-context/templates/c.js new file mode 100644 index 000000000..f11278120 --- /dev/null +++ b/examples/code-splitting-native-import-context/templates/c.js @@ -0,0 +1,3 @@ +module.exports = function() { + return "This text was generated by template C"; +} \ No newline at end of file diff --git a/examples/code-splitting-native-import-context/templates/foo.js b/examples/code-splitting-native-import-context/templates/foo.js new file mode 100644 index 000000000..92b67b2c4 --- /dev/null +++ b/examples/code-splitting-native-import-context/templates/foo.js @@ -0,0 +1,3 @@ +var foo = "foo"; + +export default foo;