What is the Vite

Vite is a browser native ES Modules development server. Using the browser to parse the module, compiling and returning it on demand on the server side, bypassing the concept of packaging completely and allowing the server to be used on demand. Not only does it have Vue file support, it also handles hot updates, and the speed of hot updates does not slow down with the increase of modules.

ES Modules

ES Modules is a modularity scheme supported by browsers that allows modularity in code

<template> <img Alt ="Vue logo" SRC ="./assets/logo.png" /> <XzTable MSG ="Hello Vue 3.0 + Vite" /> import XzTable from './components/XzTable' export default { name: 'App', components: { XzTable } } </script>Copy the code

​

When the browser resolves import HelloWorld from ‘./components/XzTable’, it sends a request to the current domain name for the corresponding resource.

​

How does Vite work?

The main function is to hijack these requests from the browser and process them in the back end by simply decomposing and integrating the files used in the project and then returning them to the browser to render the page

What did Vite do?

When we add type = “module”, the browser will like server initiated a GET request to http://localhost:3000/src/main.js. The main js file

​

When the browser requests the main.js file and detects the package imported by import, it will initiate an HTTP request to its internal import reference to obtain the content file of the module.

​

1. Overwrite the import module path with /@modules/ in front of it, the browser will send the request again after overwriting

​

2. Intercept requests containing /@modules/, import the corresponding module from node_modules and return

​

**import XXX from ‘XXX’

Therefore, Vite intercepts requests for modules that directly reference node_modules by replacing them with /@modules/ and returning them. After receiving it, the browser will initiate a request to /@modules/ XXX, which will be intercepted again by Vite, and Vite will access the real module, and the content will do the same processing again, and then return to the browser.

Note: The convention in Vite is that path is considered a node_modules module if the requested path is in the /^/@modules// format

3. Parse the. Vue file

Split into 3 requests (for script, style, and template)

Parse the vue file into a render function to return to the browser to render the page:

​

When a VUE file is requested and the KOA middleware detects that a VUE template file is requested, a type parameter is added to the end of the request. Koa determines that the request is a VUE template file by this parameter, and compiles it into a JS file and returns it to the browser

Differences with Webpack

Bundle

When we use a packaging tool like the WebPack class. You end up packing all your code into a bundle.js file.

When we modify a submodule A. js in the module, the whole bundle.js needs to be repackaged, and the repackaging (hot update) takes longer and longer as the project size increases;

Bundleless

Since the browser only makes HTTP requests to modules that the import references, Vite doesn’t need to package and return all the files in the project. Instead, it builds only the modules that the browser makes HTTP requests for. Isn’t there a bit of a load on demand vibe here?

When the browser resolves to import {a} from ‘./a’, it only makes an HTTP request a.js; So in theory hot updates don’t slow down as files grow.

Bundle: Every startup and file change is repackaged to return bundle.js to the browser;

Bundleless: File processing is driven by the request of the browser. Changes to a single file only need to be processed in a single file.

​

Features:

  • Get rid of the packing step for a quick cold start
  • Timely hot update of modules will not slow down the hot update as the number of modules increases
  • Real on-demand programming

vue3

Yarn Global add [email protected] create-viet-app vue3-xiaozzao

Much the same as vuE2, except for the following

Vue 3 Template supports multiple root tags, Vue 2 does not

Vue 3 createApp(), Vue 2 new Vue()

CreateApp, new Vue({template, render})

​

Setup () for the combined API

The setup function is a new component option. As an entry point for using the Composition API within components. Create the component instance, initialize props, and then call the setup function. From a lifecycle hook perspective, it is called before the beforeCreate hook.

Receive parameters: Props, context

​ setup(props,context){ console.log(props.id) context.emit(‘upDate’,val) const state = reactive({ name:”, }) const getList = ()=>{ } return { name, getList } }

​

​

There is no this

This is not available in Setup. Both methods and declaration cycles can be written in Setup, and the direct variable name can be used if a variable in setup is accessed in a method. Method and variable names are not executed until they are returned in setup.