Webpack allows splitting your code into multiple smaller bundles - so called chunks - which can be loaded as soon as the code is required (see https://v4.webpack.js.org/guides/code-splitting/). Code that should not be included with the main bundle needs to be loaded using the dynamic module import. Assuming you have the following code:

import banners from "./banners";
import videoIntegration from "./videoIntegration";

banners.init();
videoIntegration.init();

Let's say your website always has banners but only a few pages actually have videos. In this case you can use code splitting to only load the JavaScript code that initializes videos if there is a video on the current page:

import banners from "./banners";

banners.init();

if (document.querySelector("video")) {
  import("./videoIntegration").then(videoIntegration => {
    videoIntegration.init();
  });
}

While the static import statement is used to load the banners, the new dynamic import can be used like a function which returns a Promise (see https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise). This promise is fulfilled after the module has been loaded asynchronously. You can find more information about how to use import here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.

Using dynamic imports reduces the actual code that needs to be loaded for pages that do not have videos. Usually Webpack bundles all JavaScript code used on your page into a big chunk that needs to be loaded before that page can finish loading. The videoIntegration code of the example will now be loaded asynchronously and only on demand. For this, Webpack will now create an additional chunk containing only the code for the videoIntegration (and its dependencies if they are not required by the rest of your JavaScript code).

In order to work with the CoreMedia link building we will generate a mapping for every chunk so the correct link to the corresponding code resource is being used. This is needed to keep our different development round trips working. The mapping is loaded before any other JavaScript of the theme is being loaded and defaults to js/chunkPathById.js. You can customize the path in your theme configuration using buildConfig.chunkMappingPath.

Note

In case you want to support older browsers like the Internet Explorer 11 you need to add a corresponding Promise polyfill to your code. We suggest adding the polyfill to every module that uses a dynamic module import.

For Section 6.3.7, “MediaElement” we already make use of dynamic imports and use the package promise-polyfill.