Javascript - Module Loader (Script Loader)

About

A loader searches and loads module and script into the javascript engine (environment).

From the main script, they will:

They will generally load them recursively while building the dependency graph to gain speed

Environment

Browser

Browser: Basic Script Loader

The most generic of script loaders simply create a script tag element and inject it into the loaded page. Since the DOM element is injected, it logically cannot 'block' the rendering of the rest of the page so the browser treats it as if it were asynchronous. Asynchronous scripts don't block so you can load more than one at a time.

Example of a simple asynchronous script-loader

  • Create a new script element and set the source (For this example, we use bowser to detect your browser)
var script      = document.createElement('script');
script.src      = "https://cdnjs.cloudflare.com/ajax/libs/bowser/2.11.0/bundled.min.js"; // Set the location of the script
script.integrity ="sha512-hsF/cpBvi/vjCP4Ps/MrPUFk6l4BqcGbzVUhqjJdX2SmAri1Oj8FBUGCvBiKHYd6gg3vLsV16CtIRNOvK5X4lQ==";
script.crossOrigin="anonymous";
script.referrerPolicy="no-referrer";
let head = document.querySelector('head');
head.appendChild( script );
  • When the script trigger the load event, you can start use it.
script.addEventListener('load', function() {
    const browser = bowser.getParser(window.navigator.userAgent);
    console.log(`Your browser name is "${browser.getBrowserName()}"`);
});
  • Output:

Browser: Library

browser script loading API:

<script type="module" ...>
export default function () {
  import('./foo.js').then(({ default: foo }) => console.log(foo));
}
require("moduleId", function(moduleExport){ ... })
dojo.require("some.module")
$LAB.script("some/module.js")

Node

Node Native

In node, the CommonJs module is used.

Therefore the require function is used as loader.

You can influence it via the NODE_PATH that may contain a list of path where module should be searched

Node Library

Node Snippet example

An example of a node loader

const lib = path.join(__dirname, '..', '..', 'lib')
if (fs.existsSync(lib)) {
  // Use the latest src
  module.exports.resolve = { alias: { 'library_name': lib } }
} else {
    throw "library source not built. Run the following: 'pushd ../.. && rm -rf node_modules && yarn install && yarn run build && popd' and then rerun 'yarn start'"
}

Monitor

Node Loader monitors modify the code loaded dynamically.

Documentation / Reference





Discover More
Code Splitting

Code splitting is an operation performed by a bundler that splits code into chunks. You can then load only what is needed for a page to render. It's also known as route-chunking (where route refers to...
CommonJs (NodeJs) - Require

The import functionality implementation of commonjs (and then node) is done via the require function require basically: reads a Javascript file (generally a CommonJs module but it may be any javascript...
Dojo (Dojo Toolkit)

dojo is a framework based around the AMD module and specification that provides: an module loader (adoption of bdLoad) based on the AMD specification (ie equivalent to RequireJs) and a wide range...
HTML - (Client-side) Script (Element)

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...
How to load a script dynamically with Javascript?

This page shows you how you can load a script dynamically with Javascript to load and use it when needed. In short, if you add: a script via an DOM element, it will be executed (via append or insertAdjacentElement)...
Javascript - Asynchronous Module Definition (AMD)

The AMD specifies a mechanism for defining modules such that: the module and its dependencies can be specified and loaded asynchronously. ie Both the module and dependencies can be asynchronously...
Javascript - Module

functionality in Javascript. A module is different from a script file because: it defines a well-scoped object that does not pollute the global namespace. It list explicitly its dependencies Javascript...
Javascript - Universal Module Definition (UMD)

The UMD module format try to be the glue between differents modules definition by offering template A UMD module wraps the following module format: a Global Variable module the CommonJS format...
Javascript ES - Module Script (esm / .mjs)

The module implementation in Ecma Script (ES2015). An ES6 module is a Javascript file: automatically set in strict-mode with export statement and / or statement Everything inside a module is...
Javascript Module - Import (Es Module)

This page is the import statement defined in the es module specification The ES6 import is: a function for dynamic import (performed at runtime time) or a statement for static import (performed...



Share this page:
Follow us:
Task Runner