前端工程化面试

构建工具

Webpack 面试题

1. Webpack 的构建流程是什么？

1. 初始化参数：合并配置文件和命令行参数
2. 开始编译：创建 Compiler 对象，加载插件
3. 确定入口：解析 entry 配置
4. 编译模块：使用 Loader 转换模块，递归处理依赖
5. 完成编译：得到模块内容和依赖关系
6. 输出资源：组装 Chunk，生成文件
7. 写入文件系统

2. Loader 和 Plugin 的区别？

• Loader：文件转换器，将源文件转换为新文件（如 babel-loader 将 ES6+ 转为 ES5）
• Plugin：扩展 Webpack 功能，在构建生命周期中执行特定任务（如 HtmlWebpackPlugin、CleanWebpackPlugin）

3. 如何提高 Webpack 构建速度？

• 使用 include/exclude 缩小 Loader 范围
• 使用 cache-loader 或 Webpack 5 持久化缓存
• 使用 thread-loader 多进程构建
• 合理使用 DllPlugin
• 升级 Webpack 版本

Vite 面试题

1. Vite 为什么快？

• 开发环境基于原生 ESM，无需打包
• 按需编译，只处理请求的模块
• 使用 esbuild 预构建依赖，速度是传统工具的 10-100 倍
• 精确的热模块替换

2. Vite 和 Webpack 的区别？

特性	Vite	Webpack
开发启动	秒级	分钟级
HMR	即时	较慢
生产构建	Rollup	Webpack
配置复杂度	低	高

代码规范

ESLint / Prettier / Husky

1. 如何配置团队代码规范？

1. 安装 ESLint + Prettier + Husky + lint-staged
2. 配置 .eslintrc.js 和 .prettierrc
3. 配置 Husky pre-commit 钩子
4. 配置 lint-staged 只对暂存区文件执行检查

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": ["eslint --fix", "prettier --write"]
  }
}

Monorepo

1. 什么是 Monorepo？有什么优势？

Monorepo 是将多个项目放在同一个仓库中管理的方式。

优势：

• 代码复用方便
• 统一依赖管理
• 批量修改和重构
• 一致的构建和发布流程

工具：pnpm workspace、Turborepo、Nx、Rush

2. pnpm 的优势？

• 硬链接 + 符号链接，节省磁盘空间
• 严格依赖管理，防止幽灵依赖
• 快速安装速度

CI/CD

1. 如何实现自动化部署？

1. 代码提交触发 CI/CD 流水线
2. 执行自动化测试
3. 构建 Docker 镜像
4. 推送到镜像仓库
5. 部署到测试/生产环境

2. Git Flow 工作流？

• main/master：生产分支
• develop：开发分支
• feature/*：功能分支
• release/*：发布分支
• hotfix/*：热修复分支

微前端

1. 微前端的优势和挑战？

优势：

• 独立部署
• 技术栈无关
• 团队自治
• 增量升级

挑战：

• 样式隔离
• JS 沙箱
• 应用间通信
• 公共依赖共享

2. 常见微前端方案？

方案	特点
iframe	简单但性能差
single-spa	鼻祖方案
qiankun	阿里开源，功能完善
Module Federation	Webpack 5 内置
wujie	美团开源，基于 Web Component

模块化

1. CommonJS 和 ES Module 的区别？

特性	CommonJS	ES Module
语法	require/module.exports	import/export
加载方式	运行时同步加载	编译时静态分析
值拷贝	值拷贝	引用绑定
动态导入	支持	import()
tree shaking	不支持	支持

2. Tree Shaking 原理？

基于 ES Module 的静态结构，在编译时分析模块依赖关系，删除未被引用的代码（dead code）。

要求：

• 使用 ES Module
• 副作用代码标记（sideEffects）
• 代码无副作用