Toolkit-specific Advice

Vite

Relevant Demos: Vite, Vue, React, React Class Components, Svelte, Vue Component Node Style, React Component Node Style

yFiles works out of the box with Vite, and there are no special issues that you need to look out for when you load yFiles as an NPM dependency.

To include the @yworks/optimizer, you can add it as Rollup plugin to the vite.config.js:

import { defineConfig } from 'vite'
import optimizer from '@yworks/optimizer/rollup-plugin'

export default defineConfig(({ mode }) => {
  return {
    plugins: [mode === 'production'
      ? optimizer({ logLevel: 'info' })
      : mode
    ]
  }
})

Webpack

Relevant Demos: webpack, Web Worker Webpack

Separate yFiles Chunk

Code Splitting allows you to split your code into multiple chunks. It is usually a good idea to have the yFiles library files in a separate chunk as they rarely change and thus can be cached for a longer time.

To create a separate yFiles chunk, add an entry to the optimization.splitChunks.cacheGroups option in your webpack configuration:

optimization: {
  splitChunks: {
    cacheGroups: {
      yfiles: {
        test: /[\\/]yfiles[\\/]/,
        name: 'yfiles',
        chunks: 'all',
        priority: 10
      },
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

Integrating the yWorks Optimizer

The yWorks Optimizer includes its own webpack plugin, making integration into your webpack build straightforward:

const OptimizerPlugin = require('@yworks/optimizer/webpack-plugin')

module.exports = {
  // ... your webpack configuration
  plugins: [
    new OptimizerPlugin({
      logLevel: 'info'
    })
  ]
}

Excluding the yFiles Chunk from Minimization

Minimizing the yFiles library files is not necessary because they are already minimized. Furthermore, the minimization process can be time-consuming. Although webpack caches some results, reducing build times for subsequent runs, excluding the yFiles chunk from the minimization step, e.g., CI builds which start the build from a clean state).

To exclude the yFiles chunk from minimization, provide the minimizer option in the webpack configuration (this assumes that the yFiles chunk is named "yfiles" like in the Separate yFiles Chunk section):

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... your webpack configuration
  minimizer: [
    new TerserPlugin({
      exclude: /^yfiles\./
    })
  ]
}

Angular CLI

Relevant Demos: Angular CLI, Angular Component Node StyleStarter kit: Angular (GitHub)

If you want to use the yWorks Optimizer, we recommend using the @angular-builders/custom-webpack:browser builder that allows you to specify a custom webpack configuration for your Angular CLI build. Then, you can follow the instructions for webpack. See the Angular CLI demo for an example.

Vue.js

Relevant Demos: Vue, Vue Component Node Style, Vue Template Node StyleStarter kit: Vue.js (GitHub)

When you load yFiles as an NPM dependency, there are no special considerations to keep in mind.

To include the @yworks/optimizer, add it as a Rollup plugin:

import optimizer from '@yworks/optimizer/rollup-plugin'
// ...
export default defineConfig(({ mode }) => {
  return {
    // ... other configurations
    plugins: [
      vue(),
      mode === 'production' ? optimizer({ logLevel: 'info' }) : null
    ]
  }
})

React

Relevant Demos: React, React Class Components, React Component Node Style, React JSX Component StyleStarter kit: React (GitHub)

When you load yFiles as an NPM dependency, no special considerations are necessary.

If you want to use the yWorks Optimizer, its configuration depends on the tooling of your React application. Since most React templates and meta-frameworks use Vite, see the Vite section for configuration details.