how to use code splitting the right way

[chj-damon]

in web projects, we can generate chunks based on route, in react-native projects, we use react-navigation for example, How can I generate different chunks based on that?

I read the webpack.config.js， the entry is just:

  /**   * `getInitializationEntries` will return necessary entries with setup and initialization code.   * If you don't want to use Hot Module Replacement, set `hmr` option to `false`. By default,   * HMR will be enabled in development mode.   */  
entry: [    
    ...ReactNative.getInitializationEntries(reactNativePath, {      
        hmr: devServer.hmr,    
    }),    
    entry,  
],

[zamotany]

The easiest way is to do it in code. I'm not sure what do you mean generate chunks based on route exactly but if you're using react-navigation you should be able to do something like this:

// MyScreen.js
function MyScreen() {
  // ...
}

// somewhere
const MyScreen = React.lazy(() => import('./MyScreen.js'));

<Stack.Navigator>
  <Stack.Screen name="MY_SCREEN" component={MyScreen} />
</Stack.Navigator>

[chj-damon]

Thanks, that's exactly what I want to know.

[zamotany]

Cool, keep in mind that by default the chunks generated that way are remote chunks so you will need to use ChunkManager to load them or you can make them local chunks:

• for remote: https://re-pack.netlify.app/docs/api/react-native/classes/ChunkManager
• for local: https://re-pack.netlify.app/docs/api/node/interfaces/OutputPluginConfig#localchunks

[Ha0ran2001]

What about just use webpack's code splitting way https://webpack.js.org/guides/code-splitting/#entry-points