Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points of Vue3 and Vite case analysis. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. Create a vite project npm init vite-app cd npm install npm run dev

Or

Introduction to yarn create vite-app cd yarn yarn dev2.vite

Vite is an unpackaged development server based on Vue3 single-file components, which enables rapid local development startup:

Fast cold start without waiting for packaging operation

Instant hot module updates, decoupling of replacement performance and the number of modules allows updates to fly

True on-demand compilation, instead of waiting for the entire application to be compiled, is a huge change.

And vite also succeeded in changing webpack's life, allowing webpack developers to shout directly to Big Brother:

Youshen gave up webpack

So how does vite do this?

3. The first question

By running npm run dev, you can observe that the project opens in seconds, and when you open the debugger, you can see:

Module request

The browser requests the .vue file directly, followed by some type parameters. Click on these requests to take a brief look at the returned contents of the file:

/ / main.jsimport {createApp} from'/ @ modules/vue.js' import App from'/ src/App.vue' / / import' / src/index.css?import' / / createApp (App) .mount ('# app')

The most intuitive view is here:

Convert vue references to / @ modules/vue.js convert. / App.vue to / src/App.vue convert. / index.css to / src/index.css?import//HelloWorld.vue?type=style&index=0import {updateStyle} from "/ vite/hmr" const css = "\ np {color: red;}\ n" updateStyle ("62a9ebed-0", css) export default css

Here the style style in Helloworld.vue is compiled, and p {color:red} is compiled

/ / index.css?importimport {updateStyle} from "/ vite/hmr" const css = "# app {\ nfont-family: Avenir, Helvetica, Arial, sans-serif;\ n-webkit-font-smoothing: antialiased;\ n-moz-osx-font-smoothing: grayscale;\ ntext-align: center;\ ncolor: # 2c3e50;\ nmargin-top: 60px;\ n}\ n" updateStyle ("\" 2418ba23\ ", css) export default css

At the same time, the global style is also monitored for updates.

Now that the browser requests the. vue file directly, how is the file content parsed? How the project runs the vue file directly without using packaging tools such as webpack.

3.1Mining the operation principle of vite

As you can see from the code snippet above, the most obvious feature is the use of ES Module, the code is introduced into the file in the form of a module, while implementing on-demand loading.

Its biggest feature is that it uses export import to import and export modules on the browser side, sets type= "module" in the script tag, and then uses ES module.

Because of this, vite is highly dependent on module script features, which means abandoning the IE market from here.

In this operation, another accompanying effect is that the webpack packaging step is removed, and each module file is no longer packaged into a bundle to support the browser's modular loading. So how does vite handle these modules?

The key lies in the server side built by vite using Koa, and the related functions are registered mainly through middleware in createServer.

Vite has done a layer of processing on import, and the process is as follows:

Get the request body in koa middleware

Parse the resource ast to get the content of import through es-module-lexer

To judge whether the resource of import is an absolute path is absolutely regarded as a npm module.

Returns the processed resource path, for example: "vue" = > "/ @ modules/vue"

The dependencies required by the processed template,script,style and so on are in the form of http requests, and the contents of each module of the SFC file are distinguished and loaded in the form of query parameters.

Why do you need @ modules here?

Take a chestnut:

Import vue from 'vue'

The vue module is installed in node_modules, and the browser ES Module cannot directly access the files in the node_modules directory under the project. So vite has done a layer of processing on import, rewriting the prefix with @ modules so that the project can access reference resources; on the other hand, writing file paths into the same @ modules, similar to slice-oriented programming, you can perform other operations without affecting other resources, such as adding alias and other configurations later.

Use koa middleware to regularly match the resource with @ modules on it, and then get the exported resource through require ('XXX') and return it to the browser.

3.2 File request

The single page file request has a characteristic, it all ends with * .vue as the request path. When the server receives the http request with this characteristic, it mainly processes

Determine the specific vue file of the request according to ctx.path

Parse the file using parseSFC to get descriptor. A descriptor contains the basic information of the component, including attributes such as template, script and styles. Below is the descriptor obtained from the processed Comp.vue file.

Then select the method of the corresponding type according to descriptor and ctx.query.type, and return ctx.body after processing

Empty type means processing script tags and using the compileSFCMain method to return js content

When type is template, the template tag is processed, and the render method is returned using the compileSFCTemplate method.

When type is styles, the style tag is processed, and the content of the css file is returned using the compileSFCStyle method.

Using ES module in the browser uses http to request modules, so vite must provide a web server to proxy these modules. The koa middleware mentioned above is responsible for this. Vite obtains the contents of the resources by hijacking the request path query.type to the browser, and then splices different resource files to deal with the parsed single-page files, and finally responds to the browser for rendering.

On the other hand, this is also a very interesting approach, packaging tools such as webpack will package a variety of modules into bundle in advance, but the packaging result is static, regardless of whether the code of a module is used or not, it has to be packaged, the obvious disadvantage is that as the project gets bigger, the package file gets bigger and bigger. The elegance of vite is that it is introduced dynamically when a module is needed, rather than being packaged in advance, which naturally improves the development experience.

4.hmr hot update

There are four main steps to hot update of vite:

Listen for file changes through watcher

Compile the resource through the server side and push the new resource information to client

Framework support component rerender/reload is required

Client receives the resource information and executes the framework rerender logic.

On the client side, Websocket listens for some updated message types and then handles them separately:

Vue-reload-vue component update: import a new vue component through import, and then execute HMRRuntime.reload

Vue-rerender-vue template update: import a new template through import, and then execute HMRRuntime.rerender

Vue-style-update-vue style update: insert the new stylesheet directly

Style-update-css update: document inserts a new stylesheet

Style-remove-- css remove: document deletes stylesheet

Js-update-js updates: execute directly

Full-reload-page roload: refresh the page using window.reload

On the server side, the watcher listens for page changes and determines whether it is js Reload or vue Reload based on the file type. Get the contents of the current file through the parser, compare it with the last parsing result in the cache, and execute the corresponding render if it changes.

These are all the contents of the article "Vue3 and Vite case Analysis". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.