Vite.js: a quick builder of Vue.js forge
Hardly any programming language attracts as much as JavaScript. While it is the preferred language of some developers, the hair on the back of their necks stands at the voices of others. But Vite – a new project by the team led by Evan You, founder of the client-side JavaScript web framework Vue, is proving that JavaScript enables very fast development.
Vite (from the French “vite” for fast) According to his development team, the JavaScript ecosystem should essentially prevail quickly and easily in development. As a development server and building tool, Vite accompanies JavaScript developers from project creation to release. Until now, most developers have relied on the web package – consciously or through tools like Create React or Vue CLI (Command Line Interface). But the larger the project scope, the slower your webpack development server becomes. Developers are waiting for a longer and longer time for the changes made to appear. From this inconvenience arose the idea of Vite. The The stable version 2.0 will be launched mid-February 2021 Vite reinforced the position.
This contribution is part of a series of articles that developer Hays has explicitly called upon young developers – with the aim of informing their classes, but of course also interested in “old classrooms”, about current trends, developments, phenomena, and personal experiences. Articles in this series of articles appear on a monthly basis. Are you yourself a “young professional” and want to be a part of this series? Then he submitted to the editorial team a suggestion. She is by your side with helpful advice throughout the writing, editing and approval process.
Problems from webpack
In essence, Webpack is what is called an wrapper. It collects all JavaScript, CSS, and image files and merges them into much fewer individual parts. If the auxiliaries, for example, are still in a different file in the source code than the API call, then both can be found in one long JavaScript file in the final build. The advantage of this is to reduce the end-user’s download time: instead of thousands of files, the browser downloads only a few. However, the assembly runtime depends on the number of files.
During build, a few more seconds can be controlled relatively. It becomes an issue when developing with the development server, because it also uses web packages. If the developers change a single file, webpack has to recreate entire packages from dozens of files. This is why the so-called hot module replacement – that is, the immediate replacement of changed components in the browser without the need to reload – quickly loses focus when wait times approach ten seconds. Vite only needs 430 milliseconds to start an empty React application, and it takes more than 12 seconds to build a React application or webpack (see next list).
```
yarn run v1.22.10
$ vite
⚡ Vite dev server running at:
> Network: http://192.168.56.1:3000/
> Network: http://192.168.10.1:3000/
> Network: http://192.168.2.119:3000/
> 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: http://192.168.56.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
```
By JavaScript standards, a webpack is a true dinosaur. Since it was first published in 2012, it has matured and unbeaten in handling rare marginal cases well. For example, what is often called “deep imports” is The reason for the errors in the GitHub repository, While webpack rarely encounters problems in such scenarios. but also Webpack configuration size It shows flexibility and complexity at the same time, which is why about 90 percent of use cases often lose speed and comfort.