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.

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

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