Reduce Build Size

[joepavitt]

Description

Having recently done the upgrade to Vuetify 3.9.0 for https://github.com/FlowFuse/node-red-dashboard/issues/1767, I've realised that our build is signficantly bloated, mostly due to the mermaid node and it's dependencies (e.g. hljs).

We should undertake an exercise, separate from the upgrade, to refine the loading of dependencies (using dynamic imports/lazy loading where possible) and separating dependencies into separate .js files in the build process.

Measuring Build Size

Use https://github.com/btd/rollup-plugin-visualizer:

npm install --save-dev rollup-plugin-visualizer

Then, in the vite.config.js add:

import { visualizer } from 'rollup-plugin-visualizer'

...

export default defineConfig({
    ...,
    plugins: [
        ...,
        visualizer()
    ]
})

Actions

Separating js files

Add (or update) the build.rollupOptions.output.manualChunks section in the vite.config.js, e.g:

build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // This will create a separate chunk for mermaid and its dependencies
          mermaid: ['mermaid']
        }
      }
    }
  }

Lazy Loading

Trickier as we have a lot of nodes and therefore dependencies. I tried quickly to revamp mermaid/markdown node into a dynamic import setup, but couldn't arrive at a solution quickly. As such, creating this task to give it proper attention another time.

Epic/Story

No response

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

Running the tool as per my latest local changes for the Vuetify upgrade provides the above