Dynamic Imports

info

We’re currently making rapid changes to the product so our docs may be out of date. If you need help, please email yo@forem.com.

Dynamic imports are supported in all major browsers except for Edge (EdgeHTML version) and Internet Explorer which are both unsupported browsers for Forem. They allow you to import JavaScript dynamically instead of statically. Why is this important? Performance.

Should you use them everywhere? No. They are a great tool when you need to load a JavaScript module on the fly for functionality that is not needed immediately for the page to be usable.

Here are a couple of examples of dynamic import usage on Forem:

• The Onboarding flow.
• In homepage (followed tags).

Forem uses webpacker, so what webpack will do is create separate bundles for code that is dynamically imported. So not only do we end up loading code only when we need it, we also end up with smaller bundle sizes in the frontend.

For a great deep dive into dynamic imports, there is a great article from community member @goenning about dynamic import usage, How we reduced our initial JS/CSS size by 67%.