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 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