require.ensure([\"module-a\"], function(require) {\r\n var a = require(\"module-a\");\r\n \/\/ module-a can be used now ...\r\n});<\/pre>\nThe well-known module bundler\u00a0Webpack<\/a> supports this syntax for loading modules on demand. Such lazy loaded module(s) define a\u00a0split point<\/a>. Split points split the codebase into “chunks” (separate JavaScript files) which are loaded on demand. This feature allows to keep the initial download small and only download the code when it’s requested.<\/p>\nWebpack performs a static analysis of the code at the project build time. Dynamic information is only available at runtime and not available at build time. You have to define your modules as constants. This leads to the problem. The following code will not work:<\/p>\n
var modA = \"module-a\";\r\nrequire.ensure([modA], function(require) {\r\n var a = require(\"module-a\");\r\n \/\/ module-a can be used now ...\r\n});<\/pre>\nWebpack says something like:\u00a0Error: Module not found. A dependency to an entry point is not allowed<\/strong>.<\/p>\nTheoretically you can use\u00a0require.context<\/a>, but this needs some parts of module’s path as constants too. Now, imagine you develop a modular UI library and would like to provide some callbacks for certain events (event handlers). Users of your library use it as a third-party library. They want to register their custom callback functions from their own modules. And they want to be called lazy, on demand, when an event occurs. You have many users and your library doesn’t know about custom modules of course. That means, you can not hard-code module’s path and function’s name a priori. What to do?<\/p>\nSolution<\/b><\/p>\n
This POC on GitHub<\/a> demonstrates how to use truly dynamic require with webpack. It simulates third-party and own modules. The project structure:<\/p>\nindex.html \/\/ some HTML template from the third-party UI library \r\nexternal-modules \/\/ third-party library with CommonJS modules\r\nown-modules \/\/ some library with CommonJS modules which uses the third-party library\r\ncommon-modules \/\/ simple utility modules<\/pre>\nThe modules in external-modules don’t know about own-modules. Modules in the own-modules import modules from the external-modules. The most important webpack loader we use in this POC is\u00a0bundle loader for webpack<\/a>. This loader creates a special function with required module which can be executed lazily. The required module gets loaded when the function is executed.<\/p>\nThe HTML template in the POC, backed by the third-party (external) modules, look like as follows (only short snippet):<\/p>\n
<button data-init=\"button\" data-onclick='[\"ownModules.button\", \"alertSync\"]'>\r\n Try sync. call (ok)\r\n<\/button>\r\n<p><\/p>\r\n<button data-init=\"button\" data-onclick='[\"ownModules.button\", \"alertAsyncValid\"]'>\r\n Try async. call (ok)\r\n<\/button>\r\n<p><\/p>\r\n<button data-init=\"button\" data-onclick='[\"ownModules.button\", \"alertAsyncInvalid\"]'>\r\n Try async. call (error)\r\n<\/button><\/pre>\nThe full code can be found in\u00a0index.xhtml<\/strong>. The callback functions are defined as values of\u00a0data-*<\/strong> attributes. Example:\u00a0data-onclick='[“ownModules.button”, “alertSync”]’<\/strong>. Here, the function\u00a0alertSync from the namespace\u00a0ownModules.button<\/strong> wants to be called when the button is clicked. The namespace is a simple JavaScript object defined in the global window scope.<\/p>\nThe module’s functions in the folder\u00a0own-modules<\/strong> returns\u00a0Promises<\/strong>. Promises allow asynchronous callbacks. In the POC, the NPM module\u00a0promise light<\/a> is used. If you have jQuery in your web app, you can use\u00a0jQuery Deferred Object<\/a> as well because it provides the same functionality. The sample implementation of the\u00a0button.js<\/strong> looks like as<\/p>\nvar Promise = require('promise-light');\r\n\r\nmodule.exports = {\r\n alertSync: function (element) {\r\n document.getElementById('output').innerHTML = 'Clicked button. Sync. call is OK';\r\n return Promise.resolve('OK');\r\n },\r\n \r\n alertAsyncValid: function (element) {\r\n return new Promise(function setup(resolve, reject) {\r\n setTimeout(function () {\r\n document.getElementById('output').innerHTML = 'Clicked button. Async. call is OK';\r\n resolve('OK');\r\n }, 1000);\r\n });\r\n },\r\n \r\n alertAsyncInvalid: function (element) {\r\n return new Promise(function setup(resolve, reject) {\r\n setTimeout(function () {\r\n document.getElementById('output').innerHTML = 'Clicked button. Async. call has ERROR';\r\n reject('ERROR');\r\n }, 1000);\r\n });\r\n }\r\n};<\/pre>\nThe external modules should be bootstrapped by the own modules. The bootstrapping occurs in the file\u00a0entry.js<\/strong> which acts as an entry point in the webpack configuration.<\/p>\nvar objectifier = require(\".\/..\/common-modules\/objectifier\");\r\nvar bootstrap = require(\".\/..\/external-modules\/bootstrap\");\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function (event) { \r\n \/\/ initialize external modules\r\n bootstrap.bootstrap();\r\n \r\n \/\/ lazy load own modules (s. https:\/\/github.com\/webpack\/bundle-loader)\r\n var lazyLoadedButton = require(\"bundle?lazy!.\/button\");\r\n var lazyLoadedCheckbox = require(\"bundle?lazy!.\/checkbox\");\r\n \r\n \/\/ and put them under namespaces ownModules.button and ownModules.checkbox resp. \r\n objectifier.set('ownModules.button', lazyLoadedButton);\r\n objectifier.set('ownModules.checkbox', lazyLoadedCheckbox);\r\n});<\/pre>\nAs you can see, the bundle loader is applied to the own modules. The returned functions are saved under arbitrary namespaces in order to be executed later in external modules. Note: the
\nobjectifier<\/strong> is just a CommonJS module porting of the beautiful\u00a0getter and setter implementation for nested objects<\/a>. The\u00a0button.js<\/strong> in the\u00a0external-modules<\/strong> registers an onlick event handler for all HTML elements having the\u00a0data-init=”button”<\/strong> attribute.<\/p>\nvar lazyloader = require(\".\/lazyloader\");\r\n\r\nmodule.exports = {\r\n init: function () {\r\n var elements = document.querySelectorAll('[data-init=\"button\"]');\r\n for (var i = 0; i < elements.length; i++) {\r\n (function () {\r\n var element = elements[i];\r\n\r\n \/\/ onlick event handler\r\n var onclick = function () {\r\n \/\/ so something module specific ...\r\n\r\n \/\/ execute function defined via data-onclick attribute if it's defined,\r\n \/\/ e.g. data-onclick='[\"ownModules.button\", \"alertSync\"]'\r\n lazyloader.execute(element, 'data-onclick',\r\n function resolved(value) {\r\n alert(value);\r\n }, function rejected(error) {\r\n alert(error);\r\n });\r\n };\r\n\r\n element.addEventListener(\"click\", onclick);\r\n })();\r\n }\r\n\r\n return elements;\r\n },\r\n\r\n doSomething: function () {\r\n \/\/ ...\r\n }\r\n};<\/pre>\nThe core logic for the event handling is encapsulated in the\u00a0lazyloader.js<\/strong>.<\/p>\n\/**\r\n Loads modules specified via data-* attributes and executes the specified function.\r\n HTML-Example:\r\n\r\n <button data-init=\"button\" data-onclick='[\"ownModules.button\", \"alertSync\"]'>\r\n ...\r\n <\/button>\r\n\r\n The function ownModules.button.alertSync(button) will be executed.\r\n *\/\r\n\r\nvar objectifier = require(\".\/..\/common-modules\/objectifier\");\r\n\r\nmodule.exports = {\r\n \/**\r\n * Executes the specified synchronous or asynchronous function from the specified module\r\n * and invokes resolved or rejected callbacks respectively.\r\n * The function should return a promise.\r\n * \r\n * @param element HTML element where data-* is defined\r\n * @param data value of data-* as string\r\n * @param resolvedCallback callback which gets executed when the returned promise is fullfilled\r\n * @param rejectedCallback callback which gets executed when the returned promise is rejected\r\n *\/\r\n execute: function (element, data, resolvedCallback, rejectedCallback) {\r\n var strData = element.getAttribute(data);\r\n if (strData) {\r\n var objData = JSON.parse(strData);\r\n var module = objData[0];\r\n var func = objData[1];\r\n\r\n if (module && objectifier.exists(module) && func) {\r\n \/\/ module and function exist ==> load the module\r\n objectifier.get(module)(function (module) {\r\n \/\/ execute the specified function from the module.\r\n \/\/ return value is a promise (see https:\/\/www.npmjs.com\/package\/promise-light)\r\n module[func](element).then(\r\n function resolved(value) {\r\n resolvedCallback(value);\r\n },\r\n function rejected(error) {\r\n rejectedCallback(error);\r\n });\r\n });\r\n }\r\n }\r\n }\r\n};<\/pre>\nIt executes the specified function from the specified module. The caller receives a promise. If the promise gets resolved, the first function in\u00a0.then(…)<\/strong> is executed. If the promise gets rejected, the second function in\u00a0.then(…)<\/strong> is executed. The synchronous or asynchronous function from the own modules can control whether it resolves or rejects the promise. The caller can decide then what it should do in both cases. For instance, assume you got an accordion widget which belongs to a third-party library. One interesting case could be the validation of the content of an open accordion tab when the tab’s header is clicked by the user. A custom function could validate the tab content on such click. In case of a successful validation, the clicked tab can be closed. Otherwise, the tab should stay open.<\/p>\nScreens<\/b><\/p>\n
The initial load doesn’t fetch chunks from the own modules.<\/p>\n
![\"init-load\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/05\/init-load.png\")
<\/a><\/p>\nClick on a button triggers the load of the first chunk.<\/p>\n
![\"chunk-1\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/05\/chunk-1.png\")
<\/a><\/p>\nClick on a checkbox triggers the load of the second chunk.<\/p>\n
![\"chunk-2\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/05\/chunk-2.png\")
<\/a><\/p>\n\n