Support route-based code splitting

Expected Behavior

Having the self-contained build is a great improvement in terms of bundle size. Creating sap-ui-custom.js bundles brings huge performance benefits. However, as apps grow, the bundle grows as well. This can become an issue, especially for the initial start up time of such an app.

To address large bundle files lots of tools like Webpack perform Code-Splitting. A common approach is to split bundles by routes. UI5 already comes with a concept of routes and components. It would be great to have the ui5 builder support splitting bundles by routes as well.

Current Behavior

Projects can either be build using the preload or self-contained build. The latter does not allow code splitting.

Sample Project Setup

Imagine the following setup of application using routing and nested Components (each which potentially differing ui5 control includes and dependencies):

projectA (application)
└─(uses sap/m/Page, ...)
  \
   ├──/home  (component)
   │  └─(uses sap/m/Button, sap/f/Avatar)
   │
   ├──/users (component)
   │  └─(uses sap/m/Button, sap/ui/table/Table)
   │
   ├──/report (component)
   │  └─(uses ui5lab/thirdparty/lib)

Affected components (if known)

• ui5-builder
• ui5-server
• ui5-cli
• ui5-fs
• ui5-project
• ui5-logger

Start by reading the self-contained build behavior in ui5-builder and how ui5-server handles the resulting bundles. Trace how routes, components, control includes, and dependencies are represented, then define the split-bundle behavior and verify that route-specific bundles load while the existing preload and self-contained builds continue to work.