Does webpack code splitting work in react-native?

Question

I am using in a web application react-router .

When using import 'lodash' I import the whole lodash lib in my project.

Code splitting is about using an async import using import().then() to dynamically load chunk while the application is running.

Read about code splitting in react-router/web .

For example: function atRuntime() { import('lodash').then(() => {});}

This will import the library at runtime with an ajax request so it is not bundled in the main.js .

I'd like to recycle my code between web and native and we use a lot of code splitting for each page change.

My app has two main parts and some user will only visit one part so they don't need all user authenticated part.

I expect to be able to use tree shaking during react-native, but it is missing in react-router/native documentation.

What's react-native opinion about code splitting?

Answer 1

if you want to use webpack, you can try with haul https://github.com/callstack/haul

but i highly recommend this implementation without webpack -> https://www.npmjs.com/package/react-native-bundle-splitter