Vite.js: Fast build tool from the Vue.js forge


Hardly any other programming language polarizes as much as JavaScript. While it is the preferred language for some developers, the hairs on the back of their necks stand up at the sound of others. But Vite – a new project by the team led by Evan You, the founder of the client-side JavaScript web framework Vue, proves that JavaScript enables extremely fast development.

Vite (from French “vite” for fast) should, according to the ideas of its development team, prevail in the JavaScript ecosystem primarily with speed and development convenience. As a development server and build tool, Vite accompanies JavaScript developers from the creation of the project to the release. So far, most developers have relied on webpack – consciously or through tools such as the Create React app or the Vue CLI (Command Line Interface). But the larger the scope of the project, the more sluggish webpack’s own development server becomes. Developers wait longer and longer until changes made are visible. Out of this annoyance the idea for Vite arose.  The  release of the stable version 2.0 in mid-February 2021 further strengthened Vite’s position.

This post is part of a series of articles to which heise Developer has explicitly invited young developers – with the aim of informing their own kind, but of course also interested “older semesters”, about current trends, developments, phenomena and personal experiences. © The  articles in this series of articles appear on a monthly basis. Are you a “Young Professional” yourself and want to be part of this series? ©

 The n apply to the editorial team with a suggestion. She is at your side with helpful tips throughout the writing, editing and approval process.

At its core, Webpack is a so-called bundler. It collects all JavaScript, CSS and image files and merges them into significantly fewer individual parts. If, for example, auxiliary methods are still in a different file in the source code than the API call, in the finished build both may be found in a single, long JavaScript file. ©

 The  advantage of this is the reduced loading time for the end user: Instead of thousands of files, the browser only loads a few. However, the runtime of the bundling depends on the number of files.

During the build, a few more seconds are still relatively manageable. It becomes problematic when developing with the development server, because it also uses webpack bundling. If developers change a single file, webpack has to regenerate entire bundles from dozens of files. This is why the so-called hot module replacement – i.e. the immediate replacement of changed components in the browser without the need to reload – quickly loses its focus when the waiting times approach ten seconds. Vite only needs 430 milliseconds to start an empty React application, while Create React App or webpack takes more than 12 seconds (see the following listing).

yarn run v1.22.10
$ vite

  ⚡ Vite dev server running at:

  > Network:
  > Network:
  > Network:
  > Local:    http://localhost:3000/

  ready in 430ms

[13:07:00] yarn run v1.22.10
$ react-scripts start
Starting the development server...

[13:07:12] Compiled successfully!

You can now view cra-example in the browser.

  Local:            http://localhost:3000
  On Your Network:

Note that the development build is not optimized.
To create a production build, use yarn build.

By JavaScript standards, webpack is a real dinosaur. It has matured since its initial publication in 2012 and is unbeatable in handling rare marginal cases well. For example, so-called “deep imports” are often the cause of bugs in the GitHub repository, while webpack rarely has problems in such scenarios. But webpack’s configuration size also shows flexibility and complexity at the same time, which is why around 90 percent of the use cases often lose speed and convenience.

To home page

[ source link ]

Vitejs Fast build tool Vuejs forge


Please enter your comment!
Please enter your name here