If you are looking to improve your experience in frontend development, Vite JS is for you. It is the next generation of frontend tooling. Vite JS consist of a dev server that bundles your code for production. It allows programmers to set up a development environment for frameworks such as Vue and React and even for Vanilla Javascript app with dev server. Apart from this, it allows the development team to hot reload in just three commands.
Vite offers a fast and opinionated build tool with highly customizable API using plugins. Also it supports many popular front-end libraries such as Preact, Vue JS, React and Vanilla Javascript through templates. Let’s see details of Vite JS.
Vite is a build tool that aims to provide faster and leaner development experience for web projects. It achieves this in two parts- First, in development, app code is not bundled, instead code is imported into browser using ES Modules, the native module system for Javascript. As ESM is supported in all modern browsers, Vite can take an advantage of this to completely remove a build step while in development. Libraries that need to be imported are still compiled, but for this Vite makes use of esbuilt tool written in Go. Esbuilt pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.
Second, Vite provides a build step using Rollup that has been highly optimized for generating static assets. Taking advantage of Rollup, Vite also provides a diverse plugin ecosystem. Standard Rollup plugins can be used with Vite, and custom Vie-specific plugins. Vite plugins extends Rollup’s well-designed plugin interface with some extra vite-specific options. Thus, you can write a Vite plugin once and have it work for both dev and build.
Latest version of Vite.js offers lots of new features. Released on 16th February 2021, Vite 2.0 offers completely redesigned architecture, first-class CSS support, a new plugin system and so on.
Browser support for ES6 modules was poor when ES modules were originally introduced in ES2016. Thus, lots of current browsers now support ES modules natively, and allows you to use import and export statements natively. You can include imports in HTML by specifying that you’re importing a module using type+”module” attribute in script tag:
<script type="module" src="filename.js"> </script>
According to the documentation of Vite JS, ES import syntax is served directly to browser in source code. <script module> native supported browser parses them automatically, making HTTP requests for every import. Dev server receives HTTP requests from browser and executes any necessary code changes. This improves the speed and makes Vite server very rapid.
Vite dev server starts instantly, and with the Hot Module replacement, eahc code is reflected in browser quickly, sometimes instantly.
vite v2.1.3 dev server running at: > Network: http://192.168.1.90.3000/ > Local: http://localhost:3000/ ready in 467ms.
Vite 2.0 offers features such as CSS splitting, URL re-bashing and so on. These features are supported without configuration. Resolver of Vite improves @import and url() paths in CSS by respecting aliases and npm dependencies.
Latest version Vite 2.0 offers faster build time with ESbuild. ESBuild is a bundler written in Go. It is 10-100 times faster than bundler. Vite 2.0 takes an advantage of ESbuild to convert CommonJS modules to ESM for dependencies. According to the official document, Vite 2.0 uses ESBuild rather than Rollup. It improves the performance in build time.
At the moment, ESBuild is used for pre bundling dependencies.
Vite improves the developer’s performance by identifying build type and accessing configs and dev server configurations. It is compatible with lots of Rollup.js plugins. New plugin system makes use of unique Hot Module Reload handling and offers API to add middleware to dev server. Plugin server is WMR based system. New system adds Vite-specific functionality to the Rollup plugin system.
Vite 2.0 has high-quality boilerplate for various frameworks like Vue.js, Preact, React and so on. It offers a vanilla Javascript boilerplate. Other boilerplates also support Typescript. Vite offers a consistent tooling experience across frameworks because of its framework-agnostic nature.
Vite supports SSR for React.js and Vue 3. It provides APIs and constructs for loading and updating ESM-based source code effectively. It externalizes CommonJS-compatible dependencies. Vite SSR is an extremely low-level functionality, and the team aims to offer tooling for a more higher-level feature in coming days. In production build, SSR can be decoupled from Vite. With same setup, it can support pre-rendering.
Yet, browser don’t support bare module imports where you can import from a package name like import { createApp } from ‘vue’, because it’s not a relative path to our node_modules. Vite searches for bare import specifiers in your Javascript files. Once it finds them, it rewrites them and uses module resolution to locate relevant files from your project dependencies.It resolves them as legitimate module specifiers.
It is an amazing feature in Javascript bundlers that changes source code in browser without refreshing the browser. Using Vite js tool, there’s no need to reload the browser to update content, as each change is reflected in browser with immediate effect. Hot module replacement is decoupled from all modules. This makes your project faster, regardless of app size.
If you want complete control of your project, you can extend the default configuration with vite.config.js or vite.config.ts file in existing project or directory from base root directory.
Also you can mention config file through vite -config my-config.js. You can add support for custom file transforms by adding Rollup plugin to build and Koa middleware in configuration file.
We know that, browsers send source files to compile and only required or modified code is compiled on screen. In Vite, without modified files return a 304 error code. Unlike other existing bundlers, they compile every located file in project and bundle them before making any changes. Hence Vite is great for large-size projects.
Some Other Features-
Know more