Dynamic import

In compliance with es6 proposal-dynamic-import and Typescript 2.4 dynamic imports FuseBox supports import statement.

On of the standard functionality, FuseBox offers much more. Quantum supports all the features listed below.

Note

In order to use dynamic imports, add experimentalFeatures : true to the config. The option will be removed with the next major release

Loading JSON

JSON files can be loaded asynchronously

import("./target.json").then(target => {
    console.log(target);
})

Loading support

API Type Target Support
FuseBox Original universal (always on) yes
Quantum browser yes
Quantum universal yes
Quantum server yes

Working example

Clone the repository

git clone https://github.com/fuse-box/fuse-box-examples
cd examples/dynamic_import_json

Run with Original API

node fuse

Try with Quantum

node fuse dist

Tests are available here

Loading CSS

CSS files can be loaded asynchronously

import("./target.css")

Loading support

API Type Target Support
FuseBox Original browser yes
FuseBox Original server yes (resolves nothing)
Quantum browser yes
Quantum universal yes
Quantum server yes (resolves nothing)

Tests are available here

Working example

Clone the repository

git clone https://github.com/fuse-box/fuse-box-examples
cd examples/dynamic_import_css

Run with Original API

node fuse

Try with Quantum

node fuse dist

Loading anything else

Any other files can be loaded asynchronously too

import("./target.txt").then(() => {})

Loading support

API Type Target Support
FuseBox Original browser yes
FuseBox Original server yes (with {extendServerImport : true})
Quantum browser yes
Quantum universal yes
Quantum server yes (resolves a string with {extendServerImport : true})

Loading remote javascript file (from CDN)

You can load a remote javascript file from CDN (it must support CORS if you want to load it in the browser), for example

import("https://unpkg.com/moment@2.19.1/moment.js").then(moment => {
    console.log(moment().format('LLLL'));
});

Loading support

API Type Target Support
FuseBox Original browser yes
FuseBox Original server yes
Quantum browser yes
Quantum universal yes
Quantum server yes (with {extendServerImport : true})

Working example

Clone the repository

git clone https://github.com/fuse-box/fuse-box-examples
cd examples/dynamic_import_any

Run with Original API

node fuse

Try with Quantum

node fuse dist

Tests are available here

Loading split bundle

Split bundles can be retrieved by name or by referencing an actual module

Note

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

Define the config first

.split("routes/home/**", "home > routes/home/HomeComponent.ts")
.split("routes/about/**", "about > routes/about/AboutComponent.ts")

Load by a reference and keep you typings in place. FuseBox will automatically map it to the bundle "home". No "magical" comments no extra headache. FuseBox understands when you are referring to an entry point that should be split

const aboutModule = await import("./routes/about/AboutComponent");
console.log(new aboutModule.AboutComponent());

Load by name - that's if you are not a fan of typescript and prefer plain javascript

const aboutModule = await import("about");
console.log(new aboutModule.AboutComponent());

Loading support

API Type Target Support
FuseBox Original browser yes (faked - no physical splitting)
FuseBox Original server yes (faked - no physical splitting)
Quantum browser yes
Quantum universal yes
Quantum server yes

More information on code splitting is available here

Working example

Clone the repository

git clone https://github.com/fuse-box/fuse-box-examples
cd examples/code-splitting

Run with Original API

node fuse

Try with Quantum

node fuse dist

Tests are available here