Does Storybook + Vite do incremental build?

[bhavaniravi]

Summary

I'm new to the JS ecosystem, and I'm a backend person, so maybe this question is too basic.
I recently started exploring Storybook with webpack, and it includes fscache, which caches some information between builds, so subsequent changes and their builds are much faster.

Is there something similar in Vite?
I have explored --watch, but that is not a significant improvement; maybe I'm doing something wrong.
Also, Storybook doesn't support watch properly, maybe I'm wrong about this too.

The problem I see is that a build that takes 8s on my laptop (M4, 32GB) is taking 1.5 mins on a Docker container.r
Tried everything recommended by every AI out there, no luck.

1. How does Vite work internally?
2. Does it persist some form of cache while building? If yes, where is it stored?
3. Is there anything I can do to optimize build times? And if not, at least save a few seconds when running it incrementally

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @bhavaniravi! I'm Dosu and I’m helping the storybook team.

Storybook with Vite does not support persistent incremental builds or caching between runs like Webpack's fsCache. In development mode, Vite serves ES modules directly and uses an internal cache for fast hot module replacement (HMR), but this cache is not persistent across production builds. For production (build-storybook), Vite (via Rollup) does a full rebuild each time—there's no incremental build cache like Webpack's.

Vite does persist a cache for dependency optimization (used for faster dev server startup and HMR), and Storybook stores this cache in node_modules/.cache/storybook/sb-vite within your project. This cache mainly helps with dependency pre-bundling, not with incremental production builds. Issues with this cache can sometimes cause errors when switching branches or dependencies, and clearing it doesn't always resolve problems due to how Vite manages its cache state [source].

The --watch flag for static builds is not supported in Storybook (for either Webpack or Vite). For live updates, use the dev server (storybook dev). For static builds, you need to manually rerun the build command [source].

To optimize build times, especially in Docker or large projects, you can:

• Fine-tune Vite's optimizeDeps in your .storybook/main.js using the viteFinal function.
• Use chunk splitting with build.rollupOptions.manualChunks to avoid large bundles.
• Exclude unnecessary directories from file watching to reduce overhead.
• Disable automatic docgen if you don't need it, to save time and memory [source].

If you want specific config examples or further tuning tips, let me know your setup details!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}