{"id":22503,"date":"2023-08-09T09:23:00","date_gmt":"2023-08-09T07:23:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=22503"},"modified":"2023-08-07T11:23:48","modified_gmt":"2023-08-07T09:23:48","slug":"vitejs-guide","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/vitejs-guide\/","title":{"rendered":"The Rise of ViteJS: Unraveling its Popularity"},"content":{"rendered":"\n

Contemporary web apps rely heavily on JavaScript<\/a> and its ecosystem. No longer simply responsible for ad-hoc snippets in otherwise static pages, JavaScript is now the driving force for dynamic web apps whose functionality closely models that of native apps. But this complexity comes at a cost. These apps may leverage hundreds or even thousands of JavaScript (also ECMAScript or TypeScript) modules.<\/p>\n\n\n\n

ViteJS is fundamentally a build tool and local development server. It is designed to streamline the front-end development of modern web apps by reloading code modules dynamically to avoid recompiling the entire application<\/strong>. In this article, we’ll offer an overview of ViteJS, covering its key features and benefits. We’ll also show you how to get started and expand functionality, and look at how Vite can optimise your apps.<\/p>\n\n\n\n

Key features of ViteJS<\/h2>\n\n\n\n

Tools like Webpack<\/a> and Rollup<\/a> have helped to streamline front-end development and as native ES (ECMAScript) module support has become widespread in browsers, the situation has improved considerably. In fact, Vite is, in part, built on Rollup. But bottlenecks can be a problem for developers with complex code<\/strong>. Dev servers using bundler-based setups can take a significant time – even minutes – to reload when changes are made. Rather than bundling, however, Vite.js supports native ES modules (ESM) and serves them direct to the browser. That means it doesn’t need to reload the whole application when you make a change, so there’s no interruption to your development cycle.<\/p>\n\n\n\n

ViteJS achieves this speed through Hot Module Replacement (HMR). HMR means that modules can replace themselves independently of other page elements. While some bundlers support HMR, Vite’s approach is faster, using native ESM, so only a restricted portion of the dependency chain is invalidated. This means HMR times don’t expand as the application gains complexity.<\/p>\n\n\n\n

Vite has direct support for code-splitting and lazy loading to aid performance<\/a><\/strong>. With frameworks like Vue or React, you need to declare lazy import components manually for each route. However, Vite splits chunks automatically according to a vendor-based config, determining what needs to be loaded and when.<\/p>\n\n\n\n

Dependency pre-bundling takes place transparently when you run the vite<\/code> command for the first time in your project. This improves both compatibility and performance. CommonJS and UMD components are converted to native ESM and the conversion of ESM dependencies into a single module enhances later page loads by requiring only a single HTTP request.<\/p>\n\n\n\n

\n\n\n\n

Recommended Video: What is Vite? By Jennifer Bland<\/em><\/strong>
[jwp-video n=”1″]<\/p>\n\n\n\n

\n\n\n\n

Getting Started with ViteJS<\/h2>\n\n\n\n

Vite is designed for speed and efficiency, so getting started is easy. It embraces the paradigm of convention over configuration (CoC)<\/a>, also known as ‘opinionated’ software. That means it works well straight out of the box. But it’s also very flexible and extensible, with wide support for languages and frameworks. Supported templates for JavaScript are:
<\/p>\n\n\n\n