Dynamic, Conditional Imports

With ES Modules, you can natively import other JavaScript. Like confetti, duh:

import confetti from 'https://cdn.skypack.dev/canvas-confetti'; confetti();

That import statement is just gonna run. There is a pattern to do it conditionally though. It’s like this:

(async () => {   if (condition) {     // await import("stuff.js");      // Like confetti! Which you have to import this special way because the web     const { default: confetti } = await import(       "https://cdn.skypack.dev/canvas-confetti@latest"     );     confetti();   } })();

Why? Any sort of condition, I suppose. You could check the URL and only load certain things on certain pages. You could only be loading certain web components in certain conditions. I dunno. I’m sure you can think of a million things.

Responsible, conditional loading is another idea. Here’s only loading a module if saveData isn’t on:


The post Dynamic, Conditional Imports appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

Comments

comments

, ,