（四）什么是Vite——冷启动时vite做了什么（源码、middlewares）

 vite分享ppt，感兴趣的可以下载：

​​​​​​​Vite分享、原理介绍ppt

什么是vite系列目录：

（一）什么是Vite——vite介绍与使用-CSDN博客

（二）什么是Vite——Vite 和 Webpack 区别（冷启动）-CSDN博客

（三）什么是Vite——Vite 主体流程(运行npm run dev后发生了什么？)-CSDN博客

（四）什么是Vite——冷启动时vite做了什么（源码、middlewares）-CSDN博客

（五）什么是Vite——冷启动时vite做了什么（依赖、预构建）-CSDN博客

未完待续。。。

冷启动时vite做了什么：

vite主要遵循的是使用 ESM ( Es modules 模块)的规范来执行代码，由于现代浏览器基本上都支持了 ESM 规范，所以在开发阶段并不需要将代码打包编译成 es5 模块即可在浏览器上运行。我们只需要从入口文件出发， 在遇到对应的 import 语句时，将对应的模块加载到浏览器中就可以了（按需加载）。同时 ts/jsx 等文件的转译工作也会借助了 esbuild 来提升速度。Vite在内部实现上，会启动一个 dev server ， 并接受独立模块的HTTP请求，并让浏览器自身去解析和处理模块加载。

模块解析

对于引用的模块，vite将其分为了 依赖 和 源码 两类，对其进行不同的处理。

先来看一下对于 源码 的处理。我们打开请求的App.vue文件，可以看到里面的内容已经不是源码了，而是经过处理后的代码。

middlewares 中内容转换

Vite 中源文件的转换是在 dev server 启动以后通过 middlewares 实现的。

当浏览器发起请求以后，dev sever 会通过相应的 middlewares (transformMiddleware 、indexHtmlMiddleware)对请求做处理，然后将处理以后的内容返回给浏览器。

middlewares 对源文件的处理，分为 resolve、load、transform、parser 四个过程：

  1. resolve - 解析 url，找到源文件的绝对路径；
  2. load - 加载源文件。如果是第三方依赖，直接将预构建内容返回给浏览器；如果是业务代码，继续 transform、parser。
  3. transfrom - 对源文件内容做转换，即 ts -> js, less -> css 等。转换完成的内容可以直接返回给浏览器了。
  4. parser - 对转换以后的内容做分析，找到依赖模块，对依赖模块做预转换 - pre transform 操作，即重复 1 - 4。
    1. pre transform 是 Vite 做的一个优化点。预转换的内容会先做缓存，等浏览器发起请求以后，如果已经完成转换，直接将缓存的内容返回给浏览器。

Vite 在处理步骤 3 时，是通过 esbuild.transform 实现的，对比 Webpack 使用各个 loader 处理源文件，那是非常简单、快捷的。

模块请求加载过程：一个请求的 Vite 之旅

当浏览器一个请求到vite服务时，发生了什么？

主要由以下两个中间件来统一处理请求的内容，并在中间件处理的流程中调用 vite 插件容器的相关钩子函数

  • transformMiddleware：核心中间件处理代码
  • indexHtmlMiddleware：html 相关请求处理中间件

GET localhost ：实际 GET / => /index.html

当访问页面的时候，实际是有一个 GET / => /index.html 的重定向进入 indexHtmlMiddleware 这个过程，主要做了一件事情，注入 dev 环境需要的一些依赖，@vite/client 主要用来和服务器进行 ws 通信并处理一些 hmr 相关的工作。

GET client ：实际 GET /@vite/client

这个请求会直接进入 transformMiddleware 中间件中，进入中间件的处理过程：中间件会调用 transformRequest(url, server, options = {}) 函数

  1. @vite/client 是如何映射到对应的内容呢，在调用 pluginContainer.resolveId 的过程中会遇到 aliasPlugin 插件的钩子，执行名称替换，最终替换成 vite/dist/client/client.mjs
  1. 继续将改写过的路径传给下一个插件，最终进入 resolvePlugin 插件的 tryNodeResolve 函数，最终解析获得该文件的 id 为/lib/node_modules/vite/dist/client/client.mjs
  2. 最终通过 pluginContainer.load 获取加载本地文件，然后通过 pluginContainer.transform 进行代码转换，将转换后的代码通过 send 方法发送给浏览器。

有无 middlewares 的影响：例子—— vue-dev-server-analysis

（尤雨溪开发vue dev server理解vite原理 - 编程宝库）

# 克隆官方仓库
git clone https://github.com/vuejs/vue-dev-server.git
cd vue-dev-server
# npm i -g yarn
# 安装依赖
yarn

 一般来说，我们看源码先从package.json文件开始：

// vue-dev-server/package.json
{"name": "@vue/dev-server","version": "0.1.1","description": "Instant dev server for Vue single file components","main": "middleware.js",// 指定可执行的命令"bin": {"vue-dev-server": "./bin/vue-dev-server.js"},"scripts": {// 先跳转到 test 文件夹，再用 Node 执行 vue-dev-server 文件"test": "cd test && node ../bin/vue-dev-server.js"}
}

根据 scripts test 命令。我们来看 test 文件夹。

 test 文件夹：

vue-dev-server/test 文件夹下有三个文件，代码不长。

  • index.html
  • main.js
  • text.vue

如图下图所示。

接着我们找到 vue-dev-server/bin/vue-dev-server.js 文件，代码也不长。

主要是启动了端口 3000 的服务，重点在 vueMiddleware 中间件。接着我们来调试这个中间件。

vue-dev-server/bin/vue-dev-server.js 文件中这行 app.use(vueMiddleware()) 打上断点。

找到 vue-dev-server/package.json 的 scripts，把鼠标移动到 test 命令上，会出现运行脚本和调试脚本命令。如下图所示，选择调试脚本。

点击 进入函数（F11）按钮可以进入 vueMiddleware 函数。如果发现断点走到不是本项目的文件中，不想看，看不懂的情况，可以退出或者重新来过。可以用浏览器无痕（隐私）模式（快捷键Ctrl + Shift + N，防止插件干扰）打开 http://localhost:3000，可以继续调试 vueMiddleware 函数返回的函数。

有无 vueMiddleware 中间件对比:

先看结果，在具体分析：

不在调试情况状态下，我们可以在 vue-dev-server/bin/vue-dev-server.js 文件中注释 app.use(vueMiddleware())，执行 npm run test 打开  http://localhost:3000 .

再启用中间件后，如下图。

看图我们大概知道了有哪些区别。浏览器支持原生 type=module 模块请求加载。vue-dev-server 对其拦截处理，返回浏览器支持内容，因为无需打包构建，所以速度很快。

具体分析

接下来，我们来具体分析：

我们可以找到vue-dev-server/middleware.js，查看这个中间件函数的概览。

// vue-dev-server/middleware.jsconst vueMiddleware = (options = defaultOptions) => {// 省略return async (req, res, next) => {// 省略// 对 .vue 结尾的文件进行处理if (req.path.endsWith('.vue')) {// 对 .js 结尾的文件进行处理} else if (req.path.endsWith('.js')) {// 对 /__modules/ 开头的文件进行处理} else if (req.path.startsWith('/__modules/')) {} else {next()}}
}
exports.vueMiddleware = vueMiddleware

vueMiddleware 最终返回一个函数。这个函数里主要做了四件事：

  • 对 .vue  结尾的文件进行处理
  • 对 .js 结尾的文件进行处理
  • 对 /__modules/  开头的文件进行处理
  • 如果不是以上三种情况，执行 next 方法，把控制权交给下一个中间件

对 .vue 结尾的文件进行处理

if (req.path.endsWith('.vue')) {
const key = parseUrl(req).pathname
let out = await tryCache(key)
if (!out) {// Bundle Single-File Componentconst result = await bundleSFC(req) // 具体见下文,bundleSFC 编译单文件组件out = resultcacheData(key, out, result.updateTime)
}
send(res, out.code, 'application/javascript')
}

bundleSFC 编译单文件组件

这个函数，根据 @vue/component-compiler 转换单文件组件，最终返回浏览器能够识别的文件。

const vueCompiler = require('@vue/component-compiler')
async function bundleSFC (req) {
const { filepath, source, updateTime } = await readSource(req) // 看下文,readSource 读取文件资源
const descriptorResult = compiler.compileToDescriptor(filepath, source)
const assembledResult = vueCompiler.assemble(compiler, filepath, {...descriptorResult,script: injectSourceMapToScript(descriptorResult.script),styles: injectSourceMapsToStyles(descriptorResult.styles)
})
return { ...assembledResult, updateTime }
}

接着来看 readSource 函数实现。

readSource 读取文件资源

这个函数主要作用：根据请求获取文件资源。返回文件路径 filepath、资源 source、和更新时间 updateTime。

const path = require('path')
const fs = require('fs')
const readFile = require('util').promisify(fs.readFile)
const stat = require('util').promisify(fs.stat)
const parseUrl = require('parseurl')
const root = process.cwd()
async function readSource(req) {
const { pathname } = parseUrl(req)
const filepath = path.resolve(root, pathname.replace(/^\//, ''))
// 根据请求获取文件资源。返回文件路径 filepath、资源 source、和更新时间 updateTime。
return {filepath,source: await readFile(filepath, 'utf-8'),updateTime: (await stat(filepath)).mtime.getTime()
}
}
exports.readSource = readSource

接着我们来看对 .js 文件的处理

对 .js 结尾的文件进行处理

if (req.path.endsWith('.js')) {
const key = parseUrl(req).pathname
let out = await tryCache(key)
if (!out) {// transform import statements// 转换 import 语句 // import Vue from 'vue'// => import Vue from "/__modules/vue"const result = await readSource(req)out = transformModuleImports(result.source) // 转换 import 引入cacheData(key, out, result.updateTime)
}
send(res, out, 'application/javascript')
}

 针对 vue-dev-server/test/main.js 转换

import Vue from 'vue'
import App from './test.vue'
new Vue({render: h => h(App)
}).$mount('#app')

 转换：

import Vue from "/__modules/vue"
import App from './test.vue'
new Vue({render: h => h(App)
}).$mount('#app')

main.js 中的 import 语句import Vue from 'vue'通过 recast 生成 ast 转换成 import Vue from "/__modules/vue" 而最终返回给浏览器的是 vue-dev-server/node_modules/vue/dist/vue.esm.browser.js

main.js 中的引入 .vue 的文件，import App from './test.vue' 则用 @vue/component-compiler 转换成浏览器支持的文件，具体见下文。

对 /__modules/ 开头的文件进行处理

import Vue from "/__modules/vue"

 这段代码最终返回的是读取路径 vue-dev-server/node_modules/vue/dist/vue.esm.browser.js 下的文件。

if (req.path.startsWith('/__modules/')) {
// 
const key = parseUrl(req).pathname
const pkg = req.path.replace(/^\/__modules\//, '')
let out = await tryCache(key, false) // Do not outdate modules
if (!out) {out = (await loadPkg(pkg)).toString() // loadPkg 加载包（这里只支持Vue文件）cacheData(key, out, false) // Do not outdate modules
}
send(res, out, 'application/javascript')
}

loadPkg 加载包（这里只支持Vue文件）

目前只支持 Vue 文件，也就是读取路径 vue-dev-server/node_modules/vue/dist/vue.esm.browser.js 下的文件返回。

// vue-dev-server/loadPkg.js
const fs = require('fs')
const path = require('path')
const readFile = require('util').promisify(fs.readFile)
async function loadPkg(pkg) {
if (pkg === 'vue') {// 路径// vue-dev-server/node_modules/vue/distconst dir = path.dirname(require.resolve('vue'))const filepath = path.join(dir, 'vue.esm.browser.js')return readFile(filepath)
}
else {// TODO// check if the package has a browser es module that can be used// otherwise bundle it with rollup on the fly?throw new Error('npm imports support are not ready yet.')
}
}
exports.loadPkg = loadPkg

 至此，我们就基本分析完毕了主文件和一些引入的文件。对主流程有个了解。

Vite 提供了哪些常用的构建插件和中间件？如何使用它们？

上文讲到了对于不同的资源会有不同的插件去处理。Vite 提供了一些常用的构建插件和中间件，以帮助你在项目中进行开发和构建。

vite的内置插件：

vite在返回源码时，已经对源码做了一层处理，编译为浏览器可以运行的代码。实际上，对于不同的文件后缀，比如.ts、.vue、.tsx、.jsx，vite都会对其做不同的处理：

.vue文件

vite 默认支持 Vue 项目，并提供了一些 Vue 相关的插件，如 @vitejs/plugin-vue，用于解析和编译 Vue 单文件组件。

  • Vue 3 单文件组件支持：@vitejs/plugin-vue
  • Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
  • Vue 2 支持：underfin/vite-plugin-vue2

npm install @vitejs/plugin-vue

 在 vite.config.js 中使用 Vue 插件：

import { createVuePlugin } from 'vite-plugin-vue'export default {plugins: [createVuePlugin(/* options */)]
}

.ts文件

（packages/vite/src/node/plugins/esbuild.ts）

Vite 内置支持 TypeScript，无需额外的插件，其内部使用esbuild将TypeScript 转译到 JavaScript。可以直接在项目中使用 TypeScript。

.jsx文件、.tsx文件

（packages/vite/src/node/plugins/esbuild.ts）

JSX 的转译同样是通过 esbuild，默认为 React 16 风格。

.css文件

（packages/vite/src/node/plugins/css.ts）

Vite 支持处理 CSS 相关的插件，比如 vite-plugin-css，用于处理 CSS 文件和样式。导入 .css 文件将会把内容插入到标签中。

npm install vite-plugin-css

 在 vite.config.js 中使用 CSS 插件：

import { createCssPlugin } from 'vite-plugin-css'export default {plugins: [createCssPlugin(/* options */)]
}

裸模块重写

（packages/vite/src/node/plugins/resolve.ts）（packages/vite/src/node/plugins/importAnalysis.ts）

从下面这张图中，我们可以看到， vuex.js、vue-router.js 这种依赖模块文件名后面是有后缀的，而 main.js 等这种源代码文件是没有的。为什么会有这样的不同呢？这是因为 vuex.js、vue-router.js 是裸模块，而浏览器在加载文件时，只能加载相对地址，类似于 import Vuex from 'vuex'; 这种裸模块的加载，浏览器是不支持的，所以 vite 会对其做一层裸模块重写的处理，例如将引入 vuex 的url改写为 /node_modules/.vite/deps/vuex.js?v=bc6c6eed

由于 import vue 这种模块引入方式，使用的是 Nodejs 特有的模块查找算法（到 node_modules 中取查找），浏览器无法使用，因此 Vite 会将 vue 替换成一个另一个路径，当浏览器解析到这行 import 语句时，会发送一个 /node_modules/.vite/deps/vuex.js?v=bc6c6eed， Vite Server 会到该目录下，拿到 vue 预构建之后的产物代码。

你会发现，引入的 vuex 是在.vite文件夹里头，而不是在 node_modules 的 vuex 文件夹中，这是因为 vite 做了一个优化 —— 依赖预构建。

依赖预构建做了什么：

  • 扫描入口文件
  • 扫描所有用到的依赖
  • 将多个依赖进行打包
  • 修改这些模块的引入路径

简单来说，vite会对 package.json 中的 dependencies 部分先进行构建，然后把构建后的文件换存在 node_modules/.vite 文件夹中，当启动项目时，直接请求该缓存内容。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/144204.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java面试题（每天10题）-------连载（32）

Java面试题（每天10题）-------连载（32）

目录 设计模式篇 1、工厂方法模式（利用创建同一接口的不同实例）： 2、抽象工厂模式（多个工厂） 3、单例模式（保证对象只有一个实例） 4、原型模式（对一个原型进行复制、克隆产生类…
阅读更多...
芯科科技推出新的8位MCU系列产品，扩展其强大的MCU平台

芯科科技推出新的8位MCU系列产品，扩展其强大的MCU平台

新的BB5系列为简单应用提供更多开发选择 中国，北京 - 2023年11月14日 – 致力于以安全、智能无线连接技术，建立更互联世界的全球领导厂商Silicon Labs（亦称“芯科科技”，NASDAQ：SLAB），今日宣布…
阅读更多...
DataCamp在线学习平台

DataCamp在线学习平台

DataCamp（https://www.datacamp.com/blog）是一个在线学习平台，专注于数据科学和分析领域的教育。该平台提供丰富的课程，涵盖了从数据处理到机器学习和深度学习的各个方面。以下是DataCamp的主要特点： 互动学习&#x…
阅读更多...
Redis配置、Redis类型

Redis配置、Redis类型

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 第七章 Spring Cloud 之 GateWay 第八章 Sprin…
阅读更多...
代码随想录算法训练营第五十五天丨 动态规划part16

代码随想录算法训练营第五十五天丨 动态规划part16

583. 两个字符串的删除操作 思路 #动态规划一 本题和动态规划：115.不同的子序列 (opens new window)相比，其实就是两个字符串都可以删除了，情况虽说复杂一些，但整体思路是不变的。 这次是两个字符串可以相互删了，这…
阅读更多...
智慧工地AI视频管理平台源码

智慧工地AI视频管理平台源码

智慧工地是指以物联网、移动互联网技术为基础，充分应用人工智能等信息技术，通过AI赋能建筑行业，对住建项目内人员、车辆、安全、设备、材料等进行智能化管理，实现工地现场生产作业协调、智能处理和科学管理。智慧工地的核心是以一…
阅读更多...
RabbitMQ之死信队列

RabbitMQ之死信队列

文章目录 一、死信的概念二、死信的来源三、实战1、消息 TTL 过期2、队列达到最大长度3、消息被拒 总结 一、死信的概念 先从概念解释上搞清楚这个定义，死信，顾名思义就是无法被消费的消息，字面意思可以这样理解，一般来说&#x…
阅读更多...
MATLAB中Filter Designer的使用以及XILINX Coefficient(.coe)File的导出

MATLAB中Filter Designer的使用以及XILINX Coefficient(.coe)File的导出

文章目录 Filter Designer的打开滤波器参数设置生成matlab代码生成XILINX Coefficient(.COE) File实际浮点数的导出官方使用教程 Filter Designer的打开 打开Filter Designer： 方法一：命令行中输入Filter Designer，再回车打开。 方法二&…
阅读更多...
@Version乐观锁配置mybatis-plus使用(version)

@Version乐观锁配置mybatis-plus使用(version)

1：首先在实体类的属性注解上使用Version import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.baomidou.mybatisplus.annotation.Versio…
阅读更多...
Google codelab WebGPU入门教程源码＜5＞ - 使用Storage类型对象给着色器传数据(源码)

Google codelab WebGPU入门教程源码＜5＞ - 使用Storage类型对象给着色器传数据(源码)

对应的教程文章: https://codelabs.developers.google.com/your-first-webgpu-app?hlzh-cn#5 对应的源码执行效果: 对应的教程源码: 此处源码和教程本身提供的部分代码可能存在一点差异。运行的时候，点击画面可以切换效果。 class Color4 {r: number;g: numb…
阅读更多...
ceph 14.2.10 aarch64 非集群内 客户端 挂载块设备

ceph 14.2.10 aarch64 非集群内 客户端 挂载块设备

集群上的机器测试 706 ceph pool create block-pool 64 64 707 ceph osd pool create block-pool 64 64 708 ceph osd pool application enable block-pool rbd 709 rbd create vdisk1 --size 4G --pool block-pool --image-format 2 --image-feature layering 7…
阅读更多...
@postmapping 定义formdata传参方式

@postmapping 定义formdata传参方式

背景：feign声明接口，传对象， 但是对象那边没有用requestBody接收； 前端调它也是走的formdata，所以不改变源代码，以及补新接口的情况下，我也需要formdata传参； 不然数据传不过去会为空…
阅读更多...
GDS 命令的使用 srvctl service TAF application continuity

GDS 命令的使用 srvctl service TAF application continuity

文档中prim and stdy在同一台机器上，不同机器需要添加address list TAF ENABLED GLOBAL SERVICE in GDS ENVIRONMNET 12C. (Doc ID 2283193.1)​编辑To Bottom In this Document Goal Solution APPLIES TO: Oracle Database - Enterprise Edition - Version 12.1.…
阅读更多...
漏电继电器 LLJ-250HT AC220V 50-500ma 面板安装

漏电继电器 LLJ-250HT AC220V 50-500ma 面板安装

系列型号： LLJ-10H(S)漏电继电器LLJ-15H(S)漏电继电器LLJ-16H(S)漏电继电器 LLJ-25H(S)漏电继电器LLJ-30H(S)漏电继电器LLJ-32H(S)漏电继电器 LLJ-60H(S)漏电继电器LLJ-63H(S)漏电继电器LLJ-80H(S)漏电继电器 LLJ-100H(S)漏电继电器LLJ-120H(S)漏电继电器LLJ-125H(…
阅读更多...
优思学院｜新版ISO9001:2015质量体系的优势（一）高阶结构

优思学院｜新版ISO9001:2015质量体系的优势（一）高阶结构

在全球商业环境中，不断提高产品和服务的质量至关重要。因此，国际标准组织（ISO）于2015年发布了更新的ISO 9001标准，即ISO 9001:2015质量体系标准。这一更新旨在适应不断变化的商业需求和挑战，为组织提供更强…
阅读更多...
Idea 编译SpringBoot项目Kotlin报错/Idea重新编译

Idea 编译SpringBoot项目Kotlin报错/Idea重新编译

原因应该是一次性修改了大量的文件, SpringBoot项目启动Kotlin报错, Build Project也是同样的结果, 报错如下 Error:Kotlin: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.9.0, expected version is 1.1.13. Build-&…
阅读更多...
多svn仓库一键更新脚本分享

多svn仓库一键更新脚本分享

之前分享过多git仓库一键更新脚本，本期就分享下svn仓库的一键更新脚本 1、首先需要设置svn为可执行命令行 打开SVN安装程序，选择modify，然后点击 command client tools，安装命令行工具 2、update脚本 echo 开始更新SVN目录&…
阅读更多...
qt+opengl 着色器VAO、VBO、EBO（四）

qt+opengl 着色器VAO、VBO、EBO（四）

文章目录 一、顶点着色器和片段着色器代码分析1. 着色器12. 顶点着色器2 二、使用步骤1. 使用着色器12. 使用着色器23. 在着色器2中使用EBO 三、完整代码 一、顶点着色器和片段着色器代码分析 1. 着色器1 用到的坐标矩阵, 四个四边形顶点坐标 float vertices_data[36] {// 所…
阅读更多...
mybatis之主键返回

mybatis之主键返回

1.在mybatis的xml中加入 <insert id"insertUser" keyProperty"id" useGeneratedKeys"true" parameterType"com.UserAndOrder"> insert into Tuser(userName,passWord) values (#{userName},#{passWord} ) </insert&…
阅读更多...
多维时序 | MATLAB实现PSO-BiLSTM-Attention粒子群优化双向长短期记忆神经网络融合注意力机制的多变量时间序列预测

多维时序 | MATLAB实现PSO-BiLSTM-Attention粒子群优化双向长短期记忆神经网络融合注意力机制的多变量时间序列预测

多维时序 | MATLAB实现PSO-BiLSTM-Attention粒子群优化双向长短期记忆神经网络融合注意力机制的多变量时间序列预测 目录 多维时序 | MATLAB实现PSO-BiLSTM-Attention粒子群优化双向长短期记忆神经网络融合注意力机制的多变量时间序列预测预测效果基本介绍模型描述程序设计参考…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023