React-Native Code Splitting

Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports features

Features & Solve issue

• DllThe split 820KB + common code (react、react-native) can be built into the App, similar to the Webpack DLLPlugin
• Dynamic Importsissue

Compatibility with Metro versions

• dependencies react-native -> @react-native-community/cli -> metro

• metro-code-split -> metro

  metro version	metro-code-split version
  0.64.0 - 0.66.2	0.1.x

How to use it?

1. Install the package that matches the Metro version

npmimetro-code-split-D|yarnaddmetro-code-split-D

2. Add the scripts in package.json

"scripts": {"start": "mcs-scripts start -p 8081","build:dllJson": "mcs-scripts build -t dllJson -od public/dll","build:dll": "mcs-scripts build -t dll -od public/dll","build": "mcs-scripts build -t busine -e index.js"}

• More command details

npxmcs-scripts--help

3. Modify the metro.config.js

constMcs=require('metro-code-split')constmcs=newMcs({output: {publicPath: 'https://a.cdn.com/a-rn-project',},dll: {entry: ['react-native','react'],// which three - party library into dllreferenceDir: './public/dll',// the JSON address to reference for the build DLL file, also the npm run build:dllJson output directory},dynamicImports: {},// DynamicImports can also be set to false to disable this feature if it is not required})constbusineConfig={transformer: {getTransformOptions: async()=>({transform: {experimentalImportSupport: false,inlineRequires: true,},}),},}module.exports=process.env.NODE_ENV==='production' ? mcs.mergeTo(busineConfig) : busineConfig

• Mcs DefaultOptions

4. Execute the command

npmrun build:dllJson// build the reference json file for the Dllnpmrun build:dll// build the Dll file (the generated Dll file is usually built into the APP)npmrunbuild// build busine code

Custom logic

• Mcs options provides plugins. You can write plugins in the Mcs as if you were writing Webpack plugins

  hooks	type	parameter
  beforeInit	SyncHook	['bundleOutputInfos']
  beforeCheck	SyncHook	['freezeFields']
  afterCheck	SyncHook	['freezeFields']
  beforeCustomSerializer	SyncBailHook	['entryPoint', 'prepend', 'graph', 'bundleOptions']
  beforeOutputChunk	SyncHook	['chunkInfo']
  afterCustomSerializer	SyncHook	['bundle']

Attention to issue

• This package is only used in production environments! (There are currently no plans to be compatible with development)

• The add scripts are equivalent to The following (The main purpose is to optimize the build:dllJsonbuild:dll long instructions, if you intend to provide commands using React-Native, be sure to add NODE_ENV=xxx)

  "scripts": {"start": "NODE_ENV=production react-native start --port 8081","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 & 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","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 & 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","build": "NODE_ENV=production react-native bundle --platform ios --entry-file index.js --bundle-output dist/buz.ios.bundle --dev false & NODE_ENV=production react-native bundle --platform android --entry-file index.js --bundle-output dist/buz.android.bundle --dev false"}

Rendering

Example

TODO

• source map support
• ts refactor