FlowFuse / FlowFuse/node-red-dashboard
Reduce Build Size
- 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.