Dynamic imports

Instead of statically importing code, dynamic imports allow you to import parts of your code on demand on the client. This way everything isn't added to a single bundle.

This exists in vanilla [[js]] through the import() expression, which returns a promise. https://javascript.info/modules-dynamic-imports

import(modulePath).then(obj => obj);

This can be achieved in other ways depending on your tooling. [[nextjs]] has a custom way, there's also [[reactsuspense]], SystemJS, etc.

Dynamic imports can be used as an indicator for your bundler to apply [[code splitting]].

[[20220628012715-import-maps]]

[[buildtooling]] [[deployment]] [[js]] [[performance]] [[rendering]] [[web]] [[webpack]]