Challenge 2 / 2

Your colleague worked hard to create a carousel Stimulus controller that swaps product images. Now it's on production, but you noticed that the controller is being downloaded on every page... but it's only needed on certain pages. Because this controller imports a large 3rd-party package, you'd like to load that package only when it's needed. Your colleague is on vacation (see note) What can you do to only load this code when it's needed?

Note: It's a well-deserved vacation to eat chocolate and go skiing in the Swiss Alps 🎿. Lucky them!

// assets/controllers/carousel_controller.js

/* @stimulusControllerLazy */
export default class extends Controller {
    async connect() {
        const largePackage = await import('large-package');
    }
}

// assets/controllers/carousel_controller.js
import 'large-package';

/* fetch: 'lazy' */
export default class extends Controller {
    // Super cool carousel implementation...
}

Create a new "entrypoint" in AssetMapper, register the controller only in that entrypoint, then load the entrypoint only on the pages needed:

{{ importmap('app', 'custom-entrypoint') }}

// assets/controllers/carousel_controller.js
import 'large-package';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    // Super cool carousel implementation...
}

Rewatch the video