Code splitting
Code Splitting is required if you want to make your "home" bundle as lightweight as possible. A framework must set up accordingly. FuseBox offers great functionality to loading split bundles without any configuration or/nor magical commments
Splitting is universal, meaning that you can lazy load them on a server (nodejs) as well.
You can find an example project here
Basics
FuseBox does as much as possible to automate the process.
Physical code splitting (when the bundles are actually created) works ONLY in Quantum. For development purposes your split bundles will be present in the master bundle BY DESIGN
Just use dynamic import
statement! It's that simple, FuseBox will do the heavy
lifting for you
import("./routes/about/AboutComponent");
Development version will be left untouched, however, when you will run it
against Quantum, it will create a file 167ae727.js
which will contain all
dependencies that do not cross with the project and/or other bundles. e.g if you
are using moment
library only in that bundle the entire module will be moved
to 167ae727.js
FuseBox will detect which modules and files are shared and which belong only to this specific bundle. Long story short - let FuseBox take care of that.
Splitting packages
You can also split packages
const moment = await import("moment");
If moment wasn't used anywhere directly (synchronously) it will be split into a different bundle and lazy loaded for you. Just like that. No configuration required
Named bundles
Instead of importing by path, you can import by path for your convenience.
fuse
.bundle("app")
.split("named_bundle", "routes/entryPointWithoutOpeningDot.tsx");
const namedBundle = await import("named_bundle");
Configuring
You may need to configure how FuseBox resolves your bundles.
browser
key will help FuseBox to resolve your bundles in browser, and server
on server accordingly. dest
customises the output: it's consistent with our
output
configuration:
const fuse = FuseBox.init({
homeDir: "src",
output: "dist/$name.js",
});
fuse
.bundle("app")
.splitConfig({
browser: "/static/bundles/",
server: "dist/static/bundles/",
dest: "bundles/",
})
.instructions(`> [app.tsx]`);
fuse.run();
The bundle mapping path for browser/server can be dynamically resolved at runtime using the Quantum option Runtime Bundle Mapping