Vite 4.0 Takes Development to a Whole New Level: Faster, Smarter, and More Efficient

Experience Lightning-Fast Development with Vite 4.0 and React: The Perfect Match

Photo by Lautaro Andreani on Unsplash

Vite is a new front-end development tool that addresses the performance issues associated with current JavaScript-based toolings like webpack, Rollup, and Parcel. By leveraging the availability of native ES modules in the browser and utilizing JavaScript tools written in compile-to-native languages.

Vite aims to improve developers’ productivity and happiness by reducing the wait times associated with spinning up a dev server and reflecting file edits in the browser, often seen in large-scale projects with thousands of modules.

Vite, the front-end development tool, saw tremendous growth and adoption over the past five months. The number of npm downloads per week has doubled from 1 million to 2.5 million and usage among the community in the Jamstack Conf survey jumped from 14% to 32% with a high satisfaction score of 9.7.

Vite-powered frameworks such as Astro 1.0 , Nuxt 3 , SvelteKit , Solid Start , and Qwik are also growing and collaborating. Storybook, Deno, and Nx also announced first-class support and investment in the Vite ecosystem. This upward trend is set to continue with Vitest adoption also rising, it’s expected to represent half of Vite’s npm downloads soon.

Let's Start experimenting with Vite 4.

pnpm create vite

React Vite Template

New React plugin using SWC during development#

SWC is now a mature replacement for Babel, especially in the context of React projects. SWC’s React Fast Refresh implementation is a lot faster than Babel, and for some projects, it is now a better alternative. From Vite 4, two plugins are available for React projects with different tradeoffs. We believe that both approaches are worth supporting at this point, and we’ll continue to explore improvements to both plugins in the future.

Learn more about SWC at https://swc.rs/

@vitejs/plugin-react#

@vitejs/plugin-react is a plugin that uses esbuild and Babel, achieving fast HMR with a small package footprint and the flexibility of being able to use the Babel transform pipeline.

@vitejs/plugin-react-swc (new)#

@vitejs/plugin-react-swc is a new plugin that uses esbuild during build but replaces Babel with SWC during development. For big projects that don’t require non-standard React extensions, cold start and Hot Module Replacement (HMR) can be significantly faster.

Let’s switch our project to use SWC (plugin-react-swc)

pnpm i -D @vitejs/plugin-react-swc

Change import in vite.config.js

vite.config.js

import { defineConfig } from 'vite'
//import react from '@vitejs/plugin-react'
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

React Vite SWC Project

Official Caveats (From Github)

https://github.com/vitejs/vite-plugin-react-swc

This plugin has limited options to enable good performances and be transpiler agnostic. Here is the list of non-configurable options that impact runtime behavior:

• useDefineForClassFields is always activated, as this matches the current ECMAScript spec
• jsx runtime is always automatic
• In development:
• esbuild is disabled, so the esbuild configuration has no effect
• target is es2020
• JS files are not transformed
• tsconfig is not resolved, so properties other than the ones listed above behave like TS defaults

Importing CSS as a String (From Official Website)

In Vite 3, importing the default export of a .css file could introduce a double loading of CSS.

import cssString from './global.css'

This double loading could occur since a .css file will be emitted and it's likely that the CSS string will also be used by the application code — for example, injected by the framework runtime. From Vite 4, the .css default export has been deprecated. The ?inline query suffix modifier needs to be used in this case, as that doesn't emit the imported .css styles.

import stuff from './global.css?inline'

Environment Variables (From Official Website)

Vite now uses dotenv 16 and dotenv-expand 9 (previously dotenv 14 and dotenv-expand 5). If you have a value including # or `, you will need to wrap them with quotes.


-VITE_APP=ab#cdef
+VITE_APP="ab#cdef"


For more details, see the dotenv and dotenv-expand changelog.

Summary

Vite is a lightweight development server that is designed to be fast and easy to use. The latest version, Vite 4.0, brings a number of new features and improvements that make it an even more powerful tool for building web applications. Here are a few reasons why developers might want to give Vite 4.0 a try:

• Speed : Vite is incredibly fast, thanks to its native ES module support and its ability to perform hot module replacement (HMR) without a webpack configuration. This makes development faster and more efficient, as you don’t have to wait for long build times or manually refresh the page to see your changes.
• Simplicity : Vite is easy to set up and use, with minimal configuration required. This means developers can get up and running quickly, without having to spend a lot of time on setup. Additionally, since it’s built on top of native ES modules, it requires minimal configuration and dependencies.
• Flexibility : Vite is highly customizable, with a range of options and plugins available. This allows developers to tailor their workflow to their specific needs. Additionally, Vite 4.0 has introduced a rollup and webpack plugin for even more flexibility.
• Great Community : Vite has a growing community of developers who contribute to the project and also provides a lot of plugins that you can use to enhance your development experience.

Given these benefits, developers who are looking for a fast, easy-to-use, and flexible development server should definitely give Vite 4.0 a try.

Reference:

1. https://vitejs.dev/blog/announcing-vite4.html
2. https://swc.rs/

Rajdeep Das | LinkedIn

Software Developer | Rajdeep Software Engineering & Consulting Services