What is Vite?
Developers already know that JavaScript build tools can be a pain in the butt. Especially since they want to focus on coding. The struggle is real, but there is one tool that stands out from the rest: Vite.js. In our tutorial we will dive into Vite.js and all of its key features.
We’ll start off by looking at the core principles behind how Vite was built and how it handles performance challenges when developing web applications. At its core, Vite excels in two ways:
1. Serving code locally during development.
2. Bundling all front end assets (HTML, CSS, and JavaScript) for production purposes.
This speed comes from the backend using native ES modules within a browser, ensuring quick loading of code no matter how big modules get or how complex the application codebase becomes. But wait there’s more! Vite also implements HMR (Hot Module Replacement). A crucial piece that helps with its speed and efficiency. HMR keeps tabs on state changes within an application and adds or removes modules without needing a full reload of the application while it’s running. So as you write your code and make changes to it, you’ll be able to see those changes instantly reflected in the browser. It’s pretty cool,
Key Features of Vite
In this section, we will discuss the standout features that Vite brings to the table and why you should consider adopting it. Vite.js, as a contemporary frontend development tool, presents a range of distinctive attributes that set it apart from conventional bundlers. Here are some of these standout characteristics:
1. Ultra-Fast Development Server: Vite.js introduces a remarkably efficient development server that capitalizes on native ES module imports supported by modern browsers. It employs an on-demand compilation strategy, enabling nearly instantaneous hot module replacement (HMR) and swift page reloads. This approach significantly accelerates the development workflow, delivering rapid feedback loops and boosting developer productivity.
2. Native ES Modules Compatibility: Vite.js wholeheartedly embraces native ES modules, a feature naturally supported in contemporary browsers. During development, Vite.js leverages the browser’s ability to load ES modules as distinct files, eliminating the necessity for bundling. This eliminates the overhead of bundling during development, resulting in faster startup times, superior cacheability, and the ability for the browser to concurrently load modules, leading to an overall performance boost.
3. Expeditious Production Builds: Vite.js employs the “esbuild” bundler, renowned for its exceptional speed, in its production build process. “esbuild” generates streamlined and minified code bundles, yielding significantly reduced build durations when compared to conventional bundlers. This rapid bundling process enhances developer efficiency and enables quicker deployment cycles.
4. Zero Configuration : Vite.js adheres to a zero-configuration philosophy, offering a seamless out-of-the-box experience. By minimizing the need for manual configuration, developers can swiftly set up new projects without investing time in intricate configuration setups. Nevertheless, Vite.js also provides a versatile configuration file (vite.config.js) for advanced customization when necessary.
5. Devtool Integration: Vite.js seamlessly integrates with popular browser developer tools. It enriches the debugging process by mapping the original source code directly to the browser, enabling developers to debug their code without the requirement for additional setup or tooling.
6. Plugin Ecosystem: Vite.js boasts a burgeoning ecosystem of plugins that extend its functionality and seamlessly integrate with prevalent frontend frameworks like Vue.js, React, and Preact. These plugins enhance the development experience by offering supplementary features, optimizations, and seamless integrations with various tools and libraries.
Vite vs Webpack
When it comes to modern web development, efficient build tools are essential. They streamline the development process, optimize assets, and ensure your web applications run smoothly. For a long time, Webpack has been the go-to choice for bundling and managing assets and Vite has emerged as a promising alternative, offering impressive speed and developer-friendly features.
Webpack: A Familiar Giant
Webpack has been a cornerstone of web development for years, and it’s known for its versatility and extensive ecosystem. In this section, we’ll explore the strengths and characteristics that have made Webpack a popular choice for countless developers.
Vite: The New Kid on the Block
Vite, relatively new in the game, has quickly gained attention for its exceptional speed and native ES module support. We’ll delve into how Vite challenges traditional build tools and how its features can enhance your development experience.
Head-to-Head Comparison:
In the heart of the blog post, we’ll conduct an in-depth comparison of Webpack and Vite. We’ll evaluate crucial factors such as:
- Development Server Performance: How does Vite native ES module dev server compare to Webpack bundle-based dev server in terms of speed and efficiency?
- Configuration and Setup: Which build tool offers a more straightforward setup and configuration process, making it easier for developers to get started?
- Plugin Ecosystem: We’ll explore the plugin ecosystems of both tools to see which one provides better extensibility and support for various project needs.
- Build Size and Optimization: Which tool excels in optimizing your project’s assets for production, resulting in smaller and faster-loading bundles?
Migrate Webpack to Vite
A quick migration guide to Vite from Create React App, because (apart from Next.js) Vite is the natural successor of CRA for creating a modern React application as SPA.
First, install Vite and all React related libraries (here: Vite’s React Plugin) as development dependencies:
npm install vite @vitejs/plugin-react --save-dev Second, uninstall create-react-app’s dependency:
npm uninstall react-scripts
Third, adjust your package.json to use the following new scripts:
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
}, Fourth, rename all extensions of files which are using JSX from “.js” to “.jsx”, because Vite is explicit with file extensions. If you are using TypeScript, perform the same task from “.ts” to “.tsx”. The following demonstrates it with the App.js file on the command line:
mv src/App.js src/App.jsx
mv src/index.js src/index.jsx
If you are not renaming all your React/JSX related files this way, essentially all files that are using angle brackets, you may get the following or a similar error:
- The JSX syntax extension is not currently enabled
- The esbuild loader for this file is currently set to “js” but it must be set to “jsx” to be able to parse JSX syntax. You can use “loader: { ‘.js’: ‘jsx’ }” to do that.
Fifth, create a vite.config.js file in your Vite + React project’s root directory:
touch vite.config.js And add the following implementation details to it. Essentially we want to keep the same output directory for the build as we had before with create-react-app. In addition, we want to use Vite’s React Plugin:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [react()],
};
}); Sixth, move the public/index.html into the project’s root folder, because Vite expects it there:
mv public/index.html . Afterward, remove all %PUBLIC_URL% occurrences in the index.html file.
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" /> Last, link the src/index.js file in your moved index.html file the following way:
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body> That’s it. If you have been using a create-react-app project without any further configuration (e.g. a fresh create-react-app installation), you are ready to start your new Vite based React application with npm start.
However, there may be additional steps needed which I want to outline next in case your create-react-app uses more configurations.
- If you want to keep using ESLint in Vite as you have used it in create-react-app, follow this Vite + React + ESLint tutorial.
- If you want to keep using TypeScript in Vite as you have used it in create-react-app, follow this Vite + React + TypeScript tutorial. Optionally follow this ESLint + Prettier tutorial afterward.
- If you want to keep using react-testing-library in Vite as you have used it in create-react-app, follow this Vite + React + React Testing Library tutorial.
- If you are using create-react-app’s (CRA’s) environment variables, you need to replace all REACT_APP occurrences with VITE.
- If you are using process.env in your React project, replace it with import.meta.env.
Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency