--- title: Vite might be your next front end bundler - Best Software Development Team Extension Partner for Nordics description: Imagine you have an existing react project that contains a lot of external modules and also your own custom module. When you start your dev server, you run image: https://www.craftsmensoftware.com/hubfs/Imported_Blog_Media/Vite-might-be-your-next-front-end-bundler.webp --- [Skip to main content](https://www.craftsmensoftware.com/blog/vite-might-be-your-next-front-end-bundler#main-content) [![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png) ![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png) ![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png) ![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png)](https://www.craftsmensoftware.com) - [About us](https://www.craftsmensoftware.com/about-us) - [Client Stories](https://www.craftsmensoftware.com/client-success-stories) - [How We Work](https://www.craftsmensoftware.com/how-we-work) - [Case Study](https://www.craftsmensoftware.com/case-study) - [Blog](https://www.craftsmensoftware.com/blog) - [Career](https://careers.craftsmensoftware.com/) Open main navigation Close main navigation - [About us](https://www.craftsmensoftware.com/about-us) - [Client Stories](https://www.craftsmensoftware.com/client-success-stories) - [How We Work](https://www.craftsmensoftware.com/how-we-work) - [Case Study](https://www.craftsmensoftware.com/case-study) - [Blog](https://www.craftsmensoftware.com/blog) - [Career](https://careers.craftsmensoftware.com/) - [Get In Touch](https://www.craftsmensoftware.com/contact-us) [Get In Touch](https://www.craftsmensoftware.com/contact-us) ## Vite might be your next front end bundler ![Vite might be your next front end bundler](https://www.craftsmensoftware.com/hs-fs/hubfs/Imported_Blog_Media/Vite-might-be-your-next-front-end-bundler.webp?width=1200&height=820&name=Vite-might-be-your-next-front-end-bundler.webp) Imagine you have an existing react project that contains a lot of external modules and also your own custom module. When you start your dev server, you run **npm start** or **yarn start** and then what do you do? You wait for the dev server to start.   This waiting time depends on how big your project is and how many external modules you have imported in your project. As we start to add more and more functionalities to our project, the amount of JavaScript code that needs to be processed is also increased exponentially. Moreover, if we are not only using JavaScript files in the front end, there are a lot of CSS files, static images also. As a result, we reach a point where the bundling mechanism hits a point where it starts to bottleneck. ## How Vite can improve bundling performance There are two obvious problem with the bundling, **Slow start of the dev server** and **Slow update**. When you initially start your dev server, a bundler-based setup starts building your whole project before it can actually serve the browser with the necessary content. But **Vite** can improve the start of the dev server because it works in a bit different way. You may ask how. We can divide our project into two part. - - Dependencies - - Source Code   ### How Vite helps to improve starting of the dev server **Dependencies** are something that do not change during the lifecycle of the development. They are mostly written in plain JavaScript that a browser can easily interpret. There are some large dependencies that can also take a lot of times to process. **Source Code** are often written in non plain JavaScript (e.g JSX, TSX, Vue) that needs to transformed into plain JavaScript. Also source code are often edited but not all of the source code is needed to be served at the same time. Vite processes **Dependencies** and **Source Code** differently. It pre-bundles dependencies using [esbuild](https://esbuild.github.io/) which is proven to be 10-100x faster than traditional JavaScript based bundler. And for the **Source Code**, Vite serves the source code over [Native ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), basically letting the browser to handle the job of bundling. Vite just transforms and serves the browser code on demand. Dynamic imports are only transformed if and only if it is used on the screen.   ### How Vite hepls to improve on demand update of Source Code When a file is edited in the bundler-based build setup, the whole bundle that contains the source code is rebuilt by the bundler. For obvious reason, it seems inefficient to rebuild the whole bundle as only few lines has changed in the code. In some of the bundlers, dev server runs the bundling in memory that it needs to invalidate the part of the module graph when a file is changed. But yet it needs to rebuild the whole bundle and serve to the webpage. Reconstructing the bundle can be expensive, and reloading the page blows away the current state of the application. This is why some bundlers support Hot Module Replacement (HMR): allowing a module to “hot replace” itself without affecting the rest of the page. This greatly improves DX – however, in practice we’ve found that even HMR update speed deteriorates significantly as the size of the application grows. In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application. Vite also leverages HTTP headers to speed up full page reloads (again, let the browser do more work for us): source code module requests are made conditional via `304 Not Modified`, and dependency module requests are strongly cached via `Cache-Control: max-age=31536000,immutable` so they don’t hit the server again once cached. ### Why Vite, not esbuild While `esbuild` is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling *applications* are still work in progress – in particular code-splitting and CSS handling ## Configuring Vite with new project To start with Vite, it is quite easy. You just have to follow some basic instruction and command. In your root directory where you want to save your project, just run the following command: ``` npm create vite@latest my-react-app or yarn create vite my-react-app ```   You will be prompted to select the framework as below: ![](https://www.craftsmensoftware.com/hs-fs/hubfs/Imported_Blog_Media/vite-ins-1.webp?width=472&height=169&name=vite-ins-1.webp)   Select the framework of your preference. After that you will be prompted to select framework language (i.e. JavaScript or TypeScript) ![](https://www.craftsmensoftware.com/hs-fs/hubfs/Imported_Blog_Media/vite-options-1.webp?width=473&height=173&name=vite-options-1.webp)   Select your preference and you are good to go. In the directory just run: ```   ``` npm install Copy or yarn install Copy ```   ``` ![Abul Hasnat](https://www.craftsmensoftware.com/hs-fs/hubfs/Abul%20Hasnat.png?width=120&height=120&name=Abul%20Hasnat.png) Author: **[Abul Hasnat](https://www.craftsmensoftware.com/blog/author/abul-hasnat)** 01/07/2023 Software Development Engineer II ![Hire AI-Native Engineers](https://www.craftsmensoftware.com/hubfs/Z63_3132.webp) ## Hire AI-Native Engineers [![Book A Strategy Call](https://www.craftsmensoftware.com/hubfs/Book%20A%20Strategy%20Call.svg)](https://www.craftsmensoftware.com/contact-us) ### **About Craftsmen** [The Team](https://www.craftsmensoftware.com/about-us) [Our Partnership Model](https://www.craftsmensoftware.com/how-we-work) [Career](https://careers.craftsmensoftware.com/) [FAQ](https://www.craftsmensoftware.com/frequently-asked-questions-faq) [Privacy Policy](https://www.craftsmensoftware.com/privacy-policy-best-software-development-company-in-bangladesh)  [Craftsmen LinkedIn Page](https://linkedin.com/company/craftsmensoftware)   [Craftsmen Facebook Page](https://www.facebook.com/craftsmenltd/)   [Craftsmen Youtube Page](https://www.youtube.com/@craftsmensoftware) ### **Headquarter** **Craftsmen UK** One Sovereign Quay, Bridge End, Leeds, West Yorkshire LS1 4AG United Kingdom  **Operational Hub Craftsmen Bangladesh** Plot # 316, Lane # 4, DOHS Baridhara, Dhaka - 1206, Bangladesh ### **Sales & Partnership Offices** **Craftsmen Norway** Kong Oscars gate 66, 68, 5017 Bergen, Norway **Craftsmen France** 6 Avenue Pierre Grenier, 92100 Boulogne-Billancourt, Paris, France ### **A Team You Can Trust** #### [![ISO Certificates New](https://www.craftsmensoftware.com/hs-fs/hubfs/ISO%20Certificates%20New.png?width=300&height=96&name=ISO%20Certificates%20New.png)](https://www.craftsmensoftware.com/trust-centre) [![glassdoor (1)](https://www.craftsmensoftware.com/hs-fs/hubfs/glassdoor%20(1).png?width=110&height=79&name=glassdoor%20(1).png)](https://www.glassdoor.com/Overview/Working-at-Craftsmen-EI_IE3004266.11,20.htm) [![goodfirms.co](https://www.craftsmensoftware.com/hs-fs/hubfs/goodfirms.co.webp?width=110&height=95&name=goodfirms.co.webp)](https://www.craftsmensoftware.com/blog/craftsmen-thrives-at-goodfirms-by-offering-scalable-robust-software-solutions-developed-with-quality-by-maestros)    © 2026 Craftsmen. All rights reserved. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Abul Hasnat", "url" : "https://www.craftsmensoftware.com/blog/author/abul-hasnat" }, "dateModified" : "2026-04-30T08:24:28.287Z", "datePublished" : "2023-06-30T22:45:00.000Z", "headline" : "Vite might be your next front end bundler - Best Software Development Team Extension Partner for Nordics", "image" : [ "https://www.craftsmensoftware.com/hubfs/Imported_Blog_Media/Vite-might-be-your-next-front-end-bundler.webp" ], "mainEntityOfPage" : { "@id" : "https://www.craftsmensoftware.com/blog/vite-might-be-your-next-front-end-bundler", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.craftsmensoftware.com/hubfs/Craftsmen%20Logo_Black.png" }, "name" : "Craftsmen Ltd." } } ``` ```json { "@context" : "https://schema.org", "@type" : "SoftwareCompany", "address" : [ { "@type" : "PostalAddress", "addressCountry" : "Norway", "addressLocality" : "Oslo" }, { "@type" : "PostalAddress", "addressCountry" : "United Kingdom", "addressLocality" : "London" }, { "@type" : "PostalAddress", "addressCountry" : "France", "addressLocality" : "Paris" }, { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "New York" }, { "@type" : "PostalAddress", "addressCountry" : "Bangladesh", "addressLocality" : "Dhaka" } ], "areaServed" : [ { "@type" : "Country", "name" : "Norway" }, { "@type" : "Country", "name" : "Sweden" }, { "@type" : "Country", "name" : "United Kingdom" }, { "@type" : "Country", "name" : "France" }, { "@type" : "Country", "name" : "United States" }, { "@type" : "Country", "name" : "Bangladesh" } ], "description" : "Trusted AI-native engineering partner providing software team extension, IT staff augmentation, and dedicated developer teams globally.", "logo" : "https://www.craftsmensoftware.com/hubfs/logo.png", "name" : "Craftsmen Software", "url" : "https://www.craftsmensoftware.com" } ```