Vite JS – Next Generation Frontend Tooling

Created by Evan You, Vite JS is a no bundler dev environment for Vue.js. It speeds up the front-end development experience of an application. Vite delivers your code via native ES Module imports during development, allowing you to create Vue.js single-file components without having to bundle them. Vite was created with Vue 3 in mind, but it may also be used with other frameworks, like React.

Vite was created with Vue 3 in mind, but it may also be used with other frameworks, like TezJS and React.

Vite JS is a new frontend dev tool that offers a leaner, faster, and seamless workflow for developing modern web apps. Vite JS is majorly used to set up a development environment for various frameworks like React and Vue, and even for a Vanilla JavaScript app with a dev server and hot reloading by following just three commands.

Vite is a bridge between Twig/Craft CMS and the next-generation frontend build tool Vite.js. Vite allows for Hot Module Replacement (HMR) of JavaScript, CSS, and Twig (even through errors) during development and optimized production builds. Vite creates the required <script> and <link> tags to accommodate both synchronous and asynchronous JavaScript and CSS loading. Vite also has a caching layer for enhanced performance.

The creator of Vue – Evan You, created a Vite JS tool. He calls it “The next generation of front end tooling”. The primary goal of creating a Vite was to improve the front-end development experience.

Having said earlier, Vite is a build tool that enhances the front-end development experience. It lets you configure a development environment for Vue, TezJS and React frameworks.

Also, with the usage of Vite JS, you can develop a super-fast Single-page Application and integrate it with other back-ends. In addition, it also supports Server-side Rendering (SSR).

Vite also provides built-in support for:

• JSX and TSX
• Typescript
• Static assets such as images and JSON files
• Importing CSS files and CSS preprocessor files like .scss and .less

Vite follows the emerging trend of tools like Svelte (where the framework is essentially compiled away) and Snowpack, which use modern JavaScript features (such as ES Modules) to give a seamless, smoother, faster dev experience with no configuration and minimal installed package overhead. To work on your app, what you have to do is to install Vite on your system along with one or two plugins. Then you have to do configuration in just a few steps.

Vite is a modern dev environment that eliminates the need for bundling by serving browser native ES modules. It includes starting files (templates) for various frameworks and vanilla JavaScript, as well as TypeScript, JSX, and Sass support (although you need to install one dependency for Sass).

Vite is extremely quick because it uses native ES modules and does not require the entire bundle to be rebuilt when it makes any modifications or changes. And because of this, HMR updates are always quick, regardless of the size of your application. Vite comes with a pre-configured build command that optimizes speed out of the box when bundling for production.

Vite is not only fast, but it also supports HMR - Hot Module Replacement (which means you can see the code refresh in the browser as you work), and you can use it to generate a minified version of your project for deployment.

With the usage of Vite, you can rapidly get started with a Vue or React project without having to invest in the Vue CLI or Create React App, both of which offer everything you need. This makes it the suitable choice for rapid prototyping and small projects, yet nothing prevents you from using it in a larger project as well.

ViteJS is the next generation frontend tooling, which offers:

• Instant Server Start
• Fully Typed APIs
• Universal Plugin Interface
• Optimized Build
• Rich Features
• Super-Fast HMR

Many of the developers are in a dilemma to consider Vite as a framework or tool. So, let me clear the fog that Vite is a frontend dev tool, which supports any frontend framework, with supported templates for Vue, TezJS, React, Preact, Lit Element, Svelte, and vanilla JavaScript. However, Vite is not only Vue-specific.

In a nutshell, Vite is simply a build tool and dev environment that any developer can leverage.

If you want to run Vite on your system, you will need a copy of Node installed on your system.

NPM stands for Node Package Manager for Node.js. Every package is defined in files called package. It’s the default package manager for the JavaScript runtime environment Node.js. Hence, Vite uses NPM to develop an application with the below-given command:

#If using NPM

$ npm init vite-app <project-name>

$ cd <project-name>

$ npm install

$ npm run dev

Do you know, setting up Vite is a really faster and hassle-free process?

You only need Node version >= 12.0.0

Then open the terminal to write the below code:

npm init vite@latest

Then, follow the three steps here:

• Create a project name
• Select a framework (React, Vue, Preact, Lit, Svelte, Vanilla JS)
• TypeScript or pure JavaScript

And you are done now!

Now move to your project folder with:

cd <YOUR_PROJECT_NAME>

Install the dependencies:

npm install

And start the development server:

npm run dev

Here's what happens next:

Whoa! That’s completely insane. It’s ready in just less than 0.3 seconds.

Just for a comparison, the same app made with VueCLI + Webpack takes 10s initially. This makes Vite 39x faster!

Also, Hot Module Reload is – instant.

Initially, webpack takes around 2–3 seconds and up to 5 seconds for massive apps.

Actually, Vite builds upon two interesting trends. The first is modern JavaScript, which is widely supported. Furthermore, Native ES modules now have over 92% global support, and this number will only grow as Lexi browsers, such as IE11, become obsolete rapidly.

While talking about the second important thing – JavaScript data compilers are being written in compile to native languages. Esbuild (written in Go) and swc (written in Rust) are the two most prominent examples. However, both tools are significantly faster than JavaScript-based tools. Depending on the nature of work and the number of CPU cores used, it can be up to a hundred times faster.

Moreover, every time you make changes in a file and update it, you need to update the whole bundle to see the change on the screen. Vite utilizes the power of native module imports, making your Hot Module Reload instant. Well, that’s the reason Vite is quite faster.

Vite.js is a tool that can replace webpack, Gulp, Mix, etc. for developing frontend like CSS and JavaScript. You can use Vite to craft CMS websites.

The content of .css files will be injected into the page via a <style> tag with HMR support when they are imported. You may also use the module's default export to get the processed CSS as a string.

The core functionality of Vite is similar to webpack + webapck-dev-server with some core improvements on developer experience, such as:

• Regardless of app size, you'll spend less time waiting for your app to start
• Instant HMR, regardless of the size of the app
• On-demand compilation
• Zero configuration for numerous pre-processors out of the box
• Esbuild powered typescript / jsx (super quick)

Vue CLI is a must-have tool for fast configuring a Vue-based project with standard build tools and best-practice settings. It's vital to remember that Vue CLI is built on top of Webpack, which means that both the dev server and build functionality and performance will be supersets of Webpack.

On the other hand, Vite is also a build tool offering basic project scaffolding and a dev server similar to Vue CLI. Vite is not based on Webpack and instead has its own development server that uses native ES modules in the browser. Because of this architecture, it is orders of magnitude faster than Webpack's development server. Vite uses Rollup for the build, which is also faster.

Vite is still in beta version, and it looks that the primary goal is to focus on providing a quick dev server and minimal build tool rather than being an all-in-one tool like Vue CLI.

Evan You created a no-bundler development environment – Vite for Vue.js. Vite delivers your code via native ES Module imports, allowing you to create Vue.js single-file components without having to bundle them.

If you want to deploy your Vite app with a Vercel for Git, make sure it has been pushed to the Git repository.

Go to https://vercel.com/import/git and import the project into Vercel using your Git of choice (GitHub, GitLab, or BitBucket).

Select the project root with the project’s package.json and override the build step using npm run build and the output dir to be ./dist.

Once your project is imported, all pushes to branches will result in Preview Deployments. All changes to the Production Branch (often referred to as “main”) will result in a Production Deployment.

You'll get a URL to see your app live once it's been deployed, such as this: https://vite.vercel.app Everything can be achieved if you are a Vite developer or hire Vite developers for your project.

Yes! We can use Vite to create a React.js application.

Vite 2.0 is the stable release of Vite. It offers many big improvements over its previous incarnation:

• Framework Agnostic Core
• New Plugin Format and API
• Esbuild Powered Dep Pre-Bundling
• First-class CSS Support
• SSR Support
• Opt-in Legacy Browser Support

Vite uses esbuild but not Rollup for dependent pre-bundling. This leads to significant speed gains in terms of cold server startup and dependency invalidation re-bundling.

Vite uses esbuild to convert TypeScript to JavaScript, which is around 20-30 times quicker than vanilla tsc, and HMR updates take less than 50 milliseconds to appear in the browser.

Actually, Vite doesn’t work with Vue 2, at least for now and the vue-template-compiler is not the right package. However, Vite works completely fine with Vue 3.