-
Notifications
You must be signed in to change notification settings - Fork 54
Intro to Vite
Vite (French word for "quick") is a build tool that aims to provide a faster and leaner development experience for modern web projects.
Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.
It allows you to select different frameworks you want your application to work with.
Bundles your application and makes it ready for production. Vite bundles all the dependencies, modules, and code together for production.
It uses Native modules (ESM) based dev server. Applications have different modules and routes. When running your applications with Vite, the application is executed based on a single request. This means the server won’t bundle the whole application just to execute a single request. Vite uses ESM to load routes separately, and thus a module is only executed if the request made depends on it. Running your dev server with ESBuild bundler will give your application superpowers compared to other bundles such as Webpack.
- Vite is faster. It takes less time to bootstrap a React app as compared to
create-react-app. - The bundled app varies in size, and Vite tends to create an application with less size bundler.
- The sizes of build output will vary as well. If the initially created application were small, the build output would be smaller.
- It’s faster and more powerful to build an app that runs on Vite. Vite has an optimized build process.
- Vite has an instant server start. Any change to your code is compiled faster and displayed on the browser almost immediately.
To use Vite we need to go through some setup.
Begin by creating a project repository and running the standard git init and npm init.
npm install vite, then follow the prompts.
Create a dev script that will run the vite command.
Add "dev":"vite" to package.json.
Run npm run dev.
(If error occurs, change all js files to jsx)
You could allow js files to be considered by changing the config in the vite.config.js file but it's usually the standard to use jsx extensions for React files.
Don't forget to change the scripts on your index.html to include jsx extension.
If you want to create a Vite app from scratch you have to use npm create vite@latest and respond to the prompts with:
- Project Name: whatever you like
- Framework: React
- Variant: JavaScript
For more information on our transformative coding education, visit us at https://www.lafosseacademy.com/