Using webpack code splitting in Nextcloud

Webpack can be a great tool when creating Nextcloud apps, bundling all your javascript and 3rdparty libraries
together into a single transpiled and minified bundle for the browser to load.

However bundling everything together into one file doesn’t always lead to the best user experience,
having to load large amounts of (3rdparty) javascript every time the page is loaded even though large
portions of the code might not always be needed.

This is especially so with apps that get loading into file Files app or public share page, an app for
viewing pdf files or rendering markdown previews in the text editor will sit around unused by the user
most of the time, while loading large 3rdparty libraries every page load.

Luckily webpack provides an answer in cases like this, “code splitting”.
Code splitting allows us to split up the bundle into multiple parts, only loading pieces of code on demand
when they are needed.

For example for our pdf viewer, we can only load a small piece of code on page load that registers the
viewer and then load the full viewer from there only when a pdf file is opened.

We tell webpack where the bundles are located
and give it the nonce that it needs to bypass the CSP (Chrome and Firefox both requiring their own method).

Finally when using code we want to ensure that there are no conflicts between our app and any other app that might use
code splitting, this is done by specifying a unique jsonpFunction in the webpack configuration: