**--watch** mode does full re-build instead of incremental build

Ruthvik94 commented 7 months ago

Describe the bug

Issue is, Webpack v5 does a build, emits files and watches for changes. On any change, the rebuild happens almost instantaneously. Whereas in Vite, build happens successfully and watches for changes. On change, it's a full rebuild taking more time than initial first build rather than doing incremental build.

Closed the existing issue https://github.com/vitejs/vite/issues/16048 and created a new one for the same bug

Reproduction

https://stackblitz.com/edit/vitejs-vite-1ytjiw

Steps to reproduce

Intially run command

npm run vite:watch

Time it takes to build is around ~10s. Modify a file and check the build time, it's around ~4s.

Stop the server and now run

npm run dev:webpack

Intial build roughly takes the same amount of time. Modify a file and check the build time, it's less than ~1s around 600ms.

System Info

Windows, mac

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 7 months ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-1ytjiw (Open reproduction)

AdamcOkay commented 6 months ago

@Ruthvik94 Hi! Did you managed to figure it out?

I'm facing the same problem and managed to find that vite should support incremental builds but nothing on re-builds. Same with Rollup.

Ruthvik94 commented 6 months ago

@Ruthvik94 Hi! Did you managed to figure it out?

I'm facing the same problem and managed to find that vite should support incremental builds but nothing on re-builds. Same with Rollup.

Nope, haven't figured out yet whether it's some config I'm missing that's causing re-builds every time. There's no clarity in docs as well. Hopefully, someone from Vite dev team will look into this.

pyrbin commented 6 months ago

also having these issues after migrating a large project from webpack to vite

Samydookie commented 3 months ago

@pyrbin @Ruthvik94 @AdamcOkay Hey folks!

We were also wondering about this and found a rollup plugin that did it, but it didn't work quite right with Vite. So we made a true incremental plugin (& wrapper) for Vite and it's been working beautifully for us! It has some pretty specific requirements for project structure but it was 100% worth it for us.

Some stats for reference:

in webpack it was ~20-30s initial build, 2s rebuilds
in Vite it was 6s builds and rebuilds
with the plugin it's 9s initial build and 0.05s - 1.5s rebuilds

![]()

For Vite folks reading this: When rolldown comes around, if we can have an option to build in "transpile only" mode, that would allow us to rebuild only the modified file without needing to also build the modules that it imports and would speed this up even more.

Luk-z commented 2 months ago

@Samydookie thanks for your work! It seems doing what you told, but in our case we are working on a Vite library using next.js and React 18 (as peer deps). We are using rollupOptions.input option to strip "lib" folder (eg. lib/components/Foo.tsx -> will be compiled in dist/components/Foo.js). The first time we start incremental build all works fine. When we edit Foo.tsx the new compiled file will be placed in dist/lib/components/Foo.js. Is that supported by your library?

Samydookie commented 2 months ago

@Samydookie thanks for your work! It seems doing what you told, but in our case we are working on a Vite library using next.js and React 18 (as peer deps). We are using rollupOptions.input option to strip "lib" folder (eg. lib/components/Foo.tsx -> will be compiled in dist/components/Foo.js). The first time we start incremental build all works fine. When we edit Foo.tsx the new compiled file will be placed in dist/lib/components/Foo.js. Is that supported by your library?

@Luk-z Oh yep we will need to follow the original entries object on rebuilds, which we currently don't do. I will add support for that very soon, you can add an issue on the GitHub project if you'd like and I'll close it when the version with the fix gets published

bluwy commented 2 months ago

Whereas in Vite, build happens successfully and watches for changes. On change, it's a full rebuild taking more time than initial first build rather than doing incremental build.

Time it takes to build is around ~10s. Modify a file and check the build time, it's around ~4s.

These two descriptions don't match. Is the issue that subsequent builds aren't as fast as expected? I ran the repro locally, and I can see that subsequent builds are faster than the initial build (1.7s vs 7.8s).

I'm not really sure if there's anything actionable here. We're using rollup.watch in watch mode, and Rollup should be caching things between builds.

vitejs / vite