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

高级性能优化专题

专题说明

本专题深入介绍 Vite 高级性能优化技术，帮助开发者最大化优化构建产物与加载性能。

学习目标

  1. 掌握 Bundle 分析与优化方法
  2. 学会 Tree Shaking 深度优化
  3. 理解动态导入与懒加载策略

学习内容

  • Bundle 分析与优化：产物分析与体积优化
  • Tree Shaking 深度优化：深度去除无用代码
  • 动态导入与懒加载策略：运行时加载优化

学习建议

使用 rollup-plugin-visualizer 分析产物，应用多种优化策略对比效果。

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

📝 配套习题（17 题）

1
单选题

rollup-plugin-visualizer 插件的作用是什么？

A

加快构建速度

B

生成 Bundle 体积可视化分析图表

C

自动优化代码分割

D

压缩产物体积

2
多选题

Bundle 体积分析后可以采取哪些优化措施？

A

分离大型第三方库为独立 chunk

B

使用更轻量的替代库

C

移除未使用的代码和依赖

D

配置 Tree Shaking 排除副作用

3
多选题

分析 Bundle 体积时需要关注哪些指标？

A

单个 chunk 的体积大小

B

第三方库在总体积中的占比

C

重复打包的依赖模块

D

gzip 后的体积变化

4
单选题

Tree Shaking 有效的前提条件是什么？

A

使用 ES5 语法

B

使用 ESM 格式的导入导出

C

所有代码都在一个文件中

D

禁用代码分割

5
多选题

哪些因素会影响 Tree Shaking 效果？

A

模块是否有副作用标记

B

使用动态导入或 require

C

package.json 的 sideEffects 配置

D

代码中调用全局 API

6
多选题

如何优化 Tree Shaking 效果？

A

在 package.json 设置 sideEffects: false

B

使用纯 ESM 格式的依赖库

C

避免有副作用的导入语句

D

使用 /#PURE/ 标记纯函数调用

7
单选题

动态导入 import('./module.js') 在 Vite 中会生成什么？

A

合并到主 bundle 中

B

独立的异步 chunk 文件

C

内联到 HTML 中

D

延迟加载的 CSS 文件

8
多选题

懒加载策略在哪些场景下最有效？

A

路由级别组件懒加载

B

大型第三方库按需加载

C

非首屏内容延迟加载

D

核心功能模块懒加载

9
多选题

动态导入与预加载如何配合使用？

A

使用 prefetch 预加载未来需要的 chunk

B

使用 preload 预加载当前路由依赖

C

Vite 自动生成 preload 链接

D

prefetch 在空闲时加载不影响当前性能

10
单选题

在 Vite 中使用 ?worker 参数导入文件的作用是什么？

A

启用模块缓存

B

将模块作为 Web Worker 加载

C

启用代码分割

D

增加构建速度

11
多选题

Web Worker 适合处理哪些类型的任务？

A

大数据计算处理

B

图像/视频处理

C

加密解密运算

D

DOM 操作和渲染

12
多选题

Vite 处理 Web Worker 的特性有哪些？

A

使用 ?worker 参数自动打包为 Worker

B

支持 Worker 内使用 import 导入模块

C

返回 Worker 实例可直接使用

D

Worker 代码自动压缩优化

13
单选题

Vite 的持久缓存存储在哪里？

A

内存中

B

node_modules/.vite 目录

C

dist 目录

D

.cache 目录

14
多选题

哪些情况会触发缓存失效重新构建？

A

package.json 依赖版本变化

B

lockfile（如 pnpm-lock.yaml）变化

C

vite.config.js 相关配置变化

D

手动删除 node_modules/.vite

15
多选题

如何优化构建缓存策略？

A

使用 optimizeDeps.include 预构建常用依赖

B

保持依赖版本稳定避免频繁重建

C

CI 环境缓存 node_modules/.vite 目录

D

使用 force: true 强制每次重建

16
单选题

提升 Vite Tree Shaking 效果的关键措施是什么？

A

使用 ES Module 格式编写代码

B

正确标记 package.json 中的 sideEffects

C

避免使用动态导入

D

A 和 B 都是

17
多选题

优化首屏加载的动态导入策略包括？

A

路由级代码分割

B

组件预加载（prefetch）

C

关键组件内联到首屏

D

所有组件都动态导入

← 上一个专题 高级SSR实现专题

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

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

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

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