What is Vite.js?
Vite.js is a development tool that comes with a dev server and is used for modern web applications. It offers a faster and smoother workflow in terms of development. It has two major parts:
A dev server serves the source files over native ES modules, with build-in features and fast Hot Module Replacement (HMR) for updating modules during the execution of the application. When changes are made to the source code of an application, only those changes are updated, without the need to reload the entire application. This helps speed up the development time.
A build command enables us to bundle our code with Rollup and offers highly optimized static assets for production.
Working
Vite uses esbuild to pre-bundle the dependencies and then immediately launches the server. It then analyzes the code and processes via route-based code splitting. Vite then uses native
Get started with Vite.js
To start with Vite, we can use create-app bootstrapper. The tool supports popular front-end libraries, including React and Vue. To use Vite, we need Node.js and npm installed on our computers.
The following command will run a Vite-bootstrapped application:
npm init @vitejs/app //using npmyarn create @vitejs/app //using yarnThe prompts on the terminal will guide us in building the application. Once the application is created, we need to run npm install, then npm run dev to start the development server. Vite also supports vite build that builds the application for production and vite preview for previewing our build locally, like so:
{"scripts": {"build": "vite build","preview": "vite preview"}}
Why Vite.js?
There are several advantages of using Vite:
Hot Module Replacement
Hot Module Replacement (HMR) adds, updates, or removes modules while an application runs without reloading the entire page. This helps speed up the development process as it only updates the changes we just made and retains the application state lost during reloading. It also makes the application incredibly fast regardless of the app size.
Configuration
We can have complete control over the project by extending the default configuration with vite.config.js or vite.config.ts file files in the working directory. A basic config file looks like this:
// vite.config.js
export default {
// config options
}Conclusion
Vite is an incredible build tool that is relatively new to the market. Its unique features, speedier developer experience, and support for different languages have already been pretty popular among developers. It's great when we want to avoid using a framework but do need minified scripts and styles.
