Webpack Dynamic yFiles Import Demo [yFiles for HTML]

Webpack Dynamic yFiles Import Demo

This demo shows how to lazy load specific yFiles modules with webpack's dynamic import feature.

By default, webpack automatically tree-shakes yFiles and only includes the necessary modules in the bundle.

Additionally, this demo loads yFiles layout functionality lazily and on-demand when a user clicks the layout button in the toolbar.

This technique allows applications to only load the necessary modules for bootstrapping the main application and lazily load functionality on demand during runtime.

Two fundamental concepts for webpack projects are demonstrated:

Dynamic import of modules
Separate webpack configurations for development and production

Dynamic Imports with yFiles

There are two possible approaches:

Import yFiles functionality directly from the respective yFiles ES modules which allows webpack to split yFiles in different chunks.
This approach is shown in this demo application for the layout functionality when clicking the layout button in the toolbar.
Create a separate diagram component that imports from the yfiles meta module. In this case, webpack cannot separate yFiles anymore, however, tree-shaking is still applied such that only the necessary modules are bundled.
This separate diagram component with yFiles can then be loaded dynamically on demand.

Running the demo

First, install the required npm modules in the demo directory:

> npm install

Development

The development build uses the webpack dev server:

> npm start

Production

The production build uses the yWorks Optimizer webpack plugin:

> npm run production