How to code split with Expo web (React Native Web)?

Question

Is there a recommended approach for code splitting in Expo web projects?

I cant find anything in the docs, even on the web performance page: https://docs.expo.io/guides/web-performance/

Im surprised as this something a lot (possibly most) web apps are going to want to do. If it's not officially supported is there a workaround?

It's seems amazing, ask question, answer to yourself, and accept own answer, would you like to tag somehow self grow questions? — Kyr, May 11 '20 at 20:08
@Kyr the purpose of this site is to provide the best answers. Im sorry, but from your answer I wasn't sure how use code splitting, or if it worked out the box or needed to be configured. If you can make your answer clearer then I'll accept it instead of my own. — Evanss, May 12 '20 at 07:13

score 1 · Answer 1 · answered May 06 '20 at 16:59

1

With @expo/webpack-config, mentioned in Presets section, it should.

According to this fragment in optimization addon it should supports SplitChunk, and according to outputs configuration it should supports Dynamic imports in production mode.

For example: building basic expo example project "with some tabs" will produce in web-build/static/js, something like this:

  736330 2.d0bdb3b4.chunk.js         // vendors modules  
    7979 app.cdd6a824.chunk.js       // application
    1540 runtime~app.34c76111.js     // runtime chunk

Building after applying dynamic import will produce something like:

  563269 2.dfc93353.chunk.js
  173256 3.3b8c575c.chunk.js
    5837 4.0ec37ce1.chunk.js
    2574 app.82916626.chunk.js
    2354 runtime~app.bd407466.js

It doesn’t look very optimal, but it seems to me that this is the code splitting as it is.

answered May 06 '20 at 16:59

Kyr

887
7
11

Can you share your webpack.config.js? – Evanss May 08 '20 at 15:41
@expo/webpack-config provide this one – Kyr May 08 '20 at 15:54
You say "after applying dynamic import", but how did you apply them? – Evanss May 12 '20 at 07:12
May I suggest that no so much way how you could implement dynamic import, I know the only one that actual: `import()`. I think that concrete implementation, or specific React components is not matters. – Kyr May 12 '20 at 10:21

Evanss · Accepted Answer · 2020-05-11T10:42:59.613

I think code splitting is supported out the box. Here is my text component:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Component from './component'

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Component />
    </View>
  );
}

Which produces this bundle in static/js/

2.1a79eeb8.chunk.js       198 KB
app.95f72b23.chunk.js     936 bytes
runtime~app.34c76111.js   2 KB

If I change my component import from this:

import Component from './component'

To use React.lazy:

const Component = React.lazy(() => import('./component'));

Then the resulting bundle is this:

2.025243cb.chunk.js       198 KB
3.6601a067.chunk.js       326 bytes
app.70989548.chunk.js     859 bytes
runtime~app.4aba9b3a.js   2 KB

For a more opinionated solution you could use NextJS with Expo: https://docs.expo.io/guides/using-nextjs/

How to code split with Expo web (React Native Web)?

2 Answers2

Linked