coryhouse / coryhouse/reactjsconsulting
Vite
- Dominant language
- JavaScript
- Stars
- 374
- Forks
- 33
- PR merge metrics
- No merged PRs in 30d
Description
## 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.
1. 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).
1. Prebundles dependencies via esbuild (written in Go so it's fast)
1. Consistently faster HMR (even for huge projects) since it's handled over ESM
1. [Supports glob imports](https://vitejs.dev/guide/features.html#glob-import)
1. [Automatically preloads chunks](https://vitejs.dev/guide/features.html#build-optimizations)
1. Easily generate a reusable component library via [library mode](https://vitejs.dev/guide/build.html#library-mode)
1. [Supports SSR](https://vitejs.dev/guide/ssr.html) via a plugin or libraries
1. The CLI prompts for choices.
1. Works for other frameworks like Vue, Svelte, etc too.
## Notable differences from create-react-app
1. Create via `npm init vite`
1. `main.tsx` is the entry point instead of `index.tsx`
1. index.html is in root instead of /public
1. No testing built in, but [Vitest](https://vitest.dev/) is easy to add
1. Targets [modern browsers by default](https://vitejs.dev/guide/build.html#browser-compatibility)
1. Env vars are under `import.meta.env` instead
More goodies in [awesome-vite](https://github.com/vitejs/awesome-vite)
## Other tips
[Speed up e2e tests calling Vite](https://dev.to/noriste/speed-up-e2e-tests-for-vite-based-apps-3k4l)
Contributor guide
No contributing guide indexed for this repository
Research direction
No target file, test, or entry point is named. First inspect the repository's documentation or resource structure and confirm whether this open issue is still wanted; a maintainer-approved destination and scope are needed before implementation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- go, javascript, react, typescript, webpack
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100