Migrate to Vite

[jprochazk]

Changes

• install vite, @vitejs/plugin-react, vitest
• move public/index.html -> <root>/index.html
• add script src=/src/index.tsx to index.html
• use patch-package to fix react-virtualize
  • issue: Bogus import in generated dist ESM file bvaughn/react-virtualized#1632
• change all process.env to import.meta.env
• remove dependency on querystringify, replace with usage of URLSearchParams (as per TODO)
• create GIT_COMMIT_HASH and GIT_COMMIT_TIMESTAMP globals instead of using react-git-info package
  • react-git-info was implemented as a babel macro, so I migrated it to globals created using vite-plugin-replace, which are generated before build start by executing the required git commands
• Migrate service worker to vite-plugin-pwa (thanks to p-man)

Did this improve anything?

Memory:

yarn build

	avg	min	max
react-scripts	2048 MB	166 MB	4059 MB
vite	1113 MB	124 MB	1951 MB

yarn dev

	avg	min	max
react-scripts	1499 MB	130 MB	2121 MB
vite	250 MB	152 MB	267 MB

Memory usage was measured using the mem.js script. Note that it will only run on Windows, because it uses the tasklist utility.

YMMV, V8 tends to use as much memory as it can based on a percentage heuristic of total system available memory, which means if you have less available memory, it will also use less, up to a point. I have 16 GB, and usage at the time was less than 25%. Overall though, this is a giant improvement, especially for development. Note that I tried to click around on the website as much as I could, to force Vite to load lazy chunks, and I barely saw any change to memory usage.

Speed

yarn build

	time
react-scripts	40.24s
vite	23.89s

yarn dev

	dev server start	first page load
react-scripts	15 s	1398 ms
vite	574 ms	893 ms

Dev server start is measured by the time it took before the dev server was responsive (time to first byte). Vite reports is own times, but for react-scripts I had to modify it to get to report its startup time.

First page load is measured as how long it took for the React app to start on a fresh page reload right after starting the dev server (to prevent caching). This was done by inserting the following snippet into the App component in src/App.tsx:

useEffect(() => console.log(window.performance.now()));

[P-man2976]

PWA migration changes

• Install vite-plugin-pwa
• Initialize service worker with VitePWA(), moved previous service worker code into its options / other files
  • Caching i.ytimg.com and *.mzstatic.com assets
  • Cache deny list
  • Manifest options
  • Unregister service worker when app fails
    • vite-plugin-pwa doesn't have unregister code, so I moved previous unregister code into /src/utils/serviceWorker.ts and reusing it
  • Update prompt

Other changes

• Remove duplicate type definitions (vite/client in /src/vite-env.d.ts and tsconfig.json, removed vite-env.d.ts one)
• Dev server starts on port 3000 (for OAuth)