Migrate to vite

[NoahBres]

Move from create-react-app to Vite

Vite differences:

• Uses esbuild instead of webpack
  • Written in Go/JS. Faster compilation.
  • Uses ESM so modules can be compiled on the fly

Benefits:

• Much faster startup
  • 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
  • Build time halved: 17 vs 40 seconds
  • Ability to use PostCSS 8
    • Impetus for the migration
    • PostCSS 8 allows for the use of Tailwind JIT
      • 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.
    • CRA is stuck on PostCSS 7 and there is no indication of moving forward until one of their dependencies—PostCSS-Normalize—updates to PostCSS 8.
  • 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.

Other alternatives considered:

• Snowpack
  • Also uses esbuild
  • 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
  • https://vitejs.dev/guide/env-and-mode.html#env-files
• esbuild does not implement the React 17 JSX transform feature
  • Requires React import for every component
  • No functional differences as the original JSX transform will not be deprecated
  • Support jsx automatic runtime evanw/esbuild#334
  • esbuild may support React 17 JSX transforms once plugin support is complete (still experimental but a surprising number of plugins exist already)

Demo of the speed difference:

2021-03-16.00-38-22.mp4