This is the recommended approach and comes preconfigured for any SWAT-based application.

This feature is integrated directly with the designer.
Once an object is loaded, the corresponding client logic file can be generated automatically in the workspace by using the events ribbon button.
The generated file is treated as any other TypeScript source, the exposed functions will be marked by exporting them.

Once the client logic is implemented, the EventNamespace attribute needs to be filled with either a valid namespace (ex. 'app.events') or with the reserved encapsulation namespace '#'.
This is done so that the runtime knows that the object will lazy load its client logic.
By using a valid namespace, the client logic will be made available in the global context.
By using the encapsulation namespace, it will hide the logic from the global scope and only make it available to the object at runtime.
It is recommended to use the encapsulation parameter so that the global context is cleaner.

With the namespace set, it is now possible to reference the functions in any event inside the currently selected designer object (the object itself and its instances).
If there are any menus used (ex. by ribbons, toolbars, ...), it will behave the same, the namespace references will map to the closes parent.
When using a proper namespace, the events can be referenced either through the global scop (ex. 'app.events.<objectname>.<function>') or by using the reserved 'eventNamespace' keyword (ex. 'eventNamespace.<function>').
When using the encapsulation namespace, the events can be referenced either by the 'eventNamespace' keyword or by the namespace itself (ex. '#.<function>').

How to configure project for decentralized events

As long as the project is based on the standard SWAT template, this step is not required, as everything is already set up by default.

Decentralized events will be independent of the main application bundle.
Each repository object referencing events will have its own bundle, which will be lazy-loaded at runtime.

The following directory structure is recommended:
webui
|-- client-logic
     |-- _export
          |-- <repository_object>.ts
          |-- ...
     |-- EventNamespaceDomain.ts
     |-- ...
|-- ...
|-- index.ts

The EventNamespaceDomain.ts file is used by webpack to "know" that the files in the _export directory should be bundled in separate bundles.
And it will be used to register the namespace domain at runtime in index.ts.
Afterwards, any object added to the _export directory will be available for lazy-load at runtime.

import EventNamespaceDomain from './client-logic/EventNamespaceDomain';

const eventNamespace = new EventNamespaceManager();
eventNamespace.registerDomain('APP', new EventNamespaceDomain());

export default {};

export default class EventNamespaceDomain {
  async LoadEventNamespace(relativeFilePath: string) {
    try {
      const object = await import(
      /* webpackChunkName: "[request]" */
        `./_export/${relativeFilePath}`
      );
      return object;
    } catch {
      return null;
    }
  }
}