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.

Visit @yworks/optimizer for detailed documentation and the latest configuration instructions for integrating @yworks/optimizer into this toolchain.

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

Visit @yworks/optimizer for detailed documentation and the latest configuration instructions for integrating @yworks/optimizer into this toolchain.

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

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

Vue.js

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

Visit @yworks/optimizer for detailed documentation and the latest configuration instructions for integrating @yworks/optimizer into this toolchain.

React

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

Visit @yworks/optimizer for detailed documentation and the latest configuration instructions for integrating @yworks/optimizer into this toolchain.