共 19 道 前端工程化 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
核心概念 概念 说明 ------ ------ Entry 入口文件 Output 输出配置 Loader 处理非 JS 文件（CSS、图片等） Plugin 扩展功能（压缩、HTML 生成等） M…
Vite 的核心优势 开发阶段 ：利用浏览器原生 ESM，按需加载模块，无需打包。 开发阶段原理 依赖预构建 Vite 使用 esbuild 预构建依赖（CJS → ESM）： 生产构建 开发用 ES…
Babel 是什么 Babel 是 JavaScript 编译器，将 ES6+ 代码转译为兼容旧浏览器的 ES5 代码。 工作流程 preset 和 plugin plugin ：单个转换功能 pre…
Tree Shaking 摇树优化 ：打包时移除未使用的代码（死代码），减小包体积。 工作原理 1. 依赖 ESM 的静态结构 （import/export 在编译时确定） 2. 打包工具分析模块依赖…
- entry ：打包入口（可单/多入口），从它开始递归构建依赖图 - output ：产物输出路径、文件名（可带 [contenthash] 做缓存） - loader ：让 Webpack 能处理…
区别 ： - loader 是 转换器 ，对匹配到的单个文件做内容转换（返回新源码字符串），链式的（从右到左执行） - plugin 是 扩展器 ，监听 Webpack 生命周期钩子做更全局的事（生成…
Tree Shaking 是 在打包时移除未被引用的代码（dead code elimination） ，减小产物体积。 为什么依赖 ESM ：ESM 是 静态 的（import/export 在编译…
代码分割把大包拆成多个小文件， 按需加载 / 并行加载 / 缓存复用 ，避免首屏下载整个应用。 三种方式： 1. 入口分割 ：多 entry 2. 动态 import() ：路由/组件懒加载，自动成独…
HMR 让代码改动后 只更新变化的模块，不刷新整页 ，保留应用状态，极大提升开发体验。 原理 ： 1. 启动一个 WebSocket 连接，服务端监听文件变化 2. 文件改动 → 服务端用 webpa…
开发模式（no-bundle） ：Vite 利用浏览器原生 ESM ，启动时不打包，按需对请求的文件用 esbuild （Go 写，比 JS 快 10-100x）即时转译。所以 冷启动与改动都是毫秒级…
维度 Vite Webpack --- --- --- 开发启动 极快（原生 ESM） 慢（全量打包，项目大更明显） 生态/插件 较新，Rollup 插件为主 极成熟，loader/plugin 海量…
浏览器靠文件名区分资源版本。 内容哈希 能让「内容没变的文件文件名不变 → 走强缓存；变了才更新」。 - [hash]：每次构建都变（整个构建共享），不推荐单独用 - [chunkhash]：按 ch…
Source Map 是 把压缩/转译后的代码映射回原始源码 的索引文件，让浏览器 DevTools 能显示你写的 TS/JSX 而非打包产物，便于断点调试。 取舍 ： - 开发：要快且准 → eva…
用动态 import() 让非首屏代码 按需加载 ： 构建时每个 import() 会被拆成独立 chunk，访问对应路由才下载。 首屏收益 ： - 首屏只下载当前页面所需代码， JS 体积大幅变小 …
分析 ： - Webpack：webpack-bundle-analyzer 可视化每个模块占比 - Vite：rollup-plugin-visualizer 生成 treemap 常见优化 ： 1…
工具 语言 职责 --- --- --- Babel JS 语法降级（ESNext→ES5）、polyfill、JSX 转换， 插件生态极丰富 SWC Rust 同 Babel 的转译能力，但快 10…
多页应用（如后台 + 官网共用一套工程）需要多个 HTML 入口： 要点 ： - 每个入口配一个 HtmlWebpackPlugin 并指定 chunks（只引入对应 JS） - 公共依赖仍可用 sp…
构建慢主要来自「重复解析/转译」。可叠加多层缓存： 1. 文件系统缓存 ：Webpack5 cache: { type: 'filesystem' } 缓存模块图；Vite 用 node module…
Module Federation 是 Webpack5 的特性，让 多个独立构建的应用在运行时互相加载对方导出的模块 ，实现「运行时共享代码」，是微前端的主流方案之一。 解决的问题 ： - 多个团队…