{"id":27771432,"url":"https://github.com/wuba/metro-code-split","last_synced_at":"2026-03-02T08:02:15.902Z","repository":{"id":37662851,"uuid":"379254969","full_name":"wuba/metro-code-split","owner":"wuba","description":"Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features","archived":false,"fork":false,"pushed_at":"2022-08-05T09:24:06.000Z","size":9716,"stargazers_count":221,"open_issues_count":11,"forks_count":21,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-25T13:58:34.454Z","etag":null,"topics":["metro","react-native"],"latest_commit_sha":null,"homepage":"","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/wuba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-22T12:04:37.000Z","updated_at":"2025-10-10T13:58:11.000Z","dependencies_parsed_at":"2022-07-15T21:48:09.494Z","dependency_job_id":null,"html_url":"https://github.com/wuba/metro-code-split","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/wuba/metro-code-split","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Fmetro-code-split","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Fmetro-code-split/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Fmetro-code-split/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Fmetro-code-split/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wuba","download_url":"https://codeload.github.com/wuba/metro-code-split/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuba%2Fmetro-code-split/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29995910,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["metro","react-native"],"created_at":"2025-04-29T22:39:33.974Z","updated_at":"2026-03-02T08:02:10.880Z","avatar_url":"https://github.com/wuba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Native Code Splitting\n\nFurther split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features\n\n## Features \u0026 Solve issue\n\n- `Dll` **The split 820KB + common code (react、react-native) can be built into the App, similar to the Webpack DLLPlugin**\n- `Dynamic Imports` [**issue**](https://github.com/facebook/metro/issues/52)\n\n## Compatibility with Metro versions\n\n- dependencies react-native -\u003e @react-native-community/cli -\u003e metro\n- metro-code-split -\u003e metro\n\n  | metro version | metro-code-split version |\n  | :-----------: | :----------------------: |\n  | 0.64.0 - 0.66.2 | 0.1.x |\n\n## How to use it?\n\n1. Install the package that matches the Metro version\n\n```ts\n  npm i metro-code-split -D | yarn add metro-code-split -D\n```\n\n2. Add the scripts in package.json\n\n```ts\n  \"scripts\": {\n    \"start\": \"mcs-scripts start -p 8081\",\n    \"build:dllJson\": \"mcs-scripts build -t dllJson -od public/dll\",\n    \"build:dll\": \"mcs-scripts build -t dll -od public/dll\",\n    \"build\": \"mcs-scripts build -t busine -e index.js\"\n  }\n```\n\n- More command details\n\n```ts\n  npx mcs-scripts --help\n```\n\n3. Modify the metro.config.js\n\n```ts\n  const Mcs = require('metro-code-split')\n\n  const mcs = new Mcs({\n    output: {\n      publicPath: 'https://a.cdn.com/a-rn-project',\n    },\n    dll: {\n      entry: ['react-native', 'react'], // which three - party library into dll\n      referenceDir: './public/dll', // the JSON address to reference for the build DLL file, also the npm run build:dllJson output directory\n    },\n    dynamicImports: {}, // DynamicImports can also be set to false to disable this feature if it is not required\n  })\n\n  const busineConfig = {\n    transformer: {\n      getTransformOptions: async () =\u003e ({\n        transform: {\n          experimentalImportSupport: false,\n          inlineRequires: true,\n        },\n      }),\n    },\n  }\n\n  module.exports = process.env.NODE_ENV === 'production' ? mcs.mergeTo(busineConfig) : busineConfig\n```\n\n- [Mcs DefaultOptions](./src/index.js)\n\n4. Execute the command\n\n```ts\n  npm run build:dllJson // build the reference json file for the Dll\n  npm run build:dll // build the Dll file (the generated Dll file is usually built into the APP)\n  npm run build // build busine code\n```\n\n## Custom logic\n\n- Mcs options provides plugins. You can write plugins in the Mcs as if you were writing Webpack plugins\n\n  |         hooks          |     type     |                      parameter                      |\n  | :--------------------: | :----------: | :-------------------------------------------------: |\n  |       beforeInit       |   SyncHook   |                ['bundleOutputInfos']                |\n  |      beforeCheck       |   SyncHook   |                  ['freezeFields']                   |\n  |       afterCheck       |   SyncHook   |                  ['freezeFields']                   |\n  | beforeCustomSerializer | SyncBailHook | ['entryPoint', 'prepend', 'graph', 'bundleOptions'] |\n  |   beforeOutputChunk    |   SyncHook   |                    ['chunkInfo']                    |\n  | afterCustomSerializer  |   SyncHook   |                     ['bundle']                      |\n\n## Attention to issue\n\n- This package is only used in `production` environments! (There are currently no plans to be compatible with `development`)\n\n- The add scripts are equivalent to The following (The main purpose is to optimize the `build:dllJson` `build:dll` long instructions, if you intend to provide commands using React-Native, be sure to add `NODE_ENV=xxx`)\n  ```ts\n    \"scripts\": {\n      \"start\": \"NODE_ENV=production react-native start --port 8081\",\n      \"build:dllJson\": \"NODE_ENV=production react-native bundle --platform ios --entry-file node_modules/.cache/metro-code-split/dll-entry.js --bundle-output public/dll/_dll.ios.json --dev false \u0026 NODE_ENV=production react-native bundle --platform android --entry-file node_modules/.cache/metro-code-split/dll-entry.js --bundle-output public/dll/_dll.android.json --dev false\",\n      \"build:dll\": \"NODE_ENV=production react-native bundle --platform ios --entry-file node_modules/.cache/metro-code-split/dll-entry.js --bundle-output public/dll/_dll.ios.bundle --dev false \u0026 NODE_ENV=production react-native bundle --platform android --entry-file node_modules/.cache/metro-code-split/dll-entry.js --bundle-output public/dll/_dll.android.bundle --dev false\",\n      \"build\": \"NODE_ENV=production react-native bundle --platform ios --entry-file index.js --bundle-output dist/buz.ios.bundle --dev false \u0026 NODE_ENV=production react-native bundle --platform android --entry-file index.js --bundle-output dist/buz.android.bundle --dev false\"\n    }\n  ```\n\n## Rendering\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./Example/ReadmeInfo/effect.gif\" alt=\"rendering\" width=\"70%\"/\u003e\n\u003c/div\u003e\n\n## [Example](./Example/)\n\n## TODO\n\n- source map support\n- ts refactor\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwuba%2Fmetro-code-split","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwuba%2Fmetro-code-split","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwuba%2Fmetro-code-split/lists"}