In this article, you'll learn how to improve site performance with code splitting using dynamic imports.
Component based code splitting
The easiest way to do code splitting in commercetools Frontend is the per-component basis, where you lazy load components that aren't required on the initial page load. For example, the
<Cart /> component is only needed for the cart page and can be lazy-loaded. You can lazy-load tastics while registering them in the
frontend/frontastic/tastics/index.tsx as shown below
<Cart /> component as shown below.
Another way to do code splitting is to lazy load parts of your React component, as shown below.