前端工程化

中级 04

前端工程化中级题库第 4 组，共 12 张卡片。

卡片数: 12 张卡
预估时长: 约 14 分钟

Q1选择题难度 2

1/12

前端工程化 · 中级 04

记忆强度

Vite 开发环境中修改模块后，哪些运行结果符合其机制？（多选）

现代 Vite 项目中，main.js 导入 counter.js 和 theme.css。counter.js 调用 import.meta.hot.accept 接受自身更新并替换页面计数逻辑；theme.css 由 Vite 正常处理。现在先修改 theme.css，随后只修改 counter.js。浏览器支持原生 ES Modules，期间没有修改 Vite 配置。

本节速览12 题 · 含答案

Vite 开发服务器利用浏览器原生 ESM 按请求提供源模块，并对请求到的文件进行必要转换，因而源码改动通常不要求重建完整应用 bundle。
@babel/plugin-transform-runtime 的核心作用之一，是把 Babel 转换所需的可复用 helper 改成对 @babel/…
较合理的方案是生成独立映射文件，但不在公开 JavaScript 中写入可被浏览器发现的 sourceMappingURL，再由发布流水线把映射文件上传…
小资源适度内联可以减少额外请求和发现延迟，但 Data URL 编码会增加文本体积，并把图片生命周期绑定到引用它的 JavaScript 或 CSS 文件。
动态 import() 为构建工具提供异步代码分割边界，运行时通常通过 Promise 协调 chunk 获取、模块执行与结果返回。
应启用 webpack 5 的 splitChunks，并通过 chunks 与 cacheGroups 提取两个入口共同使用的第三方模块。
这是异步 CSS 加载时序造成的无样式内容闪烁。
共享依赖被稳定地拆为独立 chunk 后，业务模块发生变化时，未变化的依赖文件通常可以保持相同内容哈希，从而继续命中浏览器或 CDN 的长期缓存。
应先缩小 Babel 的处理范围，并利用缓存复用未变化文件的转译结果。
@babel/plugin-transform-runtime 会把 Babel 原本可能内联到各文件的辅助函数改为从 @babel/runtime 引…
Vite 的开发模式利用原生 ESM，通常无需在启动前把全部业务源码打成完整 bundle，而是按请求转换并提供模块；
transform-runtime 可以把重复注入到各模块的 Babel 辅助函数改为从 @babel/runtime 引用，从而减少重复代码，并避免某…

前端工程化

中级 04

前端工程化中级题库第 4 组，共 12 张卡片。

卡片数: 12 张卡
预估时长: 约 14 分钟

Q1选择题难度 2

1/12

前端工程化 · 中级 04

记忆强度

Vite 开发环境中修改模块后，哪些运行结果符合其机制？（多选）

本节速览12 题 · 含答案

Vite 开发服务器利用浏览器原生 ESM 按请求提供源模块，并对请求到的文件进行必要转换，因而源码改动通常不要求重建完整应用 bundle。
@babel/plugin-transform-runtime 的核心作用之一，是把 Babel 转换所需的可复用 helper 改成对 @babel/…
较合理的方案是生成独立映射文件，但不在公开 JavaScript 中写入可被浏览器发现的 sourceMappingURL，再由发布流水线把映射文件上传…
小资源适度内联可以减少额外请求和发现延迟，但 Data URL 编码会增加文本体积，并把图片生命周期绑定到引用它的 JavaScript 或 CSS 文件。
动态 import() 为构建工具提供异步代码分割边界，运行时通常通过 Promise 协调 chunk 获取、模块执行与结果返回。
应启用 webpack 5 的 splitChunks，并通过 chunks 与 cacheGroups 提取两个入口共同使用的第三方模块。
这是异步 CSS 加载时序造成的无样式内容闪烁。
共享依赖被稳定地拆为独立 chunk 后，业务模块发生变化时，未变化的依赖文件通常可以保持相同内容哈希，从而继续命中浏览器或 CDN 的长期缓存。
应先缩小 Babel 的处理范围，并利用缓存复用未变化文件的转译结果。
@babel/plugin-transform-runtime 会把 Babel 原本可能内联到各文件的辅助函数改为从 @babel/runtime 引…
Vite 的开发模式利用原生 ESM，通常无需在启动前把全部业务源码打成完整 bundle，而是按请求转换并提供模块；
transform-runtime 可以把重复注入到各模块的 Babel 辅助函数改为从 @babel/runtime 引用，从而减少重复代码，并避免某…

Vite 开发环境中修改模块后，哪些运行结果符合其机制？（多选）

1Vite 开发环境中修改模块后，哪些运行结果符合其机制？（多选）

2使用 Babel Runtime 后，以下两个模块的辅助函数会怎样进入产物？

3生产环境需要保留错误堆栈映射，同时避免浏览器用户直接下载源码，最合适的 source map 策略是什么？

4图片资源是否应默认全部转成 Data URL 内联到 JavaScript 或 CSS 中？

5关于 webpack 动态导入的性能控制，哪些说法正确？（多选）

6某 webpack 5 项目配置了两个入口，两个入口都依赖 React。生产构建后发现 React 代码分别进入两个入口产物，导致浏览器重复下载。最合适的修复方式是什么？

7启用 MiniCssExtractPlugin 后，页面首次加载正常，但通过 import() 进入某路由时样式短暂缺失，随后才出现。最可能的工程原因是什么？

8多入口应用希望提升长期缓存命中率，哪种代码拆分设计通常最合理？

9一个使用 babel-loader 的大型 webpack 5 项目增量构建很慢，性能分析显示大量时间消耗在重复转译未变化的源码。优先采用哪项优化？

10一个 Babel 7 应用在多个模块中使用 async/await 和生成器。构建后发现每个模块都出现相似的辅助代码，希望减少重复且避免修改全局对象。应选择什么方案？

11（多选）将一个大型项目从 webpack 开发服务器迁移到现代 Vite 后，开发启动很快，但首次访问某个冷门页面仍有明显等待。以下哪些解释或排查方向合理？

12为了减少 Babel 辅助函数重复并控制全局污染，应用代码应优先采用哪种方案？

Vite 开发环境中修改模块后，哪些运行结果符合其机制？（多选）

1Vite 开发环境中修改模块后，哪些运行结果符合其机制？（多选）

2使用 Babel Runtime 后，以下两个模块的辅助函数会怎样进入产物？

3生产环境需要保留错误堆栈映射，同时避免浏览器用户直接下载源码，最合适的 source map 策略是什么？

4图片资源是否应默认全部转成 Data URL 内联到 JavaScript 或 CSS 中？

5关于 webpack 动态导入的性能控制，哪些说法正确？（多选）

6某 webpack 5 项目配置了两个入口，两个入口都依赖 React。生产构建后发现 React 代码分别进入两个入口产物，导致浏览器重复下载。最合适的修复方式是什么？

7启用 MiniCssExtractPlugin 后，页面首次加载正常，但通过 import() 进入某路由时样式短暂缺失，随后才出现。最可能的工程原因是什么？

8多入口应用希望提升长期缓存命中率，哪种代码拆分设计通常最合理？

9一个使用 babel-loader 的大型 webpack 5 项目增量构建很慢，性能分析显示大量时间消耗在重复转译未变化的源码。优先采用哪项优化？

10一个 Babel 7 应用在多个模块中使用 async/await 和生成器。构建后发现每个模块都出现相似的辅助代码，希望减少重复且避免修改全局对象。应选择什么方案？

11（多选）将一个大型项目从 webpack 开发服务器迁移到现代 Vite 后，开发启动很快，但首次访问某个冷门页面仍有明显等待。以下哪些解释或排查方向合理？

12为了减少 Babel 辅助函数重复并控制全局污染，应用代码应优先采用哪种方案？