Vite Vs Webpack
If data about JavaScript from 2021 is taken into consideration, Vite is a tool that is rising in its use instead of Webpack in terms of popularity. Vite is a building tool, with the aim to provide a development experience that is faster and leaner during the development of modern web projects. Vite does not provide optimization that is multifold, or better experience during production. A developer must not begin using Vite with the hope to see a drastic reduction in the size of the bundle generated or to see optimization in production.
For the betterment of the development experience, Vite offers 2 major things. One is a development server that allows for the enhancement of features over the ES modules. The second is a building command that will make a bundle of your code can be pre-configured to output assets that have been highly optimised during production. Vite has a sensible default box, it is opinionated and can be easily extensible with the help of plugin API as well as an API JavaScript offering full typing support.
Javascript code has always been written in a modular manner, the most commonly used being ES6 modules. Not many browsers can handle the loading of these ES6 modules natively, the concept of bundling the code and making use of tools for crawling, processing and concatenating the source modules into files is done so that browsers can handle the loading. The same function is performed by Webpack, Rollup and Parcel. When starting a project, it is important to remember that the size and number of Javascript modules being used can look like a small problem when writing the code, but as the project grows the development server will start taking a long time.
Transpiling and concatenating the code has to be done in a way that makes it easier for the browser to load it. If the feedback is slow, it will have an impact on the productivity of a developer. The aim of Vite is to address such problems and leverage the new advancements that exist in this ecosystem. The advancements are in the form of native ES modules being available in the browser and the numerous tools with JavaScript that have been compiled with native languages.
A bundle in Vite is split into 2 parts. The first is the vendor code or the external dependencies. These are mostly JavaScript codes that will not have to undergo any change in the process of development. The dependencies in Vite are bundled with the help of build, which is faster than the bundlers that are based on JavaScript. The second part is the ES modules or your code. The source code in Vite is served over the ESM. This means the browser will take part in the job of the bundler. Vite also performs the transformation and serving of the code on-demand as requested by the browser.
Vite makes the assumption that the development will take place in local machines and that the latest browser will provide support to the ES6 modules natively. This means that no bundling of the code will be done before the starting-up of the server. Even though many browsers natively support the loading of ES modules, it is not possible for all the target audience to be using these browsers alone, hence the need for bundling. If bundling is not done, a lot of round trips will have to be taken for fetching modules in the network. For the loading performance to be optimised during production, tree shaking can be done for bundling the code along with lazy coding or common chunk splitting.
Hot replacement of modules (HMR)
Developers often need to receive feedback quickly in order to decide on the changes to be made to the code. Waiting for full bundling to take place and then loading the page will lead to breakage in the flow and state currently established. Many bundlers provide support to Hot Module Replacement for this reason, which allows the module to replace itself without having an effect on the remaining page.
As the size of the project increases, HMR will take a longer time, thus having an impact on productivity. Vite will help give an edge over other tools for bundling because HMR is performed over native ESM. When an edit is made to a file, Vite will make a precise invalidation in the chain of the edited module and the HMR boundary. This means that HMR is updating at a consistently fast pace irrespective of the size of the application.
Vite makes advantage of the header of HTTP for speeding up the reloading of complete pages. The requests to source code modules are made conditional and the requests to dependency modules are heavily cached with the help of cache control. They are immutable, meaning they cannot hit the server once they have been cached. Vite makes the development server faster by skipping the need for doing bundling. It uses HTTP codes for making the reloading as well as the caching faster. Native ESM is used for Hot Module Replacement and hence the changes are reflected faster.
Server-side Rendering
Vite can handle the building of universal applications because of core configuration. Pre-rendering of HTML pages is supported by Vite and hence robot crawlers are able to fetch the content of the page without executing the JavaScript. With so many benefits offered, shifting to Vite can be a good decision. Configuration may be difficult because Vite is opinionated and makes use of simple APIs and has more abstraction. If specific long-tailed configured Web packs are used on the basis of this principle, it may not be a good idea to shift immediately to Vite. If Webpack is used with basic configurations, you can shift to Vite for gaining a better experience of development.
Is Vite Better than Webpack?
Vite is a modern JavaScript tool that can fix the experience of development with Webpack. Webpack tool is based on bundling, meaning that for serving an application, it works by crawling, processing and then concatenating the JavaScript files of the application. This is also applicable to the code of the application and its dependencies. Building an application and starting the process of development with the help of Webpack can take a long time, much longer for longer applications.
When a file is saved, Webpack works by rebuilding the entire JavaScript bundle. This change can take 10 seconds, time will reflect on the browser even if the HMR has been enabled. The feedback loop of Webpack is this slow and leads to a bad experience for the developer when they work on an application that is large scale in terms of JavaScript.
A new generation javascript tool, Vite works towards improving the experience of the developer as compared to Webpack when building applications. The two improvements Cute has over Webpack is that the JavaScript ecosystem has a better experience of development, and the ES modules in the browsers are available with bundling tools.
The core idea of Vite is to have development that is not bundled. ES modules are available in browsers and they allow developers to run a JavaScript application on various browsers without bundling them together. It is simply transforming and serving a piece of the code of the application with the help of ES modules when the request is made by the browser. When building begins, Vite divides the JavaScript modules into 2 types, the application modules and the dependency modules.
The importing of the JavaScript dependency modules takes place from the nodes folder. These are the modules that will be processed with the help of esbuild, which is a bundler that is written using Golang. The application modules are used for writing the application, they often have extensions that are library-specific. Webpack has a bundler based workflow that means the processing of the entire JavaScript module is needed before one request from the browser. Vite on the other hand will only process the dependency modules before one request from the browser. The application modules are transformed and then served by Vite when the application requires it.
This is what makes Vite faster than Webpack for development. As the size of the application increases, the time that is needed for processing the development will increase slowly. Even if most browsers support native ES modules, shipping of an application that has been bundled that also makes use of performance optimization techniques will lead to better performance compared to an unbundled application. This is why Cute makes use of the shipping technique of a pre-configured build command. Vite gives developers a sensible default of the Roll-up configuration that they can also customise according to their needs.
Conclusion
Vite has come as a new generation tool for JavaScript, and it leverages the ES modules that are available in the browser and the native bundler for bringing in the best development experience that can be had with recent JavaScript technologies. In a workflow based on ESM used for local development, Vite will ensure that the development server is fast even when processing an application that has a large scale. The configuration offered by Vite for production is sensible and handles syntax that is based on the library.
The use of Roll-up ensures that Vite is always performing in an optimised manner during production. The functionality of Vite can also be extended by the writing plugins. Even though Webpack is the default tool used for JavaScript building with popular applications such as Create React App, it is also possible for Vite to become a popular choice in the future on the basis of the feedback that has been received from the community of developers.