React-Native Code Splitting

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

effect

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.0 0.1.x

How to use it?

  1. Install the package that matches the Metro version
  npm i metro-code-split -D | yarn add metro-code-split -D
  1. 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
  1. 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
  1. 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

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: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"
  }

GitHub

https://github.com/wuba/metro-code-split