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

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

• 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

1. Install the package that matches the Metro version

 npm i metro-code-split -D | yarn add metro-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

 npx mcs-scripts --help

3. Modify the metro.config.js

 const Mcs = require('metro-code-split')
 const mcs = new Mcs({
 output: {
 publicPath: 'https://a.cdn.com/a-rn-project',
 },
 dll: {
 entry: ['react-native', 'react'], // which three - party library into dll
 referenceDir: './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
 })
 const busineConfig = {
 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

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

• 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']

• 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:dllJson build: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"
   }

• source map support
• ts refactor