coryhouse / coryhouse/reactjsconsulting

Vite

Open
#139 1 comment 8 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.