Vite Lazy Loading Demo – yFiles for HTML

This demo shows how to lazy-load yFiles with Vite's dynamic import feature.

By default, vite automatically performs tree-shaking and only includes the necessary modules for production builds.

Often, the diagram component is not needed for the initial startup of the application or can be loaded lazily in general to provide a better user experience. Thus, in this case, yFiles is only loaded when the diagram component of this application is requested.

The demo loads yFiles only if users click the 'Lazy Load yFiles' button.

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 lazily load the yFiles layout if needed.

Running the demo

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

npm install

Then, start the Vite development server:

npm run dev

The Vite development server will launch the index file in a browser.