How to use Vite, a more efficient construction tool for Vue

Today, the editor will share with you the relevant knowledge points on how to use Vite, a more efficient construction tool for Vue. For reference, I hope you will gain something after reading this article. Let’s take a look at it together.

webpack

When we used Vue2 for development, we usually used our vue-cli scaffolding for projects The construction of the cli scaffolding is based on webpack for construction and packaging. As a code compilation tool, webpack has entry, exit, loader and plug-ins.

webpack is a static module bundler for modern JavaScript applications.

When webpack processes an application, it internally builds a dependency graph that maps to each module required by the project and generates one or more bundles.

We can see from the figure that Webpack can convert various static resources js, css, less, and sass into a static file, reducing page requests.

What is Vite?

Vite (French for fast, pronounced /vit/, pronounced like veet) is a new front-end building tool that can significantly improve the front-end development experience. It mainly consists of two parts: a development server, which provides rich built-in features based on native ES modules, such as amazingly fast hot module update (HMR). A set of build instructions that bundles your code with Rollup, and it comes pre-configured to output highly optimized static assets for production. Vite intends to provide out-of-the-box configuration, while its plug-in API and JavaScript API bring a high degree of extensibility and complete type support.

Why did you choose him?
Before browsers supported ES modules, JavaScript did not provide a native mechanism for developers to develop in a modular way. That's why we're familiar with the concept of bundling: tools that grab, process, and concatenate modules of our source code into files that can be run in the browser. Over time, we have seen tools such as webpack, Rollup, and Parcel change, which have greatly improved the development experience for front-end developers. However, as we start building larger and larger applications, we need to deal withThe amount of reasonable JavaScript code has also grown exponentially. Large projects with thousands of modules are fairly common. We started to run into performance bottlenecks - tools developed in JavaScript often took a long time (even minutes!) to start the development server, and even with HMR, file modifications took seconds to reflect in the browser come out. Such a cycle goes on and on, and slow feedback will greatly affect the developer's development efficiency and happiness. Vite aims to solve the above problems by taking advantage of new developments in the ecosystem: browsers start to support ES modules natively, and more and more JavaScript tools are written in compiled languages.

webpack: The compilation process is to package and compile all dependencies through webpack and finally hand them over to the server for rendering, so the speed will be slower, after all, all dependencies are loaded Processing, so we will wait for the dependencies to load especially when we start the cli scaffolding project for the first time;

vite: Use esbuild to pre-build dependencies. esbuild is written in Go and is 10-100x faster than bundler pre-built dependencies written in JavaScript. And the source code is provided in native ESM mode. This essentially lets the browser take over part of the packager's work: Vite only needs to convert the source code when the browser requests it and serve the source code on demand. The code is imported dynamically according to the situation, that is, it will only be processed when it is actually used on the current screen. To put it bluntly, vite will directly start the service for rendering. During the rendering process, what resources does the browser need? Our service will process resource requests, which can be understood as what is requested. Therefore, in terms of speed, Vite improves the startup time of the development server by dividing the modules in the application into two types: dependencies and source code at the beginning;

Create a project with Vite

When we used vue-cli scaffolding before, we first installed the scaffolding globally so that we could create a Vue2 project later, and the Vite build tool does not require us to install it globally, we can use the following command to do it Created; note that Vite requires Node.js version 14.18+, 16+. However, some templates require a higher version of Node to run properly, please pay attention to upgrade your version of Node when your package manager warns you.

Create project command:

//use NPM:$ npm create vite@latest//use Yarn:$ yarn createvite//Use PNPM:$ pnpm create vite

Input file name, select front-end framework, select language:

Enter the project, install dependencies, start the project (compilation speed is very fast)

The project started successfully