Webpack Lazy Load yFiles
This demo shows how to lazy load yFiles 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 only if users click the 'Lazy Load yFiles' button of
this demo.
Often, the diagram component is not needed for the initial startup of the application or
can be loaded lazily in general in order to provide a better user experience. Thus, in
this case, yFiles is only loaded when the diagram component of this application is
requested.
Two fundamental concepts for webpack projects are demonstrated:
Dynamic Imports with yFiles
There are two possible approaches:
-
Create a separate diagram component that imports from the
yfiles
meta module.
This separate diagram component with yFiles can then be loaded dynamically on demand
which is demonstrated in this application.
-
yFiles can also be split up further, such that only specific
yFiles ES modules
are loaded when needed, e.g. initially only load the yFiles view, but lazy load the
yFiles layout if needed.
This approach is shown in a separate webpack demo.
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