Around 400ms vs a 30sec - 1 minute rebuild for CRA
However, even if the server startup time is faster, dash requests nearly all the components in one go anyways since this isn't a large app split into many different parts. So realistically, the startup time is around 15 seconds. Still a significant speedup compared to CRA's webpack
JIT compilation of Tailwind CSS classes. Massive speedup. Significantly reduces the dev stylesheet. Chromium dev tools tend to lag with tailwind's massive stylesheets. Solution was to enable purging during dev (purging generally only enabled during prod) but this make compile times longer. Tailwind JIT is a significant QOL improvement.
If something ever goes wrong, it should be trivial to switch back to CRA. Switching the environment variables back is the only functional change required to revert.
Streaming imports through skypack (not relevant to dash but a really cool feature nonetheless)
Primary difference is that Snowpack uses parcel/webpack for bundling. Vite uses Rollup. Vite supports a number of fancy features that Snowpack doesn't but they aren't really a concern in dash's locally hosted use case.
Agressive caching
Snowpack claims a 50ms startup time on warm cache because it does very aggressive caching. It will not rebuild files more than once if not changed. Subsequent runs are faster than Vite because of this. However, I don't think this trade-off is worth it as Vite will eventually implement more aggressive caching (it current caches pre-bundled dependences but not your project). Vite will be slower as it still needs to compile the main project every time. However, Vite has a much bigger backing (from Evan You and the Vue team) thus will most likely be a much safer and more stable option in the long run. It already surpasses Snowpack in stars and dependencies despite being released much later. Snowpack's business model is questionable. It's primarily an open source project that ties in with Skypack which is a really neat NPM CDN. However, they don't charge yet for anything but have plans to in the future. Cannot guarantee that Snowpack/Skypack will be sustainable. In contrast, Vue has a very large number of sponsors and massive open source support.
Migration differences:
env variables require a VITE_ prefix to be accessible in the frontend
Move from create-react-app to Vite
Vite differences:
Benefits:
Other alternatives considered:
Migration differences:
VITE_
prefix to be accessible in the frontendDemo of the speed difference:
https://user-images.githubusercontent.com/6739076/111270157-80db2e00-85fd-11eb-860d-40471bd9e659.mp4