browserify-dynamic-import
dynamic import()
for browserify
Lazy load the parts of your app that are not immediately used, to make the initial load faster.
What? - Install - CLI - API - License: MIT
What?
This plugin takes source files with import()
calls like:
var html = var app = appapp var component { return html` `} import'./SomeComponent'
And splits off import()
ed files into their own bundles, that will be dynamically loaded at runtime.
In this case, a main bundle would be created including choo
, choo/html
and the above file, and a second bundle would be created for the SomeComponent.js
file and its dependencies.
Note that this isn't 100% spec compliant.
import()
is an ES modules feature, not a CommonJS one. In CommonJS with this plugin, the exports object is the value of themodule.exports
of the imported module, so it may well be a function or some other non-object value. In ES modules, the exports object in.then()
will always be an object, with a.default
property for default exports and other properties for named exports. You'd never get a function back in.then()
in native ES modules.
Install
npm install goto-bus-stop/browserify-dynamic-import
CLI Usage
browserify ./entry -p [ browserify-dynamic-import --dir /output/directory ] > /output/directory/bundle.js
Options
--dir
Set the folder to output dynamic bundles to. Defaults to ./
.
--prefix
Prefix for the function names that are used to load dynamic bundles.
Defaults to __browserifyDynamicImport__
, which is probably safe.
--public
Public path to load chunks from.
Defaults to ./
, so chunk #1 is loaded as ./chunk.1.js
.
API Usage
var dynamicImport =
Through the API, browserify-dynamic-import can also be used together with
factor-bundle. Listen for the
factor.pipeline
event and unshift a dynamic import stream to the 'pack'
label:
bb
Note that you must pass the options to the plugin and the stream.
Options
dir
Set the folder to output dynamic bundles to. Defaults to ./
.
This is only necessary if the output()
option is not used.
outname(entry)
Function that generates a name for a dynamic bundle. Receives the entry point row as the only parameter. The default is:
{ return 'bundle.' + entryindex + '.js'}
output(bundleName)
Function that should return a stream. The dynamic bundle will be written to the stream.
bundleName
is the generated name for the dynamic bundle.
At runtime, the main bundle will attempt to use this name to load the bundle, so it should be publically accessible under this name.
The bundleName
can be changed by emitting a name
event on the returned stream (before it completes!).
This is useful to generate a bundle name based on a hash of the file contents, for example.
var crypto = var to = b
prefix
Prefix for the function names that are used to load dynamic bundles.
Defaults to __browserifyDynamicImport__
, which is probably safe.
public
Public path to load chunks from.
Defaults to ./
, so chunk #1 is loaded as ./chunk.1.js
.
Events
b.on('import.pipeline', function (pipeline) {})
browserify-dynamic-import
emits an event on the browserify instance for each [pipeline] it creates.
pipeline
is a labeled-stream-splicer with labels:
'pack'
- browser-pack'wrap'
- apply final wrapping