全部学科

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Python全栈

python

GO后端

golang gorm gin

Web前端

TypeScript vue CSS HTML javascript pinia vite

通用技术

redis git docker nginx mysql zookeeper rabbitmq

NodeJS全栈

nodejs

📝 1 篇文章 25 道配套习题

构建优化策略专题

专题说明

本专题深入介绍 Vite 构建优化策略，帮助开发者掌握代码分割、Tree Shaking、资源压缩等优化技巧。

学习目标

掌握代码分割策略减少包体积
理解 Tree Shaking 去除无用代码
学会资源压缩与懒加载配置

学习内容

代码分割策略：manualChunks 配置
Tree Shaking 配置：副作用标记
资源压缩优化：压缩配置
动态导入与懒加载：import() 使用

学习建议

实际分析构建产物大小，应用优化策略后对比效果。

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

📝 配套习题（22 题）

1

判断题

build.rollupOptions.manualChunks 配置可以自定义代码分割策略，将模块打包到指定的 chunk。

A

对

B

错

2

单选题

配置 manualChunks: { vendor: ['vue', 'vue-router'] } 的效果是什么？

A

将 vue 和 vue-router 合并到一个名为 vendor 的 chunk

B

将 vue 和 vue-router 从打包中排除

C

将 vue 和 vue-router 作为外部依赖

D

将 vendor 目录打包成独立 chunk

3

多选题

使用 manualChunks 函数形式配置代码分割可以实现哪些功能？

A

根据模块 ID 动态判断分组

B

自动分离 node_modules 依赖

C

根据模块大小决定是否分割

D

控制 chunk 的命名规则

4

多选题

合理的代码分割策略可以带来哪些优化效果？

A

分离第三方库利用长期缓存

B

按路由分割实现懒加载

C

减小首屏加载资源体积

D

提升构建速度

5

判断题

build.minify 默认使用 esbuild 进行压缩，速度比 terser 更快。

A

对

B

错

6

单选题

以下哪个场景适合使用 terser 替代 esbuild 进行压缩？

A

构建速度优先的项目

B

需要更高级压缩特性的项目

C

纯 CSS 项目

D

开发环境构建

7

多选题

build.minify 配置项可以设置为哪些值？

A

'esbuild' - 使用 esbuild 压缩

B

'terser' - 使用 terser 压缩

C

false - 不进行压缩

D

'uglify' - 使用 UglifyJS 压缩

8

多选题

使用 terser 压缩时，build.terserOptions 可以配置哪些选项？

A

compress - 压缩规则配置

B

mangle - 变量名混淆配置

C

format - 输出格式配置

D

ecma - 目标 ES 版本

9

判断题

build.chunkSizeWarningLimit 配置可以调整 chunk 大小警告的阈值。

A

对

B

错

10

单选题

chunk 大小警告的默认阈值是多少 KB？

A

100 KB

B

250 KB

C

500 KB

D

1000 KB

11

多选题

chunk 大小警告出现时，推荐的优化方案有哪些？

A

使用 manualChunks 分割大模块

B

使用动态导入实现懒加载

C

增加 chunkSizeWarningLimit 阈值

D

分析 chunk 组成定位大模块

12

多选题

以下哪些因素会影响 chunk 大小警告的触发？

A

chunk 的实际体积

B

是否使用 gzip 压缩

C

chunk 包含的模块数量

D

chunkSizeWarningLimit 配置值

13

单选题

设置 build.assetsInlineLimit: 0 的效果是什么？

A

所有资源都内联为 base64

B

所有资源都单独输出为文件

C

只内联图片资源

D

只内联 SVG 资源

14

多选题

资源内联为 base64 的优缺点有哪些？

A

减少 HTTP 请求数量

B

增加代码体积约 33%

C

无法利用浏览器缓存

D

适合小图标和小图片

15

多选题

以下哪些资源类型受 assetsInlineLimit 配置影响？

A

图片文件（png、jpg、gif）

B

SVG 图像

C

字体文件

D

视频文件

16

判断题

build.sourcemap 配置可以控制生产构建是否生成 Source Map 文件。

A

对

B

错

17

单选题

设置 build.sourcemap: 'hidden' 的效果是什么？

A

不生成 Source Map 文件

B

生成 Source Map 但不关联到产物

C

生成 Source Map 并内联到代码

D

只生成 JS Source Map

18

多选题

build.sourcemap 配置项可以设置为哪些值？

A

true - 生成独立 Source Map 文件

B

false - 不生成 Source Map

C

'inline' - Source Map 内联到代码中

D

'hidden' - 生成但不关联到产物

19

多选题

生产环境生成 Source Map 的考虑因素有哪些？

A

方便排查生产环境问题

B

会暴露源代码内容

C

增加构建产物体积

D

影响加载性能

20

单选题

配置 Vite 库模式构建需要设置哪个配置项？

A

build.mode: 'library'

B

build.lib 配置对象

C

build.target: 'lib'

D

build.format: 'library'

21

多选题

build.lib 配置对象可以设置哪些选项？

A

entry - 库入口文件路径

B

name - 库的全局变量名

C

formats - 输出格式（es、cjs、umd）

D

fileName - 自定义输出文件名

22

多选题

库模式构建相比普通应用构建有哪些特点？

A

不打包依赖，外部化 node_modules

B

生成多格式产物（ESM、CJS、UMD）

C

通常不需要代码分割

D

输出类型声明文件

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

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

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