前端工程化

中级 03

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

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

Q1选择题难度 2

1/12

前端工程化 · 中级 03

记忆强度

两个入口都同步引入同一大型工具模块，希望 webpack 5 只打包一份共享代码，首要应配置什么？

不要求把该模块外置为 CDN 资源，也不希望依赖运行时全局变量。

本节速览12 题 · 含答案

splitChunks 根据模块复用情况、体积阈值和缓存组等条件，把重复依赖提取为可由多个入口引用的共享 chunk，从而避免相同模块代码进入多个入口产物。
Tree Shaking 依赖静态模块关系来标记导出的使用情况，并结合副作用信息与压缩阶段删除不可达代码。
Babel 可以把 class 语法与实例字段转换为旧语法形式，但必须保持源程序的可观察语义。
是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。
babel-loader 的 cacheDirectory 会缓存转换结果，后续构建遇到输入和相关配置均未变化的文件时可复用缓存，从而降低重复解析与代码…
Polyfill 通常依靠旧环境已有能力实现较新的 API，但 Proxy 改变了属性访问、赋值、枚举等底层对象操作的拦截语义。
在独立运行时代码和稳定模块标识的前提下，共享模块会进入公共 chunk，修改其实现首先改变该 chunk 的内容及 contenthash。
Webpack 5 的 output.publicPath 为 auto 时，运行时会尝试根据当前脚本地址等环境信息自动推导资源基础路径。
webpack 5 插件通过 apply 方法接入 Compiler 或 Compilation 的钩子。
Vite 开发服务器利用浏览器原生 ES module，以请求驱动的方式转换和提供源码，因此启动时通常无需先把整个应用打成单一 bundle。
- 体积更小（Tree Shaking、压缩、合并）加载更快 - 编译高级语言语法（TS、ES6+、模块化、SCSS） - 兼容性和错误检查（polyf…
对tree-shaking的了解

前端工程化

中级 03

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

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

Q1选择题难度 2

1/12

前端工程化 · 中级 03

记忆强度

两个入口都同步引入同一大型工具模块，希望 webpack 5 只打包一份共享代码，首要应配置什么？

不要求把该模块外置为 CDN 资源，也不希望依赖运行时全局变量。

本节速览12 题 · 含答案

splitChunks 根据模块复用情况、体积阈值和缓存组等条件，把重复依赖提取为可由多个入口引用的共享 chunk，从而避免相同模块代码进入多个入口产物。
Tree Shaking 依赖静态模块关系来标记导出的使用情况，并结合副作用信息与压缩阶段删除不可达代码。
Babel 可以把 class 语法与实例字段转换为旧语法形式，但必须保持源程序的可观察语义。
是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。
babel-loader 的 cacheDirectory 会缓存转换结果，后续构建遇到输入和相关配置均未变化的文件时可复用缓存，从而降低重复解析与代码…
Polyfill 通常依靠旧环境已有能力实现较新的 API，但 Proxy 改变了属性访问、赋值、枚举等底层对象操作的拦截语义。
在独立运行时代码和稳定模块标识的前提下，共享模块会进入公共 chunk，修改其实现首先改变该 chunk 的内容及 contenthash。
Webpack 5 的 output.publicPath 为 auto 时，运行时会尝试根据当前脚本地址等环境信息自动推导资源基础路径。
webpack 5 插件通过 apply 方法接入 Compiler 或 Compilation 的钩子。
Vite 开发服务器利用浏览器原生 ES module，以请求驱动的方式转换和提供源码，因此启动时通常无需先把整个应用打成单一 bundle。
- 体积更小（Tree Shaking、压缩、合并）加载更快 - 编译高级语言语法（TS、ES6+、模块化、SCSS） - 兼容性和错误检查（polyf…
对tree-shaking的了解

两个入口都同步引入同一大型工具模块，希望 webpack 5 只打包一份共享代码，首要应配置什么？

1两个入口都同步引入同一大型工具模块，希望 webpack 5 只打包一份共享代码，首要应配置什么？

2在 webpack 5 生产构建中，哪个条件最有利于 Tree Shaking 安全移除未使用导出？

3Babel 转译类字段后，以下代码最可能输出什么？

4请介绍 Vite了解吗，并说明其核心原理与使用场景。

5项目使用 webpack 5 与 babel-loader 转译大量业务源码，哪项措施能直接减少未变化文件的重复 Babel 转译成本？

6为什么 Babel 无法提供一个能完整模拟 JavaScript Proxy 的通用 polyfill？

7Webpack 5 多入口构建中，修改共享模块后哪些产物的内容哈希会变化？

8Webpack 5 动态导入在不同 publicPath 设置下会请求哪个地址？

9编写 webpack 5 插件时，若要在所有资源已处理完毕、即将输出前追加一个 manifest.json，最合适的方式是哪项？

10关于现代 Vite 开发服务器的基础机制，下列哪些说法正确？（多选）

11请介绍 面试真题，并说明其核心原理与使用场景。

12Tree Shaking原理是什么？

两个入口都同步引入同一大型工具模块，希望 webpack 5 只打包一份共享代码，首要应配置什么？

1两个入口都同步引入同一大型工具模块，希望 webpack 5 只打包一份共享代码，首要应配置什么？

2在 webpack 5 生产构建中，哪个条件最有利于 Tree Shaking 安全移除未使用导出？

3Babel 转译类字段后，以下代码最可能输出什么？

4请介绍 Vite了解吗，并说明其核心原理与使用场景。

5项目使用 webpack 5 与 babel-loader 转译大量业务源码，哪项措施能直接减少未变化文件的重复 Babel 转译成本？

6为什么 Babel 无法提供一个能完整模拟 JavaScript Proxy 的通用 polyfill？

7Webpack 5 多入口构建中，修改共享模块后哪些产物的内容哈希会变化？

8Webpack 5 动态导入在不同 publicPath 设置下会请求哪个地址？

9编写 webpack 5 插件时，若要在所有资源已处理完毕、即将输出前追加一个 manifest.json，最合适的方式是哪项？

10关于现代 Vite 开发服务器的基础机制，下列哪些说法正确？（多选）

11请介绍 面试真题，并说明其核心原理与使用场景。

12Tree Shaking原理是什么？