{"id":15394979,"url":"https://github.com/goto-bus-stop/split-require","last_synced_at":"2025-04-13T12:25:24.540Z","repository":{"id":52414413,"uuid":"103741445","full_name":"goto-bus-stop/split-require","owner":"goto-bus-stop","description":"commonjs-first bundle splitting, for browserify","archived":false,"fork":false,"pushed_at":"2021-04-29T21:12:06.000Z","size":203,"stargazers_count":82,"open_issues_count":11,"forks_count":8,"subscribers_count":4,"default_branch":"default","last_synced_at":"2024-10-24T16:23:04.845Z","etag":null,"topics":["browserify","browserify-plugin","bundle-splitting"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/split-require","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/goto-bus-stop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-16T09:37:38.000Z","updated_at":"2024-07-27T08:33:56.000Z","dependencies_parsed_at":"2022-08-23T19:01:03.036Z","dependency_job_id":null,"html_url":"https://github.com/goto-bus-stop/split-require","commit_stats":null,"previous_names":["goto-bus-stop/browserify-dynamic-import"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goto-bus-stop%2Fsplit-require","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goto-bus-stop%2Fsplit-require/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goto-bus-stop%2Fsplit-require/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goto-bus-stop%2Fsplit-require/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goto-bus-stop","download_url":"https://codeload.github.com/goto-bus-stop/split-require/tar.gz/refs/heads/default","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245366143,"owners_count":20603439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browserify","browserify-plugin","bundle-splitting"],"created_at":"2024-10-01T15:25:12.340Z","updated_at":"2025-03-29T08:31:34.395Z","avatar_url":"https://github.com/goto-bus-stop.png","language":"JavaScript","readme":"# split-require\n\nBundle splitting for CommonJS and ES modules (dynamic `import()`) in browserify\n\nLazy load the parts of your app that are not immediately used, to make the\ninitial load faster.\n\nThis module works without a compile step on the server, and in the browser with\nthe browserify plugin.\n\n\u003e NOTE: split-require v3+ works with browserify 16 and newer. If you are using\n\u003e an older browserify version and can't upgrade, use split-require v2.\n\n[What?](#what) -\n[Install](#install) -\n[Usage](#usage) -\n[Plugin CLI](#browserify-plugin-cli-usage) -\n[Plugin API](#browserify-plugin-api-usage) -\n[License: MIT](#license)\n\n[![stability][stability-image]][stability-url]\n[![travis][travis-image]][travis-url]\n[![standard][standard-image]][standard-url]\n\n[stability-image]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\n[stability-url]: https://nodejs.org/api/documentation.html#documentation_stability_index\n[travis-image]: https://img.shields.io/travis/goto-bus-stop/split-require.svg?style=flat-square\n[travis-url]: https://travis-ci.org/goto-bus-stop/split-require\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard-url]: http://npm.im/standard\n\n## What?\n\nThis plugin takes source files with `splitRequire()` calls like:\n\n```js\nvar html = require('choo/html')\nvar app = require('choo')()\nvar splitRequire = require('split-require')\n\napp.route('/', mainView)\napp.mount('body')\n\nvar component\nfunction mainView () {\n  return html`\u003cbody\u003e\n    ${component ? component.render() : html`\n      \u003ch1\u003eLoading\u003c/h1\u003e\n    `}\n  \u003c/body\u003e`\n}\n\nsplitRequire('./SomeComponent', function (err, SomeComponent) {\n  component = new SomeComponent()\n  app.emitter.emit('render')\n})\n```\n\nAnd splits off `splitRequire()`d files into their own bundles, that will be\ndynamically loaded at runtime.\nIn this case, a main bundle would be created including `choo`, `choo/html` and\nthe above file, and a second bundle would be created for the `SomeComponent.js`\nfile and its dependencies.\n\n## Install\n\n```\nnpm install split-require\n```\n\n## Usage\n\nUse the `split-require` function for modules that should be split off into a separate bundle.\n\n```js\nvar splitRequire = require('split-require')\n\nrequire('./something') // loaded immediately\nsplitRequire('./other', function () {}) // loaded async\n```\n\nThis works out of the box in Node.js.\nAdd the browserify plugin as described below in order to make it work in the browser, too.\n\n### `import()`\n\nYou can use `split-require` with ES modules `import()` syntax using the\n[Babel plugin](https://github.com/goto-bus-stop/babel-plugin-dynamic-import-split-require).\n\n```bash\nbrowserify app.js \\\n  -t [ babelify --plugins dynamic-import-split-require ] \\\n  -p split-require\n```\n```js\nimport('./SomeComponent').then(function (SomeComponent) {\n  // Works!\n  console.log(SomeComponent)\n})\n```\n\n\u003e ! Note that this transform is not 100% spec compliant.\n\u003e `import()` is an ES modules feature, not a CommonJS one.\n\u003e In CommonJS with this plugin, the exports object is the value of the\n\u003e `module.exports` of the imported module, so it may well be a function or some\n\u003e other non-object value. In ES modules, the exports object in `.then()` will\n\u003e always be an object, with a `.default` property for default exports and other\n\u003e properties for named exports. You'd never get a function back in `.then()` in\n\u003e native ES modules.\n\n## Browserify Plugin CLI Usage\n\n```bash\nbrowserify ./entry -p [ split-require --out /output/directory ]\n  \u003e /output/directory/bundle.js\n```\n\n### Options\n\n#### `--out`\n\nSet the output for dynamic bundles. Use a folder path to place dynamic bundles\nin that folder. You can also use [`outpipe`](https://github.com/substack/outpipe)\nsyntax: in that case use `%f` in place of the bundle name. For example:\n\n```bash\n-p [ split-require --out 'uglifyjs \u003e /output/directory/%f' ]\n```\n\nThe default is `./`, outputting in the current working directory.\n\n### `--public`\n\nPublic path to load dynamic bundles from.\nDefaults to `./`, so dynamic bundle #1 is loaded as `./bundle.1.js`.\n\n### `--sri`\n\nHash algorithm to use for subresource integrity. By default, subresource\nintegrity is not used.\n\nWhen enabled, the runtime loader will add `crossorigin` and `integrity`\nattributes to dynamically loaded bundles.\n\nOne of `sha256`, `sha384`, `sha512`.\n\n## Browserify Plugin API Usage\n\n```js\nvar splitRequire = require('split-require')\n\nbrowserify('./entry')\n  .plugin(splitRequire, {\n    dir: '/output/directory'\n  })\n  .pipe(fs.createWriteStream('/output/directory/bundle.js'))\n```\n\n### With factor-bundle\n\nThrough the API, split-require can also be used together with\n[factor-bundle](https://github.com/browserify/factor-bundle). Listen for the\n`factor.pipeline` event, and unshift the result of the `createStream` function\nto the `'pack'` label:\n\n```js\nb.plugin(splitRequire, { dir: '/output/directory' })\nb.plugin(factorBundle, { /* opts */ })\n\nb.on('factor.pipeline', function (file, pipeline) {\n  var stream = splitRequire.createStream(b, {\n    dir: '/output/directory'\n  })\n  pipeline.get('pack').unshift(stream)\n})\n```\n\nNote that you must pass the options to the plugin _and_ the stream.\nOther plugins that generate multiple outputs may need a similar treatment.\n\n### Options\n\n#### `dir`\n\nSet the folder to output dynamic bundles to. Defaults to `./`.\nThis is only necessary if the `output()` option is not used.\n\n#### `filename(entry)`\n\nFunction that generates a name for a dynamic bundle.\nReceives the entry point row as the only parameter. The default is:\n\n```js\nfunction filename (entry) {\n  return 'bundle.' + entry.index + '.js'\n}\n```\n\n#### `output(bundleName)`\n\nFunction that should return a stream. The dynamic bundle will be written to the\nstream. `bundleName` is the generated name for the dynamic bundle.\nAt runtime, the main bundle will attempt to use this name to load the bundle,\nso it should be publically accessible under this name.\n\nThe `bundleName` can be changed by emitting a `name` event on the returned\nstream **before the stream finishes**. This is useful to generate a bundle name\nbased on a hash of the file contents, for example.\n\n```js\nvar fs = require('fs')\nvar crypto = require('crypto')\nvar to = require('flush-write-stream')\nb.plugin(splitRequire, {\n  output: function (bundleName) {\n    var stream = fs.createWriteStream('/tmp/' + bundleName)\n    var hash = crypto.createHash('sha1')\n    return to(onwrite, onend)\n\n    function onwrite (chunk, enc, cb) {\n      hash.update(chunk)\n      stream.write(chunk, cb)\n    }\n    function onend (cb) {\n      stream.end()\n      var name = hash.digest('hex').slice(0, 10) + '.js'\n      this.emit('name', name)\n      fs.rename('/tmp/' + bundleName, './' + name, cb)\n    }\n  }\n})\n```\n\n#### `public`\n\nPublic path to load dynamic bundles from.\nDefaults to `./`, so dynamic bundle #1 is loaded as `./bundle.1.js`.\n\n### `sri`\n\nHash algorithm to use for subresource integrity. By default, subresource\nintegrity is not used.\n\nWhen enabled, the runtime loader will add `crossorigin` and `integrity`\nattributes to dynamically loaded bundles.\n\nOne of `sha256`, `sha384`, `sha512`.\n\n### Events\n\n#### `b.on('split.pipeline', function (pipeline, entry, basename) {})`\n\n`split-require` emits an event on the browserify instance for each pipeline it\ncreates.\n\n`pipeline` is a [labeled-stream-splicer](https://github.com/browserify/labeled-stream-splicer) with labels:\n\n - `'pack'` - [browser-pack](https://github.com/browserify/browser-pack)\n - `'wrap'` - apply final wrapping\n\n`entry` is the browserify row object for the entry point of the dynamic bundle.\n`basename` is the name of the dynamic bundle file.\n\n## License\n\n[MIT](LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoto-bus-stop%2Fsplit-require","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoto-bus-stop%2Fsplit-require","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoto-bus-stop%2Fsplit-require/lists"}