全部学科
Python全栈
python
NodeJS全栈
nodejs
📝 1 篇文章 25 道配套习题

构建优化策略专题

专题说明

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

学习目标

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

学习内容

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

学习建议

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

📝 配套习题(22 题)

💡 参考答案在文末
判断题
1

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

A

B

2

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

A

B

3

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

A

B

4

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

A

B

单选题
5

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

A

构建速度优先的项目

B

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

C

纯 CSS 项目

D

开发环境构建

6

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

A

所有资源都内联为 base64

B

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

C

只内联图片资源

D

只内联 SVG 资源

7

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

A

build.mode: 'library'

B

build.lib 配置对象

C

build.target: 'lib'

D

build.format: 'library'

8

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

A

不生成 Source Map 文件

B

生成 Source Map 但不关联到产物

C

生成 Source Map 并内联到代码

D

只生成 JS Source Map

9

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

A

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

B

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

C

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

D

将 vendor 目录打包成独立 chunk

10

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

A

100 KB

B

250 KB

C

500 KB

D

1000 KB

多选题
11

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

A

减少 HTTP 请求数量

B

增加代码体积约 33%

C

无法利用浏览器缓存

D

适合小图标和小图片

12

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

A

chunk 的实际体积

B

是否使用 gzip 压缩

C

chunk 包含的模块数量

D

chunkSizeWarningLimit 配置值

13

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

A

使用 manualChunks 分割大模块

B

使用动态导入实现懒加载

C

增加 chunkSizeWarningLimit 阈值

D

分析 chunk 组成定位大模块

14

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

A

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

B

按路由分割实现懒加载

C

减小首屏加载资源体积

D

提升构建速度

15

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

A

图片文件(png、jpg、gif)

B

SVG 图像

C

字体文件

D

视频文件

16

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

A

根据模块 ID 动态判断分组

B

自动分离 node_modules 依赖

C

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

D

控制 chunk 的命名规则

17

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

A

compress - 压缩规则配置

B

mangle - 变量名混淆配置

C

format - 输出格式配置

D

ecma - 目标 ES 版本

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

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

A

'esbuild' - 使用 esbuild 压缩

B

'terser' - 使用 terser 压缩

C

false - 不进行压缩

D

'uglify' - 使用 UglifyJS 压缩

21

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

A

entry - 库入口文件路径

B

name - 库的全局变量名

C

formats - 输出格式(es、cjs、umd)

D

fileName - 自定义输出文件名

22

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

A

不打包依赖,外部化 node_modules

B

生成多格式产物(ESM、CJS、UMD)

C

通常不需要代码分割

D

输出类型声明文件

参考答案
1.正确 2.正确 3.正确 4.正确 5.B 6.B 7.B 8.B 9.A 10.C 11.A;B;C;D 12.A;D 13.A;B;D 14.A;B;C 15.A;B;C 16.A;B;C;D 17.A;B;C;D 18.A;B;C;D 19.A;B;C 20.A;B;C 21.A;B;C;D 22.A;B;C;D
想在手机上练习这套专题?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码
← 上一个专题 构建与部署专题
下一个专题 → 构建原理与底层机制专题
扫码体验小程序
加载中
想在手机上刷题学习?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码