In this article, we’ll see Vite JS Overview.
Table of Contents
What is Vite js
Vite JS is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
- A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
- A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
It was created in 2020 by Evan You, the creator of Vue.js, and is optimized for Vue.js applications, though it can be used with other JavaScript frameworks as well. The name “Vite” comes from the French word for “fast”, which is pronounced, “vit”.
Vite JS aims to provide a fast and smooth development experience by using a development server that leverages native ES modules and on-demand compilation. This means that instead of bundling all of your code into a single file, as traditional build tools like Webpack do, Vite only compiles and serves the code that is needed for each individual page or component. This results in faster development and build times, as well as better overall performance of the app.
Why use Vite JS
- Fast Development Server: vite js comes with a development server that provides fast, real-time feedback on changes to the application code. This means that developers can see changes in their browsers almost instantly without needing manual reloads.
- Hot Module Replacement: With Vite.js, developers can make changes to their code and see the changes reflected in the browser without a full page reload. This makes the development process faster and more efficient.
- Out-of-the-box Support for TypeScript: Vite.js provides out-of-the-box support for TypeScript, allowing developers to use TypeScript in their projects without needing additional configuration.
- Plug-in Architecture: Vite.js is built on a plug-in architecture that allows developers to extend its functionality easily. Developers can create and use plug-ins for things like CSS pre-processors, test runners, and more.
- Optimized Build Process: Vite.js uses an optimized build process that leverages modern browser features to create smaller and faster builds. This means that the resulting application is faster and more performant, which is essential for delivering a great user experience.
- Vue.js Integration: Vite.js was created by the same team that created Vue.js, so it integrates seamlessly with Vue.js projects. Vite.js is the default build tool for Vue.js 3 and is optimized for use with the Vue.js framework.
- Multiple Bundling Options: Vite.js provides multiple bundling options, including Rollup, Webpack, and ESbuild. This allows developers to choose the bundling option that best fits their needs.
Vite.js Installation
You must have pre-installed Node.js on your computer. Once you have Node.js installed, follow these steps:
1). Open a terminal and go to the directory where you want to set up the project. Then run the “npm create vite@latest” command in your
terminal. It will start the installation process.
2) During installation, Firstly it will ask for the project name. You can add the project name or skip it by entering it. Then it asks to select any one option from the following listed framework :
- Vanilla
- Vue
- React
- Svelte
- Preact
- Lit
- Other
We select the “react” option from the list. Then select “Javascript” as a variant option from another list.
3) Now, go to the project directory by running the “cd vite-project” command and then run “npm install” to finish the installation
4) Installation is now ready. Run the “npm run dev” command in your terminal and open “http://localhost:5173” URL in your browser to see
the output.
Congratulations! Vite.js is successfully installed and created a new project. Now, you can start developing your application using the fast and efficient Vite.js development server.
You can check out below video for the whole installation process in case you need it.
Advantages and Disadvantages :
Advantages:
- Fast Development: One of the biggest advantages of Vite.js is its fast development experience. Vite.js offers an ultra-fast dev server that can hot reload changes to the application in milliseconds.
- Easy Setup: Vite.js is easy to set up and configure. Developers can quickly get started with Vite.js by simply installing it through npm or yarn.
- Supports a wide range of frameworks: Vite js supports a wide range of front-end frameworks such as React, Vue.js, and Angular, allowing developers to use their preferred framework.
- Modular Architecture: Vite js is built with a modular architecture that enables developers to build their applications with only the required modules, reducing the overall bundle size.
- Built-in Preprocessor Support: Vite.js provides built-in support for preprocessors such as TypeScript, SCSS, Less, and PostCSS.
Disadvantages:
- Limited Browser Support: Vite js has limited browser support. It currently only supports modern browsers such as Chrome, Firefox, and Safari, which could be a problem for some projects.
- Limited Documentation: Vite js is a relatively new tool, and its documentation is still evolving. This could make it challenging for developers to find the information they need.
- Limited Plugin Ecosystem: Vite.js has a limited plugin ecosystem compared to other build tools such as Webpack. This could limit the customization options for developers.
- Lack of Mature Tooling: Vite.js is still in its early stages of development, and its tooling is not as mature as other build tools such as Webpack.
- Limited Production Use Cases: Vite.js is primarily designed for development and may not be suitable for all production use cases.
Reference:
I hope this article helps!