FlowFuse / FlowFuse/node-red-dashboard

Reduce Build Size

Open
#1,776 1 comment 0 reactions 0 assignees View on GitHub
needs-triage size:M task
Dominant language
HTML
Stars
355
Forks
82
Avg merge
4d 23h
Merged PRs (30d)
24

Description

### 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:

```js

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:

```js
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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.