全部学科
Web前端
TypeScript vue CSS HTML javascript pinia vite
通用技术
redis git docker nginx mysql zookeeper rabbitmq
GO后端
golang gorm gin
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
NodeJS全栈
nodejs
Python全栈
python
小程序首页
VITE / 专题
📝 1 篇文章 18 道配套习题

构建原理与底层机制专题

专题说明

本专题深入介绍 Vite 构建原理与底层机制，帮助开发者理解 Vite 的核心技术实现。

学习目标

  1. 理解 Vite 构建流程的核心原理
  2. 掌握 HMR 边界计算算法
  3. 了解模块图与依赖分析机制

学习内容

  • HMR 边界计算算法：热更新边界定位原理
  • 模块图与依赖分析：模块依赖关系管理
  • 构建流程解析：从源码到产物的完整流程

学习建议

理解 Vite 源码中的核心逻辑，从原理层面理解工具行为。

📝 发现内容有误？点击此处直接编辑

📝 配套习题（18 题）

1
单选题

Vite 在开发环境下不进行 bundle 的核心技术原因是什么？

A

使用 esbuild 编译速度快

B

利用浏览器原生 ESM 按需加载

C

使用缓存避免重复编译

D

依赖预构建减少模块数

2
单选题

esbuild 在依赖预构建中的性能优势主要来自什么？

A

使用多线程并行处理

B

Go 语言编写，执行效率高

C

简化的语法解析逻辑

D

以上都是

3
多选题

Rollup 在生产构建阶段负责什么？

A

模块图构建和依赖分析

B

代码分割（chunk 分割）

C

Tree Shaking 删除无用代码

D

代码压缩和优化

4
单选题

Vite 开发环境利用浏览器原生 ESM 加载模块的主要优势是什么？

A

支持更多语法特性

B

无需打包即可按需加载

C

更好的兼容性

D

自动生成 Source Map

5
多选题

Vite 开发环境的 ESM 加载流程包含哪些步骤？

A

浏览器请求入口 HTML

B

HTML 中 script 标签加载入口 JS

C

JS 中的 import 触发模块请求

D

Vite 即时编译返回模块内容

6
多选题

Vite 处理非 ESM 依赖（如 CJS 包）的策略是什么？

A

使用 esbuild 预构建转换为 ESM

B

开发环境直接请求 CJS 文件

C

缓存预构建结果到 node_modules/.vite

D

生产构建时 Rollup 自动处理

7
单选题

Vite 选择 esbuild 进行依赖预构建的主要原因是什么？

A

esbuild 支持更多语法

B

esbuild 基于 Go 编写，速度极快

C

esbuild 内置缓存机制

D

esbuild 支持所有 npm 包格式

8
多选题

esbuild 预构建的依赖缓存机制有哪些特点？

A

缓存存储在 node_modules/.vite 目录

B

依赖变化时自动重新预构建

C

可手动删除缓存强制重建

D

缓存基于 package.json 和 lockfile 判断过期

9
多选题

optimizeDeps 配置可以控制预构建行为，以下哪些是正确的？

A

include 强制预构建指定依赖

B

exclude 排除预构建的依赖

C

esbuild 选项传递给预构建 esbuild

D

force 强制重新预构建

10
单选题

Vite 生产构建为什么选择 Rollup 而不是 esbuild？

A

Rollup 速度更快

B

Rollup 提供更好的代码分割和 CSS 处理

C

esbuild 不支持生产构建

D

Rollup 兼容性更好

11
多选题

Rollup 的模块图构建包含哪些步骤？

A

从入口开始递归分析导入

B

构建模块间的依赖关系图

C

分析导出和导入标记 Tree Shaking

D

根据依赖关系分割 chunk

12
多选题

Rollup chunk 分割算法考虑哪些因素？

A

动态导入创建异步 chunk

B

manualChunks 配置手动分组

C

共享依赖提取为公共 chunk

D

chunk 大小限制

13
单选题

Vite 模块图 ModuleGraph 的主要作用是什么？

A

存储模块源代码

B

记录模块间依赖关系用于 HMR 边界计算

C

缓存编译结果

D

追踪模块版本变化

14
多选题

ModuleGraph 记录了哪些模块信息？

A

模块 ID（路径）

B

模块的导入依赖列表

C

模块的导入者列表

D

模块的转换结果

15
多选题

模块图在 HMR 中的作用是什么？

A

查找修改模块的边界模块

B

确定需要热更新的模块链

C

判断是否需要完整刷新

D

缓存已更新的模块状态

16
单选题

HMR 边界（boundary）模块的定义是什么？

A

入口模块

B

调用 import.meta.hot.accept 的模块

C

不依赖其他模块的模块

D

只导出 CSS 的模块

17
多选题

HMR 更新传播的算法流程是什么？

A

从修改模块开始向上查找导入者

B

找到 accept 边界模块停止传播

C

边界模块执行 accept 回调更新

D

没找到边界则触发完整页面刷新

18
多选题

HMR 的 accept 回调可以接收哪些参数？

A

更新的模块路径列表

B

更新模块的新导出内容

C

更新模块的旧导出内容

D

更新的 Source Map

← 上一个专题 构建优化策略专题
下一个专题 → 框架集成实践专题

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？
小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库