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.

UI/UX Design by

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

• We have another card: Webpack: How to split your bundles
• Webpack documentation: Code Splitting Show archive.org snapshot
• Unpoly: Loading large libraries on-demand