Vite (software)

Last updated
Vite
Original author(s) Evan You
Initial release20 April 2020;4 years ago (2020-04-20)
Stable release
v5.4.9 / 14 October 2024;43 days ago (2024-10-14)
Repository github.com/vitejs/vite
Written in TypeScript
Platform Node.js, Deno, Bun
Available in English
Docs in English, Chinese, Japanese and Spanish
Type Development server
License MIT License
Website vitejs.dev OOjs UI icon edit-ltr-progressive.svg

Vite (French: [vit] , like "veet") is a local development server written by Evan You, [1] the creator of Vue.js, and used by default by Vue and for React project templates. It has support for TypeScript and JSX. It uses Rollup and esbuild internally for bundling. [2]

Contents

It monitors files as they're being edited and upon file save the web browser reloads the code being edited through a process called Hot Module Replacement (HMR) [3] which works by just reloading the specific file being changed using ES6 modules (ESM) instead of recompiling the entire application.

Vite provides built-in support for server-side rendering (SSR). By default, it listens on TCP port 5173. It is possible to configure Vite to serve content over HTTPS and proxy requests (including WebSocket) to a back-end web server (such as Apache HTTP Server or lighttpd).

Features and performance

Vite has a Hot Module Replacement (HMR) system, which reduces wait times during development. Vite supports frameworks such as React, Vue, and Svelte, and has server-side rendering (SSR), code-splitting, and asynchronous loading.

Vite's production build times are fast compared to traditional build tools, clocking in at 3.37 seconds versus Webpack's 10.82 seconds and Parcel's 9.01 seconds. Vite is framework-agnostic and integrates seamlessly with tools such as Vitest for testing, Astro for content-driven sites, and Slidev for presentations. [4]

See also

Related Research Articles

Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. Scripts can be written in any of a number of server-side scripting languages that are available. Server-side scripting is distinguished from client-side scripting where embedded scripts, such as JavaScript, are run client-side in a web browser, but both techniques are often used together. The alternative to either or both types of scripting is for the web server itself to deliver a static web page.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

In computing, a solution stack or software stack is a set of software subsystems or components needed to create a complete platform such that no additional software is needed to support applications. Applications are said to "run on" or "run on top of" the resulting platform.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

HTTP Live Streaming is an HTTP-based adaptive bitrate streaming communications protocol developed by Apple Inc. and released in 2009. Support for the protocol is widespread in media players, web browsers, mobile devices, and streaming media servers. As of 2022, an annual video industry survey has consistently found it to be the most popular streaming format.

npm JavaScript package manager

npm is a package manager for the JavaScript programming language maintained by npm, Inc., a subsidiary of GitHub. npm is the default package manager for the JavaScript runtime environment Node.js and is included as a recommended feature in the Node.js installer.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">MEAN (solution stack)</span> JavaScript software stack

MEAN is a source-available JavaScript software stack for building dynamic web sites and web applications. A variation known as MERN replaces Angular with React.js front-end, and another named MEVN use Vue.js as front-end.

React is a free and open-source front-end JavaScript library that aims to make building user interfaces based on components more "seamless". It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">Webpack</span> Open-source JavaScript module bundler

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

Angular is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks.

This is a list of articles related to the JavaScript programming language.

Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

Blazor is a free and open-source web framework that enables developers to create web user interfaces (UI) based on components, using C# and HTML. It is being developed by Microsoft, as part of the ASP.NET Core web app framework.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static rendering.

<span class="mw-page-title-main">Quasar Framework</span> JavaScript framework

The Quasar Framework is an open-source Vue.js based framework for building apps with a single codebase. It can be deployed on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux. Quasar was created by Razvan Stoenescu and is maintained by a small team of developers and contributors. Most from the core team currently work at various companies such as Lenovo, IntelliView Technologies Inc. and AG Development Services.

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a web page that is static from the perspective of the web browser, delivered either through static rendering or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements in the DOM. Because the HTML is pre-rendered on a server, this allows for a fast "first contentful paint", but there is a period of time afterward where the page appears to be fully loaded and interactive, but is not until the client-side JavaScript is executed and event handlers have been attached.

<span class="mw-page-title-main">Pinia</span> Open-source web development framework

Pinia is a store library and state management framework for Vue.js. Designed primarily for building front-end web applications, it uses declarative syntax and offers its own state management API. Pinia was endorsed by the Vue.js team as a credible alternative to Vuex and is currently the official state management library for Vue.

References

  1. "Introducing Vite JS - Next-Gen Frontend Tooling". Radixweb. Retrieved 10 November 2023.
  2. "Why Vite". vite.dev.
  3. "Educative Answers - Trusted Answers to Developer Questions". Educative. Retrieved 10 November 2023.
  4. "Understanding Vite and Bun.js: A Detailed Developer's Review". Valletta Software Blog. July 27, 2024. Retrieved August 28, 2024.