# browserify-dynamic-import > dynamic import() for browserify Latest version **1.0.0** (published 2017-10-04) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install browserify-dynamic-import pnpm add browserify-dynamic-import yarn add browserify-dynamic-import bun add browserify-dynamic-import ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2017-10-04 | | First published | 2017-10-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 81 | | Maintainers | goto-bus-stop | ## Links - npm: https://www.npmjs.com/package/browserify-dynamic-import - Repository: https://github.com/goto-bus-stop/browserify-dynamic-import - Homepage: https://github.com/goto-bus-stop/browserify-dynamic-import#readme - Issues: https://github.com/goto-bus-stop/browserify-dynamic-import/issues - npm.io page: https://npm.io/package/browserify-dynamic-import ## Dependencies (7) - [babylon](https://npm.io/package/babylon.md) ^6.18.0 - [browser-pack](https://npm.io/package/browser-pack.md) ^6.0.2 - [run-parallel](https://npm.io/package/run-parallel.md) ^1.1.6 - [end-of-stream](https://npm.io/package/end-of-stream.md) ^1.4.0 - [transform-ast](https://npm.io/package/transform-ast.md) ^2.2.1 - [convert-source-map](https://npm.io/package/convert-source-map.md) ^1.5.0 - [labeled-stream-splicer](https://npm.io/package/labeled-stream-splicer.md) ^2.0.0 ## Recent versions - 1.0.0 (latest) — 2017-10-04 ## README # 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?](#what) - [Install](#install) - [CLI](#cli-usage) - [API](#api-usage) - [License: MIT](#license) [![stability][stability-image]][stability-url] [![travis][travis-image]][travis-url] [![standard][standard-image]][standard-url] [stability-image]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square [stability-url]: https://nodejs.org/api/documentation.html#documentation_stability_index [travis-image]: https://img.shields.io/travis/goto-bus-stop/browserify-dynamic-import.svg?style=flat-square [travis-url]: https://travis-ci.org/goto-bus-stop/browserify-dynamic-import [standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square [standard-url]: http://npm.im/standard ## What? This plugin takes source files with `import()` calls like: ```js var html = require('choo/html') var app = require('choo')() app.route('/', mainView) app.mount('body') var component function mainView () { return html` ${component ? component.render() : html`

Loading

`} ` } import('./SomeComponent').then(function (SomeComponent) { component = new SomeComponent() app.emitter.emit('render') }) ``` 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 the `module.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 ```bash 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 ```js var dynamicImport = require('browserify-dynamic-import') browserify('./entry') .plugin(dynamicImport, { dir: '/output/directory' }) .pipe(fs.createWriteStream('/output/directory/bundle.js')) ``` Through the API, browserify-dynamic-import can also be used together with [factor-bundle](https://github.com/browserify/factor-bundle). Listen for the `factor.pipeline` event and unshift a dynamic import stream to the `'pack'` label: ```js b.plugin(dynamicImport, { dir: '/output/directory' }) b.on('factor.pipeline', function (file, pipeline) { var stream = dynamicImport.createStream(b, { dir: '/output/directory' }) pipeline.get('pack').unshift(stream) }) ``` 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: ```js function outname (entry) { return 'bundle.' + entry.index + '.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. ```js var crypto = require('crypto') var to = require('flush-write-stream') b.plugin(dynamicImport, { output: function (bundleName) { var stream = fs.createWriteStream('/tmp/' + bundleName) var hash = crypto.createHash('sha1') return to(onwrite, onend) function onwrite (chunk, enc, cb) { hash.update(chunk) stream.write(chunk, cb) } function onend (cb) { stream.end() var name = hash.digest('hex').slice(0, 10) + '.js' this.emit('name', name) fs.rename('/tmp/' + bundleName, './' + name, cb) } } }) ``` #### `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](https://github.com/browserify/labeled-stream-splicer) with labels: - `'pack'` - [browser-pack](https://github.com/browserify/browser-pack) - `'wrap'` - apply final wrapping ## License [MIT](LICENSE.md) --- _Source: https://npm.io/package/browserify-dynamic-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._