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?

Answer 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.