Dynamic imports: Speeding up the initial loading time of WebAssembly Studio

Olle Lauri Boström
Aug 2, 2018 · 3 min read
WebAssembly.Studio

Loading large dependencies

1. User visits http://webassembly.studio
2. Load the whole Monaco Editor dependency
3. Render the UI
4. Register language support

Dynamic imports

// The old wayimport moduleA from "moduleA";
import moduleB from "moduleB";
function doStuff(condition) {
if (condition) {
moduleA.doStuff();
} else {
moduleB.doStuff();
}
}
// The new wayasync function doStuff(condition) {
if (condition) {
const module = await import("moduleA");
module.doStuff();
} else {
const module = await import("moduleB");
module.doStuff();
}
}

Speeding up the initial page load

How about your dependencies?

Tools for investigating

Olle Lauri Boström

Written by

Google Summer of Code 2018 @ WebAssembly Studio - github.com/ollelauribostrom

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade