The Rise of Vite.js
Hi Folks today i am going to tell you about Bundlers (webpack or vite) and why do we need them.
Tools like React, Vue, or Angular for the backend, SASS as a CSS processor, and maybe TypeScript instead of vanilla JavaScript. Those are some of the most common tools used by modern developer today. The thing is… the browser does not know what React, SASS, or Typescript is. It does not care about anything that is not HTML, CSS, and JavaScript thats why we need to translate all these files in order to make browser understand and thats why compilers comes into the picture
A compiler translates your React, SASS, Typescript, etc. to JS, CSS and Html so your browser can make use of the code. Compilers use Bundlers to merge multiple JavaScript files into a single file that can be run inside the browser. This bundle will contain the whole source code and all the imported dependencies needed to run your app. To use your fancy SASS, we need loaders to translate it directly to CSS.
Tools like Webpack, Rollup, and Vite make those things possible.
Webpack
Webpack is a bundler-based build tool, which means that to serve your application, it needs to crawl, process, and concatenate your application’s entire JavaScript modules (dependency modules and application modules). This is the reason why building an application for development and starting a development server using Webpack might take a painfully long time — some large applications may take more than 10 minutes.
The entire JavaScript bundle will be rebuilt by Webpack when you save a file, which is why, even with HMR turned on, changes can take up to ten seconds to appear in the browser. Working on massive JavaScript applications will lead to a poor developer experience due to Webpack’s delayed feedback loop.
Vite
Vite, (which is French) and means “fast,” was built by Evan You, the creator and maintainer of Vue, to offer a complete framework agnostic bundler with up to 10–100x faster compile times and an amazing developer experience with near real-time hot-reloading built-in.
While a bundler-based workflow like Webpack will have to process your entire JavaScript modules before a single browser request, Vite only processes your dependency modules before a single browser request.
The availability of ES Modules in the browser allows you to run a JavaScript application on the browser without having to bundle them together.
The core idea of Vite is simple: transform and serve a piece of your application code using ES Modules when the browser requests for it.
When you start the development build, Vite will start by dividing your JavaScript modules into two categories: dependency modules and application modules.
The dependency modules are JavaScript modules that you imported from the node modules folder. These modules will be processed and bundled using esbuild, a JavaScript bundler written in Go that performs 10–100x faster than Webpack.
The application modules are modules that you write for your application, which often involves library-specific extensions like .jsx, .vue, or .scss files.
While a bundler-based workflow like Webpack will have to process your entire JavaScript modules before a single browser request, Vite only processes your dependency modules before a single browser request. Your application modules will be transformed and served by Vite when they are required by your application:
so what do you think we should switch to vite …here is the answer by Evan
As Evan himself stated:
“It is NOT Vite’s goal to completely replace webpack. There are probably a small number of features/capabilities that some existing webpack projects rely on that doesn’t exist in Vite, but those features are in the long tail and are only needed by a small number of power users who write bespoke webpack configuration. Some of the commenters here probably belong in this group.
If you do (e.g., you tried to migrate and found roadblocks, or evaluated and concluded that Vite doesn’t suite your needs), use webpack by all means! You are not Vite’s target audience by design — and you should absolutely pick the right tool for the job.”
