Read more

Webpacker: Loading code on demand

Avatar
Henning Koch
April 22, 2021Software engineer at makandra GmbH

Sometimes you want to load code on demand. For instance, when a a large library is only used on a single screen, this library should only be loaded for that screen. It should not blow up the bundle size for all screens.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

You can load code on demand by using import() as a function (with parentheses) instead of using it as a keyword import (without parentheses). The import() function returns a promise with the exported variables:

let exports = await import('large-library')

console.log("A named export is ", exports.exportedName)
console.log("Default export is ", exports.default)

Webpack will build a new .js file for the code that is loaded on-demand:

public/
  packs/
    application-b1762adc0d6538318dec.js  # your pack
    0-d15ee844981f2f70c164.chunk.js      # the dynamically generated chunk

Note that the chunk is created automatically by Webpack. You don't need to manually create a new pack.

Because the chunk is loaded into an existing Webpack environment, it contains less boilerplate (for the Webpack module registry etc.) than a pack.

Learn more

Posted by Henning Koch to makandra dev (2021-04-22 09:32)