{"id":20754506,"url":"https://github.com/atlassian-labs/inline-require-webpack-plugin","last_synced_at":"2025-04-28T16:29:12.283Z","repository":{"id":38331352,"uuid":"449541060","full_name":"atlassian-labs/inline-require-webpack-plugin","owner":"atlassian-labs","description":"Optimise generated bundles by inline requiring ES modules, without CommonJS deoptimisations","archived":false,"fork":false,"pushed_at":"2022-06-06T21:25:14.000Z","size":622,"stargazers_count":7,"open_issues_count":4,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-24T09:05:22.220Z","etag":null,"topics":["webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atlassian-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-19T04:02:30.000Z","updated_at":"2024-12-19T10:32:25.000Z","dependencies_parsed_at":"2022-09-17T02:23:02.262Z","dependency_job_id":null,"html_url":"https://github.com/atlassian-labs/inline-require-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Finline-require-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Finline-require-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Finline-require-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Finline-require-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atlassian-labs","download_url":"https://codeload.github.com/atlassian-labs/inline-require-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251345391,"owners_count":21574704,"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":["webpack","webpack-plugin"],"created_at":"2024-11-17T09:18:05.747Z","updated_at":"2025-04-28T16:29:12.256Z","avatar_url":"https://github.com/atlassian-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003einline-require-webpack-plugin\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/inline-require-webpack-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/inline-require-webpack-plugin.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache%202.0-blue.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"CONTRIBUTING.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis plugin enables an advanced runtime performance optimisation where evaluation cost of a module dependencies is shifted from the module initialisation phase to where each dependency is consumed.\n\nThis technique has been successfully leveraged by other bundlers ([eg FB Metro](https://reactnative.dev/docs/ram-bundles-inline-requires)) and proved to be quite effective on large applications, especially on 2-4 CPUs clients (with TTI improvements up to 400ms on P90).\n\nIt is an alternative to feeding Webpack with CommonJS modules and introducing a Babel plugin like `@babel/plugin-transform-modules-commonjs`.\nThe main advantage is that Webpack is not aware of this optimisation while processing the source code, so all ESM benefits (eg treeshaking) and other plugins optimisations are not affected.\n\nCompatible with Webpack v4.41+ and v5.24+\n\n## Usage\n\nAfter installing it via\n\n```\nnpm i -D inline-require-webpack-plugin\n```\n\nImport the plugin and add it to Webpack config `plugins` array\n\n```js\nconst { InlineRequireWebpackPlugin } = require('inline-require-webpack-plugin');\n// ...\nmodule.exports = {\n  // ... webpack config\n  plugins: [\n    // ... all other plugins\n    new InlineRequireWebpackPlugin()\n  ];\n}\n```\n\n### Support for ConcatenatedModule plugin\n\nIf your configuration has `optimization.concatenateModules` enabled (defaults to `true` on prod builds), then you need to use `patch-package` to patch Webpack `ConcatenatedModulePlugin` in order to safely replace variables that map to imported modules.\n\nYou can find Webpack patches in `/patches`, grabbing the version relevant to your Webpack version (v4 or v5).\n\n## Documentation\n\n### From ESM top level requires to CommonJS-like inline requires\n\nWhen Inline Require Plugin gets added to the Webpack config, it transforms such output before it get passed to the minification phase, manipulating it so that such top level requires are moved to their usage location.\nAs an example, this how Webpack outputs ES modules normally:\n\n```js\nvar React = __webpack_require__('react')['default'];\nvar DragDropContext = __webpack_require__('react-beautiful-dnd')['DragDropContext'];\nvar MyComponent = __webpack_require__('./my-component')['default'];\nvar useOnDragEnd = __webpack_require__('./my-hooks')['onDragEnd'];\n\nconst MyApp = () =\u003e {\n  const onDragEnd = useOnDragEnd();\n  return React.createElement(DragDropContext, { onDragEnd }, React.createElement(MyComponent));\n};\n__webpack_exports__['MyApp'] = MyApp;\n```\n\nAfter adding `InlineRequireWebpackPlugin` the output will be:\n\n```js\nvar React = __webpack_require__('react')['default'];\n// import 'react-beautiful-dnd'\n// import './my-component'\n// import './my-hooks'\n\nconst MyApp = () =\u003e {\n  const onDragEnd = __webpack_require__('./my-hooks')['onDragEnd']();\n  return React.createElement(\n    __webpack_require__('react-beautiful-dnd')['DragDropContext'],\n    { onDragEnd },\n    React.createElement(__webpack_require__('./my-component')['default'])\n  );\n};\n__webpack_exports__['MyApp'] = MyApp;\n```\n\n### Quirks of inline requires\n\nSuch optimisation is not without risks. Indeed, if applied to everything, it does break ESM side effects. Given the output will evaluate imports only when needed, if some module requires a side effect to be triggered, then it might run too late and cause errors. Because of this risk, the plugin only optimises 3rd party dependencies that have explicit `sideEffect: false` in their `package.json`, but still aggressively applies it for all project files (as leveraging side effects is a bad pattern that should be avoided anyway).\n\n## Development and testing\n\nThe test suite is powered by Jest and will run for both Webpack v4 and v5 thanks to npm aliases, and is accessible via\n\n```\nnpm run test\n```\n\n## Contributions\n\nContributions to inline-require-webpack-plugin are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## Thanks\n\nBig shout-out to @shuhei for his [inline-requires-webpack-plugin](https://github.com/shuhei/inline-requires-webpack-plugin), which demonstrated a similar plugin was possible.\n\n## License\n\nCopyright (c) 2022 Atlassian and others.\nApache 2.0 licensed, see [LICENSE](LICENSE) file.\n\n\u003cbr/\u003e\n\n[![With ❤️ from Atlassian](https://raw.githubusercontent.com/atlassian-internal/oss-assets/master/banner-with-thanks.png)](https://www.atlassian.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassian-labs%2Finline-require-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatlassian-labs%2Finline-require-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassian-labs%2Finline-require-webpack-plugin/lists"}