What is the Vite
Without the involvement of packaging tools, using the browser’s support for modularity, vUE is hot. How is the specific experience? Can you take a simple screenshot
First, index.html looks like this, where modules are used to solve the modularity problem
That’s all there are to the main points, and I think I’ve learned how to use them. Now let’s go into the principle analysis, okay
The principle of analysis
This section will be analyzed from two aspects, the first is heat, which is what Vite mainly does, and the second is build, which is packaged with rollup and used in the formal environment. The reason why I mention it here is because there are some interesting things made inside.
Hot more
Actually hot principle above will also be more about, in simple terms, is ws link to the server, client server monitoring file changes, change, and then analysis rely on, to narrow the scope of the change as far as possible, then send the message to the client to request new files for HMR, for example vue component template changes or changes in style, With only such small changes, the client will request the server to re-render or update the specific style of the vue component after obtaining the resource file, thus achieving the minimum granularity of THE HMR. Of course, when not, there is a final degradation, which is location.reload
First, the VUE component, the HMR of VUE is built in, but it’s worth mentioning here. Vue SFC is compiled in the server, the server will compile the results cached, when client requests the vue file, we can see the second picture above, render function will be mounted to the script, below plug style compiled into the dom at the same time, the style is a unique identifier and sequence number, convenient to add, modify, and delete Note here that SFC is compiled into three parts: render, scirpt, and style. The server address is the same vue file, identified only by the type identifier, template returns render, style returns style, By default, script is returned without type. The cache server says LRU to cache the compiled results.
Again speaking of dependency parsing, in fact this vite in the comments written very clear. Normal vUE file changes will trigger component rerender, if js changes, we need to figure out how to minimize HMR based on the dependency graph. Among them, how to collect dependencies is mainly in two parts, the first is the dependency of JS file import, the second is the dependency of vue script import, which will be realized by analyzing and rewriting import. In the process of looking for JS dependencies, if the vue dependencies are encountered, plug them into Vue Reload; if the JS dependencies are encountered, it is best to plug them into JS Reload. If there is no HMR boundary, continue to look for it. If there is no HMR boundary, force the reload. The HMR boundary is declared by the user hot. Accept, and the dependency is extracted by ast analysis inside vite.