externalize

externalize

Create external Browserify bundles for lazy asynchronous loading

Introduction to asynchronous module loading with Browserify:

http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

Install

npm install externalize

API

The module exports a single function

externalize(
    <parent bundle or array of parent bundles>,
    <bundle or arrays of bundles to be externalized from the parent bundles>,
    <callback fucntion>
);

Example

Create two bundles where the second one is a subset of the parent and call externalize(parent, subset, callback) on them. It will do following:

• Moves all modules that are used in both to the parent one
• Removes those modules from the parent one that are explicitly requireable in the subset one
• It generally tries to do the "right thing"

in code:

var fs = require("fs");
var browserify = require("browserify");
var externalize = require("externalize");

// Parent bundle with an entry point
var parent = browserify("./index.js");

// Make subset bundle from external.js by making it explicitly requireable
var subset = browserify().require("./external.js");

// Remove the subset bundle code from the parent
externalize(parent, subset, function(err) {
    if (err) throw err;

    // Write bundles to files after externalization
    parent.bundle().pipe(fs.createWriteStream("bundle/parent.js"));
    subset.bundle().pipe(fs.createWriteStream("bundle/subset.js"));
});

index.js:

// require("./external");
// Would not work here because external.js is externalized to the subset bundle

// Use any script loader to load the subset bundle to make the require work
// again
jQuery.getScript("bundle/subset.js", function(){
    var value = require("./external");
    // Alerts: "external module: external module contents"
    alert("external module: " + value);
});

external.js:

module.exports = "external module contents";

Script loaders

You need a script loader to load the external bundles. There is one in jQuery. If you don't use jQuery you can grab $script.js from npm or implement your own for modern browsers easily.

Some others include:

• yepnope
• head.js
• lab.js
• lazyload
• basket.js