Learn about Vite in 10 minutes

Vite is a packaging tool developed by The author of VUE, You Yuxi. At present, the highlight is that hot loading compilation is very fast when local development, and it has a good experience in large projects.

Post the author’s original words on weibo:

Vite, a development server based on browser native ES Imports. Parsing the imports in the browser, compiling and returning them on the server side on demand, bypassing the concept of packaging entirely, and making the server available 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. For production environments, the same code can be packaged in rollup. Although it is still rough, I think this direction has potential. If done well, it can completely solve the problem of changing a line of code and waiting for hot updates for half a day.

It can be seen from the above:

• The main scenario for Vite is development mode, which skips packing and loads on demand, so hot updates are very fast;
• In large projects, it can effectively improve the speed of local development, compilation and packaging, and solve the problem of “change a line of code and wait for half a day”;
• The browser parses imports using the type=”module” function and then intercepts ES Imports requests sent by the browser and processes them accordingly.
• Production mode is packaged with rollup, which should be optimized later;

First, modern browser module function

Js (import ‘**.js’). Es6 compatibility is not supported by IE11 and below. From Vue3 proxy and Vite module, we can see that Judah has completely abandoned IE.

<script type="module" src="main.js"></script>

<script type="module">
import { a } from './a.js'
</script>
Copy the code

Intercept HTTP requests

Do different processing for different types of files

1. The js file

Use es-module-Lexer to parse js to get the imports array (dependency analysis), and then replace the import syntax with the requested corresponding JS file.

The original code:

<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
</script>

Copy the code

After the transformation:

<div id="app"></div>
<script type="module">
import { createApp } from '/@modules/vue'
import App from './App.vue'

createApp(App).mount('#app')
</script>

Copy the code

2. Vue file

Vue single file component contains three parts: Template, script, and style. Vite will divide the single file component into three parts to request and process them respectively.

2.1 the template

Vite compiles template to the render function and returns.

2.2 the script

Analyze the import dependency in JS and re-initiate the request.

2.3 style

Compile the style as CSS and insert it into the head.

The original app. vue file was:

<template>
  <h1>Hello Vite + Vue 3!</h1>
  <p>Edit ./App.vue to test hot module replacement (HMR).</p>
  <p>
    <span>Count is: {{ count }}</span>
    <button @click="count++">increment</button>
  </p>
</template>

<script>
export default {
  data: () = > ({ count: 0}}),</script>

<style scoped>
h1 {
  color: #4fc08d;
}

h1.p {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
Copy the code

After conversion, it becomes:

// localhost:3000/App.vue
import { updateStyle } from "/@hmr"

// Extract script logic
const __script = {
  data: () = > ({ count: 0}}),// Split style into/app.vue? Type =style request, by the browser to continue the request to get the style
updateStyle("c44b8200-0"."/App.vue? type=style&index=0&t=1588490870523")
__script.__scopeId = "data-v-c44b8200" // Style scopeId

// Split template into/app.vue? Type =template request, the browser continues to request the render function
import { render as __render } from "/App.vue? type=template&t=1588490870523&t=1588490870523"
__script.render = __render // The render method is mounted for createApp
__script.__hmrId = "/App.vue" // Record the HMR ID for hot updates
__script.__file = "/XXX/web/vite-test/App.vue" // Record the original path of the file, which can be used for subsequent hot updates
export default __script
Copy the code

Hot update

Vite is through WebSocket to achieve hot update communication, when the code changes, only push the changed file to the browser through WebSocket.

Therefore, the speed of Vite local hot updates is not much affected by the size of the project, and local development is fast in large projects.

Vite’s client hot update code is injected during the compilation of the app.vue file.

Four, Vite and VUE-CLI comparison of advantages and disadvantages

Five, the summary

At present, Vite is iterating at a fast speed, optimizing its own functions, the future can be expected ~

Six, reference

• Analysis of Vite principle
• Pros and cons of Vite and Vue CLI