In the light and fast era, who wins and who loses between Vite and Webpack

Do you know Vite and Webpack? Maybe many "programmers" are very familiar with them.

Webpack

Webpack is a static module bundler for JavaScript applications that builds a dependency graph for the entire application. And this also leads to an unavoidable situation where using Webpack to start the application server will take a long time - some large applications may take more than 10 minutes.

At this point, you may already be in a frenzy, why is it so time-consuming? So let's take a look at the entire workflow based on Webpack bundles.

Webpack-based workflow

When we save the file, the entire JavaScript bundle will be rebuilt by Webpack, and even with HMR enabled, it may take up to 10 seconds for our modifications to render in the browser. In a more complex environment, Webpack's feedback is so slow, which will bring great inconvenience to developers.

After talking about Webpack, let's introduce Vite to you.

Vite

Vite is a new generation of JavaScript build tools designed to improve developers' experience with Webpack when building JavaScript applications.

Vite provides stronger support for developers based on two recent improvements in the JavaScript ecosystem - the availability of ES modules in the browser, and the compilation capabilities of native bundling tools like esbuild.

The core concept of Vite is unbundled development and construction.

The availability of ES modules in the browser allows you to run JavaScript applications on the browser without bundling them together.

The core idea of Vite is simple: use ES modules to transform and serve a piece of application code when requested by the browser.

After starting development, Vite will first divide JavaScript modules into two categories: dependency modules and application modules.

Dependent modules are JavaScript modules imported from the node\_modules folder. These modules will be processed and bound using esbuild, a JavaScript binder written in Go that executes 10 to 100 times faster than Webpack.

Application modules are modules written for an application, usually involving library-specific extensions like: jsx/vue or scss files.

While bundler-based workflows such as Webpack must process entire JavaScript modules before a single browser request, Vite only processes dependent modules before a single browser request.

When necessary, Vite converts our entire application module.

In order to facilitate your understanding, the following introduces the complete workflow based on Vite.

Vite-based workflow

This picture can clearly let everyone understand why Vite can process our development build faster than Webpack.

If we compare the two in a popular way, it’s like when we go to a restaurant for dinner, Webpack’s back kitchen cooks all the meals in one go, and then serves you one by one; while Vite’s cooks are quick and easy to finish a meal A dish is served.

With Vite, the time to process development builds increases slowly as the application grows.

Bundled builds for Vite

While all major browsers now support native ES modules, publishing a bundled app that includes performance optimization techniques such as tree-shaking, lazy loading, and generic chunk splitting will still bring developers more benefits than an unbundled app. Good user experience and higher overall performance.

For this reason, Vite has a built-in build configuration command that uses Rollup to bundle applications; we can freely configure Rollup according to our specific needs.

Getting Started with Vite

Building an application with Vite is simple. vite build creates a pre-configured application that can be supported by mainstream front-end frameworks such as React, Vue, and Svelte.

Commands required to create the application:

 
$ npm init @vitejs/app

or

 $ yarn create @vitejs/app

The prompts in the terminal will guide you to create the correct application, then run npm install

Start the development server

 
npm run dev

In addition to this, Vite+React applications can also be created. React's start page is very similar to Create React App's default template with a few modifications:

In addition, Vite preview is used to preview applications locally and supports many official templates, including vanilla JavaScript and TypeScript.

in conclusion

Judging from the current usage situation, Vite is undoubtedly the fastest among the new generation of JavaScript construction tools, but in the face of competition, Webpack also optimizes some content. As a classic and old tool, Webpack has a large user base itself, and its strength Still not to be underestimated, it is still the default JavaScript build tool for many popular applications like Next.

But as time goes by, the ecological power around Vite gradually catches up, combined with its own rapid advantages, it is also obvious that it will catch up later.

As a developer, of course, I will not dictate which one must be used, and choose different tools according to different scenarios. It is expected that these tools can further help development in the future and make development more convenient.

Extended reading

If you are interested in Vue, you may wish to follow the practical tutorial and build a table editing system based on Vue3.

Original link: https://blog.bitsrc.io/vite-is-better-than-webpack-d5dd59610d56