Code Splitting

Overview

The React app is configured to make use of code splitting by default. When building the app for production, the code will be output in several chunks:

$ ls build/static/js
2.5b77f553.chunk.js
2.5b77f553.chunk.js.map
main.cff1a559.chunk.js
main.cff1a559.chunk.js.map
runtime~main.a8a9905a.js
runtime~main.a8a9905a.js.map

Loading chunks only when they are required can improve the app performance significantly.

Implementation

To get this feature to work with AEM, the app needs to be able to identify which JS and CSS files need to be requested from the HTML generated by AEM. This can be achieved using the "entrypoints" key in the asset-manifest.json file: The file is parsed in clientlib.config.js and only the entrypoint files are bundled into the ClientLib. The remaining files are placed in the ClientLib's resources directory and will be requested dynamically and therefore only loaded when they are actually needed.