vite: https://github.com/vitejs/vite

面试题：谈谈你对 vite 的理解，最好对比 webpack 说明

webpack 原理图

vite 原理图

面试题答案：

webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而 vite 是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
由于现代浏览器本身就支持 ES Module，会自动向依赖的 Module 发出请求。vite 充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像 webpack 那样进行打包合并。
由于 vite 在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite 的优势越明显。
在 HMR 方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像 webpack 那样需要把该模块的相关依赖模块全部编译一次，效率更高。
当需要打包到生产环境时，vite 使用传统的 rollup 进行打包，因此，vite 的主要优势在开发阶段。另外，由于 vite 利用的是 ES Module，因此在代码中不可以使用 CommonJS

客户端渲染效率比 vue2 提升了 1.3~2 倍

SSR 渲染效率比 vue2 提升了 2~3 倍

面试题：vue3 的效率提升主要表现在哪些方面？

静态提升

下面的静态节点会被提升

• 元素节点
• 没有绑定动态内容

// vue2 的静态节点
render(){
   
  createVNode("h1", null, "Hello World")
  // ...
}

// vue3 的静态节点
const hoisted = createVNode("h1", null, "Hello World")
function render(){
   
  // 直接使用 hoisted 即可
}

静态属性会被提升

<div class="user">{
  {user.name}}</div>

const hoisted = {
    class: "user" };

function render() {
   
  createVNode("div", hoisted, user.name);
  // ...
}

预字符串化

<div class="menu-bar-container">
  <div class="logo">
    <h1>logo</h1>
  </div>
  <ul class="nav">
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
    <li><a href="">menu</a></li>
  </ul>
  <div class="user">
    <span>{
  { user.name }}</span>
  </div>
</div>

当编译器遇到大量连续的静态内容，会直接将其编译为一个普通字符串节点

const _hoisted_2 = _createStaticVNode(
  '<div class="logo"><h1>logo</h1></div><ul class="nav"><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li></ul>'
);

缓存事件处理函数

<button @click="count++">plus</button>

// vue2
render(ctx){
   
  return createVNode("button", {
   
    onClick: function($event){
   
      ctx.count++;
    }
  })
}

// vue3
render(ctx, _cache){
   
  return createVNode("button", {
   
    onClick: cache[0] || (cache[0] = ($event) => (ctx.count++))
  })
}

Block Tree

vue2 在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在比对静态节点上

<form>
  <div>
    <label>账号：</label>
    <input v-model="user.loginId" />
  </div>
  <div>
    <label>密码：</label>
    <input v-model=