Toolkit-specific Advice

Vite

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

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

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 demo for an example.

Vue.js

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

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.