📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • Vite
  • vite介绍
  • 为什么vite那么快
  • Vite client原理分析
  • vite组成
  • 热更新
在GitHub上编辑
  1. 源码解析
  2. Vite源码解析

Vite Client源码

Vite

vite介绍

vite是一种新型前端构建工具,它提供两部分功能:

  1. 一个开发服务器,提供快速的模块热更新(HMR)

  2. 一套构建指令,使用Rollup打包代码

vite相较于传统的构建工具(例如webpack),最大的特点就是速度快,无论的冷启动还是热更新,速度都非常的快。

为什么vite那么快

vite的速度快体现在冷启动和热更新上。

预构建

vite将代码分为源码和依赖两部分,源码就是用户开发的源代码,而依赖通常是引入的第三方包。

vite会对依赖执行依赖预构建,vite使用了esbuild来实现依赖预构建,并且会将结果缓存到/node_modules/.vite/目录下,只有一些特殊情况才会重新预构建(例如修改vite配置文件)。

预构建主要做了两件事,一是将CommonJs模块和UMD模块转换成ESM模块,二是重写裸模块地址。预构建可以加快页面的加载速度。

ESM

vite之所以要将CommonJs模块和UMD模块转换成ESM模块,这是因为vite自身的机制就是借助ESM来承担一部分打包工作。

首先在index.html中使用ESM,引入入口文件

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

浏览器会识别ESM,自动加载main.tsx文件,然后会将main.tsx中import的文件也加载了,这样就可以将所有依赖的文件都加载下来。

也就是说vite会通过ESM的形式提供源码,让浏览器承担了一部分打包工作,而vite只需要在这个过程中做一些处理工作,例如将非JavaScript文件内容转换成JavaScript能够理解的代码,转换导入文件的地址等。

采用这种方式很明显的一个好处是不需要vite自己去构建依赖关系,并且加载时只加载使用的依赖和源码,没有用到的依赖或源码不会被加载。

Http缓存

前面说过vite通过ESM加载文件,而在这个过程vite还借助了http缓存来实现加载优化。

前面说过vite会将应用中的模块分为两类:源码和依赖,对于依赖而言,基本上是不会变动的(例如你引入的组件库),如果每个更新时都处理成本会很高,因此vite会对依赖模块使用强缓存Cache-Control: max-age=31536000,immutable。

对于源码而言,这部分可能是会经常改变的,因此会使用协商缓存cache-control: no-cache。

冷启动

vite在开发环境下会启动一台node服务器来提供源码和进行其他操作,vite只会在浏览器请求源码时进行转换并按需提供源码,而对于不会使用到的源码则不会进行处理,而webpack则会将源码和依赖全部构建成bundle,因此启动时速度非常慢。

热更新

在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,Vite会将被编辑的模块重新导入(import()),并且还借助http缓存优化模块加载策略,依赖使用了强缓存不会被重新加载,而源码也只会对更改过的文件进行重新加载,使得无论应用大小如何,HMR 始终能保持快速更新。

Vite client原理分析

vite组成

vite由client和node两部分组成,分别是客户端和服务器端。

热更新

vite的热更新是依靠websocket来实现的。vite其实可以看做是一台静态资源服务器,它会监听项目源码文件的改动,如果有文件改动了,则通过ws通知客户端执行对应的回调,回调中会通过import()+时间缀的方式重新加载改动后的代码文件。

/* /src/client/client.ts */
// 创建websocket连接
const socketProtocol =
  __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
// 监听服务器消息,从而执行相应的回调
socket.addEventListener('message', async ({ data }) => {
  handleMessage(JSON.parse(data))
})
/* data的数据格式: {
  "type": "update",
  "updates": [
    {
      "type": "js-update",
      "timestamp": 1650103650496,
      "path": "/src/App.tsx",
      "acceptedPath": "/src/App.tsx"
    }
  ]
}
*/

type有以下几种值

  • connected 初次连接时

  • update 更新

  • custom 自定义事件

  • full-reload 全更新,即刷新页面,浏览器当前所在的html文件被更改时执行

  • prune 更新后有模块不再被导入,则清除副作用

  • error 出现错误时执行

我们通常更关心update的处理。

async function handleMessage(payload: HMRPayload) {
  // ...
  switch (payload.type) {
    case 'update':
      notifyListeners('vite:beforeUpdate', payload)
      /*
      如果这是第一次更新,并且已经存在error overlay,则
      表示打开的页面存在现有服务器编译错误,并且整个
      模块脚本无法加载(因为其中一个模块导入为 500)。
      在这种情况下,正常更新将不起作用,需要完全重新加载。
      */
      if (isFirstUpdate && hasErrorOverlay()) {
        window.location.reload()
        return
      } else {
        clearErrorOverlay()  // 清除错误覆盖,就是出现错误时的提示界面
        isFirstUpdate = false
      }
      payload.updates.forEach((update) => {
        // update type只有两种:css-update和js-update
        // 其中css-update只针对被link标签引入的css
        if (update.type === 'js-update') {
          queueUpdate(fetchUpdate(update))
        } else {
          const { path, timestamp } = update
          const searchUrl = cleanUrl(path)
          // 不能使用`[href*=]`,因为href可能使用了相对路径
          // 这里需要使用link.href来获取完整路径
          const el = Array.from(
            document.querySelectorAll<HTMLLinkElement>('link')
          ).find((e) => cleanUrl(e.href).includes(searchUrl))
          if (el) {
            const newPath = `${base}${searchUrl.slice(1)}${
              searchUrl.includes('?') ? '&' : '?'
            }t=${timestamp}`
            el.href = new URL(newPath, el.href).href
          }
          console.log(`[vite] css hot updated: ${searchUrl}`)
        }
      })
      break
  }

css-update只针对通过link引入的css文件,加入是通过import导入css文件,那么仍然是通过js-update来更新。

可以看到vite拿到了update信息后是先执行了fetchUpdate函数,接着又执行了queueUpdate函数,接下来我们看一下这两个函数做了什么。

async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
  // hotModulesMap保存了所有被加载的模块信息
  // mod:{ id: 文件地址, callbacks: [{ deps: 依赖文件路径数组, fn: 定义的回调函数 }] }
  const mod = hotModulesMap.get(path)
  if (!mod) {
    // In a code-splitting project,
    // it is common that the hot-updating module is not loaded yet.
    // https://github.com/vitejs/vite/issues/721
    return
  }

  // 模块信息
  const moduleMap = new Map()
  // 是否是自身更新
  const isSelfUpdate = path === acceptedPath

  // 借助Set的去重特性,确保每个依赖只被导入一次
  const modulesToUpdate = new Set<string>()
  if (isSelfUpdate) {
    // 如果是自身更新,则只需要将自身path添加即可
    modulesToUpdate.add(path)
  } else {
    // 依赖更新时
    for (const { deps } of mod.callbacks) {
      deps.forEach((dep) => {
        if (acceptedPath === dep) {
          modulesToUpdate.add(dep)
        }
      })
    }
  }

  // 在重新导入模块之前找出对应的回调
  const qualifiedCallbacks = mod.callbacks.filter(({ deps }) => {
    return deps.some((dep) => modulesToUpdate.has(dep))
  })

  await Promise.all(
    Array.from(modulesToUpdate).map(async (dep) => {
      const disposer = disposeMap.get(dep)
      if (disposer) await disposer(dataMap.get(dep))
      const [path, query] = dep.split(`?`)
      try {
        const newMod = await import(
          /* @vite-ignore */
          base +
            path.slice(1) +
            `?import&t=${timestamp}${query ? `&${query}` : ''}`
        )
        moduleMap.set(dep, newMod)
      } catch (e) {
        warnFailedFetch(e, dep)
      }
    })
  )

  return () => {
    // 执行回调
    for (const { deps, fn } of qualifiedCallbacks) {
      fn(deps.map((dep) => moduleMap.get(dep)))
    }
    const loggedPath = isSelfUpdate ? path : `${acceptedPath} via ${path}`
    console.log(`[vite] hot updated: ${loggedPath}`)
  }
}
/**
 使用队列来确保以与发送加载时相同的顺序来执行fn
 */
async function queueUpdate(p) {
    queued.push(p);
    if (!pending) {
        pending = true;
        await Promise.resolve();
        pending = false;
        const loading = [...queued];
        queued = [];
        (await Promise.all(loading)).forEach((fn) => fn && fn());
    }
}

fetchUpdate借助import()实现了模块的重新导入,而queueUpdate则是调用了回调函数来更新渲染,这里使用了队列结构,因为http响应模块文件的顺序不一定就是模块的请求顺序,所以需要用队列确保以与发送加载时相同的顺序来重新渲染。

接下来我们看看浏览器通过ESM请求模块时,vite对模块文件做了什么处理。

我们创建一个vue文件,并导入一些模块

import { ref } from "vue";
import { test } from "../utils/common";

刷新重新加载,可以在看到浏览器请求得到的文件是这样的:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/components/HelloWorld.vue");
import {ref} from "/node_modules/.vite/deps/vue.js?v=4ffd74a8";
import {test} from "/src/utils/common.js";

// ...

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(),
    _createElementBlock(_Fragment, null, [_createElementVNode("h1", null, _toDisplayString($props.msg), 1 /* TEXT */
    ), _hoisted_1, _hoisted_2, _createElementVNode("button", {
        type: "button",
        onClick: _cache[0] || (_cache[0] = $event=>($setup.count++))
    }, "count is: " + _toDisplayString($setup.count), 1 /* TEXT */
    ), _hoisted_3], 64 /* STABLE_FRAGMENT */
    ))
}
_sfc_main.__hmrId = "469af010"
typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)
import.meta.hot.accept(({default: updated, _rerender_only})=>{
    if (_rerender_only) {
        __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)
    } else {
        __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)
    }
}
)

可以看出

  • vite服务器会对导入的路径进行转换

  • vite在每个模块中都添加了createHotContext函数,并且将自身模块路径作为参数传入执行。

  • vite通过import.meta.hot.accept导入了渲染该模块的方法

既然使用到了createHotContext函数,那我们就来看一下这个函数的定义。

const hotModulesMap = new Map();
const disposeMap = new Map();
const pruneMap = new Map();
const dataMap = new Map();
const customListenersMap = new Map();
const ctxToListenersMap = new Map();
function createHotContext(ownerPath) {
    if (!dataMap.has(ownerPath)) {
        dataMap.set(ownerPath, {});
    }
    // 当文件更新时,创建一个新的上下文
    // 清除旧的回调
    const mod = hotModulesMap.get(ownerPath);
    if (mod) {
        mod.callbacks = [];
    }
    // 清除旧的自定义事件监听器
    const staleListeners = ctxToListenersMap.get(ownerPath);
    if (staleListeners) {
        for (const [event, staleFns] of staleListeners) {
            const listeners = customListenersMap.get(event);
            if (listeners) {
                customListenersMap.set(event, listeners.filter((l) => !staleFns.includes(l)));
            }
        }
    }
    const newListeners = new Map();
    ctxToListenersMap.set(ownerPath, newListeners);
    function acceptDeps(deps, callback = () => { }) {
        const mod = hotModulesMap.get(ownerPath) || {
            id: ownerPath,
            callbacks: []
        };
        mod.callbacks.push({
            deps,
            fn: callback
        });
        hotModulesMap.set(ownerPath, mod);
    }
    const hot = {
        get data() {
            return dataMap.get(ownerPath);
        },
        accept(deps, callback) {
            if (typeof deps === 'function' || !deps) {
                // self-accept: hot.accept(() => {})
                console.log('deps',deps);
                acceptDeps([ownerPath], ([mod]) => deps && deps(mod));
            }
            else if (typeof deps === 'string') {
                // explicit deps
                acceptDeps([deps], ([mod]) => callback && callback(mod));
            }
            else if (Array.isArray(deps)) {
                acceptDeps(deps, callback);
            }
            else {
                throw new Error(`invalid hot.accept() usage.`);
            }
        },
        acceptDeps() {
            throw new Error(`hot.acceptDeps() is deprecated. ` +
                `Use hot.accept() with the same signature instead.`);
        },
        dispose(cb) {
            disposeMap.set(ownerPath, cb);
        },
        // @ts-expect-error untyped
        prune(cb) {
            pruneMap.set(ownerPath, cb);
        },
        // TODO
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        decline() { },
        invalidate() {
            // TODO should tell the server to re-perform hmr propagation
            // from this module as root
            location.reload();
        },
        // 监听自定义事件
        on(event, cb) {
            const addToMap = (map) => {
                const existing = map.get(event) || [];
                existing.push(cb);
                map.set(event, existing);
            };
            addToMap(customListenersMap);
            addToMap(newListeners);
        },
        // 发服务器发送自定义事件
        send(event, data) {
            messageBuffer.push(JSON.stringify({ type: 'custom', event, data }));
            sendMessageBuffer();
        }
    };
    return hot;
}

可以看到之前在fetchUpdate中用到的hotModulesMap是在这里定义的。createHotContext函数返回了一个hot对象,事实上这个就是模块中使用到的import.meta.hot对象,上面挂载了一些方法,其中比较重要的是accept方法,它的作用是当模块更新时执行对应的回调,在vite服务器返回模块文件时其实就会执行这个方法,回调函数就是重新渲染该模块的方法,因此当前面执行重新import()后,会调用模块的回调函数来渲染更新,此外accept也被暴露给开发者使用,开发者可以通过import.meta.hot.accept()来传入自定义回调函数。

综上,vite的热更新流程大致流程如下

  1. vite服务器和浏览器建立websocket连接

  2. vite服务器在返回模块文件时会创建热更新上下文,并将该模块的渲染方法传入到回调中

  3. 服务器监听文件改动,如果有文件更新则将模块文件path、更新type等信息发给浏览器

  4. 浏览器接收到后重新import()该模块文件,并执行重新渲染的回调方法

上一页Vite源码解析下一页Vite Server源码(todo)

最后更新于1年前

https://cn.vitejs.dev/assets/bundler.37740380.png
https://cn.vitejs.dev/assets/esm.3070012d.png