Table of contents
foreword
The construction tool Vite, currently only vue3 can use Vite, if this article is helpful to you, please support the blogger three times.
1. Introduction to Vite
Vite is a lighter and faster front-end building tool for modern browsers , which can significantly improve the front-end development experience. In addition to Vite, the well-known front-end construction tools include Webpack and Gulp. At present, Vite has released Vite2. Vite's new plug-in architecture and silky development experience can be perfectly combined with Vue3.
1. Composition of Vite
A development server that provides rich built-in features such as Hot Module Updates (HMR) based on native ES modules. A set of build instructions that bundles your code with Rollup, and it comes pre-configured to output optimized static assets for production. In general, Vite hopes to provide out-of-the-box configuration, while its plugin API and JavaScript API bring a high degree of extensibility. However, compared to the Vue-cli configuration, the projects built by Vite still have a lot of configurations that need to be handled by the developers themselves.
2. Why choose Vite?
Over time, we have witnessed changes in tools such as webpack, Rollup, and Parcel, which have greatly improved the development experience of front-end developers.
However, as we started building larger and larger applications, the amount of JavaScript code to process increased exponentially. Large projects with thousands of modules are fairly common. Tools developed based on JavaScript start to hit performance bottlenecks: it usually takes a long time (even minutes!) to start the development server, and even with hot module replacement (HMR), the effect of file modifications takes seconds to appear. reflected in the browser. 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.
2. Advantages and disadvantages of Vite
The speed of Vite is mainly reflected in two aspects: fast cold start and fast hot update. The reason why Vite can achieve such excellent performance is entirely due to the fact that Vite takes advantage of the browser's support for the ESM specification and adopts a completely different unbundle mechanism from Webpack.
-
Quick cold start : Vite only starts a server with static pages, and does not package all project file codes. The server loads different modules according to the client's request to achieve on-demand loading, while the well-known webpack is, from the very beginning. Package the entire project once, and then start the dev-server. If the project is large in scale, the packaging time must be very long.
-
Packaging and compiling speed : when it needs to be packaged into the production environment, vite uses the traditional rollup for packaging, so the advantage of vite is reflected in the development stage. In addition, since vite uses ES Module, it cannot be used in the code Use CommonJs;
-
Hot module update : In terms of HRM hot update, when the content of a module changes, just let the browser re-request the module instead of recompiling all dependencies of the module like webpack;
1.vite advantage
-The core of the unbundle mechanism:
the analysis of dependencies between modules is implemented by the browser;
the conversion of files is implemented by the middlewares of the dev server and cached;
the source files are not merged and bundled;
2.vite disadvantages
Due to the unbundle mechanism, the following additional work needs to be done during the first screen period and lazy loading: Compared with Webpack, Vite transfers the work that needs to be completed during the dev server startup process to the dev server response to browser requests, which inevitably leads to Degraded above the fold performance. However, the poor performance of the first screen only occurs when the page is loaded for the first time after the dev server is started. When the page is reloaded later, the first screen performance will be much better. The reason is that the dev server will cache the previously converted content.
Do not perform merging and bundling operations on source files, resulting in a large number of http requests; resolve, load, transform, and parse operations on source files during dev server operation; pre-build and secondary pre-build operations will also block the first screen request until the pre-build is completed until.
3. Use Vite to create a Vue3 project
1. Create a vite project
Execute the following commands in order to create a vue 3.x engineering project based on vite:
- npm init vite-app project name
- cd project name
- npm install
- npm run dev
2. The structure of the project
The node_modules directory is used to store third-party dependent packages
public is the public static resource directory
src is the source code directory of the project (all code written by programmers should be placed in this directory)
.gitignore is the ignore file for Git
index.html is the only HTML page in the SPA Single Page Application
package.json is the project's package management configuration file
The assets directory is used to store all static resource files (css, fonts, etc.) in the project
The components directory is used to store all custom components in the project
App.vue is the root component of the project
index.css is the project's global style sheet file
main.js is the packaged entry file for the entire project
