Vite

[coryhouse]

Vite benefits over create-react-app

1. Faster startup. (Uses esbuild with rollup instead of webpack. Uses separate TypeScript project for Vite config to speed builds too.
2. Scales better. Dynamically passes native ESM to the browser for speed. Code is "lazy" processed the moment it's needed to display the screen. (create-react-app compiles the output on each save first). (See type="module" in index.html).
3. Prebundles dependencies via esbuild (written in Go so it's fast)
4. Consistently faster HMR (even for huge projects) since it's handled over ESM
5. Supports glob imports
6. Automatically preloads chunks
7. Easily generate a reusable component library via library mode
8. Supports SSR via a plugin or libraries
9. The CLI prompts for choices.
10. Works for other frameworks like Vue, Svelte, etc too.

Notable differences from create-react-app

1. Create via npm init vite
2. main.tsx is the entry point instead of index.tsx
3. index.html is in root instead of /public
4. No testing built in, but Vitest is easy to add
5. Targets modern browsers by default
6. Env vars are under import.meta.env instead

More goodies in awesome-vite

Other tips

Speed up e2e tests calling Vite

[donjosemathew]

Vite benefits over create-react-app

1. Faster startup. (Uses esbuild with rollup instead of webpack. Uses separate TypeScript project for Vite config to speed builds too.
2. Scales better. Dynamically passes native ESM to the browser for speed. Code is "lazy" processed the moment it's needed to display the screen. (create-react-app compiles the output on each save first). (See type="module" in index.html).
3. Prebundles dependencies via esbuild (written in Go so it's fast)
4. Consistently faster HMR (even for huge projects) since it's handled over ESM
5. Supports glob imports
6. Automatically preloads chunks
7. Easily generate a reusable component library via library mode
8. Supports SSR via a plugin or libraries
9. The CLI prompts for choices.
10. Works for other frameworks like Vue, Svelte, etc too.

Notable differences from create-react-app

1. Create via npm init vite
2. main.tsx is the entry point instead of index.tsx
3. index.html is in root instead of /public
4. No testing built in, but Vitest is easy to add
5. Targets modern browsers by default
6. Env vars are under import.meta.env instead

More goodies in awesome-vite

Other tips

Speed up e2e tests calling Vite