（四）什么是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.rhkb.cn/news/193902.html

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

相关文章

Uniapp-小程序自定义导航栏

Uniapp-小程序自定义导航栏

一、项目背景 制作小程序页面时候发现原生导航栏有一定的高度是没有背景渲染的会出现这种情况 但是我们需要的是 二、原因 小程序的原生导航栏存在。一般可以使用 纯色填充顶部栏 可以直接使用navigationBarBackgroundColor完成 在style中添加 "navigationBarBackgrou…
阅读更多...
深入了解域名与SSL证书的关系

深入了解域名与SSL证书的关系

在如今数字化的世界里，网络安全成为我们关注的重要议题之一。为了确保数据在网络上传输的安全性，我们通常会采取各种安全措施，其中最常用的就是SSL证书。然而，很多人并不了解SSL证书是如何与域名相互关联的。 首先，我…
阅读更多...
Pytorch自动混合精度的计算：torch.cuda.amp.autocast

Pytorch自动混合精度的计算：torch.cuda.amp.autocast

1 autocast介绍 1.1 什么是AMP? 默认情况下，大多数深度学习框架都采用32位浮点算法进行训练。2017年，NVIDIA研究了一种用于混合精度训练的方法，该方法在训练网络时将单精度（FP32）与半精度(FP16)结合在一起&#xff…
阅读更多...
如何解决网页中的pdf文件无法下载？pdf打印显示空白怎么办？

如何解决网页中的pdf文件无法下载？pdf打印显示空白怎么办？

问题描述 偶然间，遇到这样一个问题，一个网页上的附件pdf想要下载打印下来，奈何尝试多种办法都不能将其下载下载，点击打印出现的也是一片空白 百度搜索了一些解决方案都不太行，主要解决方案如：https://zh…
阅读更多...
Open3D-ML点云语义分割【RandLA-Net】

Open3D-ML点云语义分割【RandLA-Net】

作为点云 Open3D-ML 实验的一部分，我撰写了文章解释如何使用 Tensorflow 和 PyTorch 支持安装此库。 为了测试安装，我解释了如何运行一个简单的 Python 脚本来可视化名为 SemanticKITTI 的语义分割标记数据集。 在本文中，我将回顾在任何点云上…
阅读更多...
uniapp h5发行

uniapp h5发行

前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上。 这样通过服务器链接地址，直接可以在手机上点开来访问。 打包全步骤如下： 首先在manifest.json文件中进行基础配置，获取…
阅读更多...
【SpringBoot篇】分页查询 | 扩展SpringMvc的消息转换器

【SpringBoot篇】分页查询 | 扩展SpringMvc的消息转换器

文章目录 🛸什么是分页查询🌹代码实现⭐问题🎄解决方法 做了几个项目，发现在这几个项目里面，都实现了分页查询效果，所以就总结一下，方便学习 我们基于黑马程序员的苍穹外卖来讲解分页查询的要点…
阅读更多...
黑马程序员微服务 分布式搜索引擎3

黑马程序员微服务 分布式搜索引擎3

分布式搜索引擎03 0.学习目标 1.数据聚合 **聚合（aggregations）**可以让我们极其方便的实现对数据的统计、分析、运算。例如： 什么品牌的手机最受欢迎？这些手机的平均价格、最高价格、最低价格？这些手机每月的销售…
阅读更多...
哪种猫罐头比较好？推荐给新手养猫的5款好口碑猫罐头！

哪种猫罐头比较好？推荐给新手养猫的5款好口碑猫罐头！

新手养猫很容易陷入疯狂购买的模式，但有些品牌真的不能乱买！现在的大环境不太好，我们需要学会控制自己的消费欲望，把钱花在刀刃上！哪种猫罐头比较好？现在宠物市场真的很内卷，很多品牌都在比拼产…
阅读更多...
字母不重复的子串-第15届蓝桥第二次STEMA测评Scratch真题精选

字母不重复的子串-第15届蓝桥第二次STEMA测评Scratch真题精选

[导读]：超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成，后续会不定期解读蓝桥杯真题，这是Scratch蓝桥杯真题解析第158讲。 第15届蓝桥第2次STEMA测评已于2023年10月29日落下帷幕，编程题一共有6题，分别如下&am…
阅读更多...
无需云盘，不限流量实现Zotero跨平台同步：内网穿透+私有WebDAV服务器

无需云盘，不限流量实现Zotero跨平台同步：内网穿透+私有WebDAV服务器

🔥博客主页： 小羊失眠啦. 🎥系列专栏：《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 无需云盘，不限流量实现Zotero跨平台同步：内网穿透私有WebDAV服务器 文章目…
阅读更多...
2-10岁女童冬季穿搭怎么选？麻麻们看这里

2-10岁女童冬季穿搭怎么选？麻麻们看这里

分享适合女宝的羽绒服穿搭 这种黄色真的超好看 吸睛显白怎么穿都好看 长款连帽设计，精致走线 冬天穿时尚又好看！！
阅读更多...
数据结构—LinkedList与链表

数据结构—LinkedList与链表

目录 一、链表 1. 链表的概念及结构 1. 单向或者双向 2. 带头或者不带头 3. 循环或者非循环 二.LinkedList的使用 1.LinkedList概念及结构 2. LinkedList的构造 3. LinkedList的方法 三. ArrayList和LinkedList的区别 一、链表 1. 链表的概念及结构 链表是一种 物理…
阅读更多...
基于Qt 多线程(继承 QObject 的线程)

基于Qt 多线程(继承 QObject 的线程)

​ 继承 QThread 类是创建线程的一种方法，另一种就是继承QObject 类。继承 QObject 类更加灵活。它通过 QObject::moveToThread()方法，将一个 QObeject的类转移到一个线程里执行。恩，不理解的话，我们下面也画个图捋一下。 通过上面的图不难理解，首先我们写一个类继承 QObj…
阅读更多...
Ladybug 全景相机， 360°球形成像，带来全方位的视觉体验

Ladybug 全景相机， 360°球形成像，带来全方位的视觉体验

360无死角全景照片总能给人带来强烈的视觉震撼，有着大片的既视感。那怎么才能拍出360球形照片呢？它的拍摄原理是通过图片某个点位为中心将图片其他部位螺旋式、旋转式处理，从而达到沉浸式体验的效果。俗话说“工欲善其事，必先利其…
阅读更多...
Maven编译报错：javacTask: 源发行版 1.8 需要目标发行版 1.8

Maven编译报错：javacTask: 源发行版 1.8 需要目标发行版 1.8

报错截图： IDEA中的jdk检查都正常设置的1.8一点毛病没有。参考其他帖子链接如下： https://blog.csdn.net/zhishidi/article/details/131480199https://blog.51cto.com/u_16213460/7197764https://blog.csdn.net/lck_csdn/article/details/125387878 逐…
阅读更多...
第四代智能井盖传感器，万宾科技助力城市安全

第四代智能井盖传感器，万宾科技助力城市安全

在迈向更为智能化、相互联系更为紧密的城市发展过程中，智能创新产品无疑扮演了一种重要的角色。智能井盖传感器作为新型科学技术产物，不仅解决传统井盖管理难的问题，也让城市变得更加安全美好，是城市生命线的一层重要保障。这些平…
阅读更多...
Mindomo Desktop for Mac(免费思维导图软件)下载

Mindomo Desktop for Mac(免费思维导图软件)下载

Mindomo Desktop for Mac是一款免费的思维导图软件，适用于Mac电脑用户。它可以帮助你轻松创建、编辑和共享思维导图，让你的思维更加清晰、有条理。 首先，Mindomo Desktop for Mac具有直观易用的界面。它采用了Mac独特的用户界面设计&#xf…
阅读更多...
避免defer陷阱：拆解延迟语句，掌握正确使用方法

避免defer陷阱：拆解延迟语句，掌握正确使用方法

基本概念 Go语言的延迟语句defer有哪些特点？通常在什么情况下使用？ Go语言的延迟语句（defer statement）具有以下特点： 延迟执行：延迟语句会在包含它的函数执行结束前执行，无论函数是正常返回还是…
阅读更多...
科研学习|研究方法——Python计量Logit模型

科研学习|研究方法——Python计量Logit模型

一、离散选择模型 莎士比亚曾经说过：To be, or not to be, that is the question，这就是典型的离散选择模型。如果被解释变量时离散的，而非连续的，称为“离散选择模型”。例如，消费者在购买汽车的时候通常会比较几个不…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发