React Bundle Preloading
This project makes it possible to determine which Webpack bundles should be preloaded in the client.
We do this by recording which modules were dynamically imported during server render and using a pre-generated manifest to find the corresponding client bundles. This is still a work in progress
Why is this important?
Before and after
How this works
- babel-plugin-syntax-dynamic-import Allows Babel to compile dynamic imports.
- babel-plugin-import-inspector Informs our code at runtime when a dynamic import occurs.
- react-loadable Renders dynamically loaded components, using import-inspector to synchronously load dependencies for the server render.
- webpack-module-manifest-plugin Emits a list of modules that are packaged in server and client bundles.
- module-manifest-inspector Looks at the client and server manifest files and determines what client bundles will be needed based on the dynamic imports that happen on the server.