Reducing the Bundle Size

To minimize the amount of code shipped to the client, common npm dependencies can be shared between Feature Apps and the integrator. In addition, code can be dynamically loaded using dynamic code splitting.

Dynamic Code Splitting With Webpack

Client-side rendered Feature Apps can use Webpack's dynamic code splitting technique using the import() syntax.

To make this work for multiple Feature Apps living together in one integrator, two settings need to be made:

- For Webpack 4: Set a unique value for output.jsonpFunction, e.g. 'webpackJsonpMyFeatureApp'.
- For Webpack 5: Set a unique value for output.uniqueName, e.g. 'acme-my-feature-app'.
- If the Feature App is bundled as a federated module, set output.publicPath to 'auto' (default).
- If the Feature App is bundled as an AMD module, set output.publicPath to the public URL (relative or absolute) of the output directory, i.e. where all the chunks are hosted.
  
  Since this is not always known at built time, it can be left blank and set dynamically at runtime in the entry file using the global variable __webpack_public_path__:
```
const myFeatureAppDefinition = {
  id: 'acme:my-feature-app',

  create(env) {
    __webpack_public_path__ = env.baseUrl;

    // ...
  },
};
```

Note:
A solution for server-side rendered Feature Apps that want to use code splitting has not yet been worked out.