A, vite exactly is what?

Vite is essentially a streamlined project build packaging tool based on the ES Module for modern browsers.

Vite is French for light.

Vite features:

1, light cold service start. Vite is designed for modern browsers that support the IMPORTS property of ES6. Imports are parsed by the browser, compiled on demand on the server and returned without packaging. So it runs faster.

2. Hot updates in development. Listen to the project code, if there are changes, it will run again immediately.

Compile on demand without flushing the entire DOM. Vite only needs to transform the source code when the browser requests it and provide it on demand. Code is dynamically imported according to the situation and is only processed when the current screen is actually in use.

Vite supports modern browsers. Traditional browsers are supported by the @vite/ plugin-Legacy plug-in.

Vite create vUE project

Vite is a high-level package of build tools that are actually Rollup inside.

Vite is a tool released by Yuxi with the official version of VUE3, so vite only provides vue3 project construction method, not VUe2.0 construction method. In addition to vuE3, vuE-TS, React, React – TS, Preact, Preact-TS, Vanilla, Vanilla -ts, Lit, svelte can also be built.

2.1. Teach you how to build vITE project

Open the command line tool and use the NPM command:

npm init vite@lasted
Copy the code

Running results, as shown in figure:

Enter the name of the project to be created learn_vite. If you do not enter the name, the default value is viet-project.

Press Enter to proceed to the next step, you need to select the type of project to create, as shown in the picture:

Use the up and down arrows to switch, select the vUE we are most familiar with, and press Enter to proceed to the next step.

Do I select ts? Vite supports TS natively. Let’s go straight to VUE. Don’t ts.

At this point, the project is created, you need to go into the project, install the dependencies, and start the service.

Follow the prompt address to access the first project we just created. As shown in the figure.

2.2. Vite create a file directory

After creating the project, open the project with the editor, and we can see the structure of the project as shown below:

To learn how Vite runs projects, start with configuration files. Open the package.json file as follows:

{" name ":" learn_vite ", "version" : "0.0.0", "scripts" : {" dev ":" vite ", "build" : "vite build", "serve" : "Vite preview"}, "dependencies" : {" vue ":" ^ 3.2.16 "}, "devDependencies" : {" @ vitejs/plugin - vue ":" ^ 1.9.3 ", "vite" : "^" 2.6.4}}"Copy the code

Find the command to start the project, as well as the package command.

Vite VS Webpack

3.1. How fast is vite?

We created two projects, one using Vite and the other using WebPack. Once created, start the service and compare the startup time to see how fast Vite is.

When starting a service, WebPack needs to package the project first and then start the project, but Vite skips the concept of packaging completely, and the server is ready to go. So when starting services, Vite is much faster than WebPack.

3.2. How high is the thermal update efficiency of Vite?

Some packers’ development servers store the build content in memory so that they only need to inactivate a portion of the module diagram when the file changes, but it also needs to rebuild and reload the entire page. This is costly, as reloading the page will lose the current state of the application. So Vite supports dynamic module hot loading (HMR), which allows a module to “hot replace” itself without affecting the rest of the page, i.e. only replace and update a portion of the changed elements, thus greatly improving the development experience.

Vite also uses HTTP headers to speed up page loading. Dependent module requests are strongly cached by cache-Control :max-age=31536000, immutable, so that they do not need to be requested again.

3.3. Different languages

Webpack uses Node.js to implement it, while Vite uses esBuild pre-build dependencies. Es Build, written with Go, is 10-100 times faster than the packager prebuild dependencies written with Node.js.

The above said so much, net kua vite how good, vite is so powerful, there are no shortcomings?

4. Limitations of Vite

Compared with Webpack, Vite, after all, has a short debut and its ecosystem is not imperfect. One of the best things about Webpack is the richness of loaders and plugins.

When vite packages projects, it currently uses Rollup, which is not very CSS – and code-splitting friendly.

The vite ecosystem is still in its infancy, so I recommend using WebPack when creating work projects. You can use Vite for your own projects.