Skip to content

use code splitting to speed up initial page load

Administrator requested to merge code-splitting into master

Created by: sqs

Uses the react-router code splitting technique to reduce the initial bundle size by ~50%. This is intended to make the initial page load faster for users. (It is possible that it makes it slower in some cases because the client now needs to load multiple JS files, possibly in serial. In most cases, we expect there to be a net benefit.)

As a secondary benefit, it speeds up the initial bundle compilation time in local development.

Codemod for one-time migration of static imports to React.lazy imports, change import to ximport and run:

codemod --extensions tsx -d web/src "ximport \{([^}]+)\} from ('[^']+')" 'const \1 = React.lazy(async () => ({ default: (await import(\2)).\1 }))'

Merge request reports