前端面试-工程化篇

1. 什么叫工程化？

对前端工程化的理解

前端工程化，是指将软件工程的思想和方法应用到前端开发中，通过工具、流程和规范的系统化建设，提升开发效率、代码质量和项目可维护性。其核心目标是：让前端开发更高效、更可靠、更可持续。

---

一、为什么需要前端工程化？

随着 Web 应用日益复杂（SPA、微前端、大型团队协作），传统“写 HTML + CSS + JS”的方式已无法满足需求：

• 代码量庞大，手动管理依赖困难
• 多人协作易冲突，风格不统一
• 浏览器兼容性问题复杂
• 性能优化需系统化方案
• 上线部署流程混乱，容易出错

💡 前端工程化 = 解决“规模”和“协作”带来的问题

---

二、前端工程化的核心组成部分

1. 模块化（Modularization）

• 将代码拆分为独立、可复用的模块
• 技术演进：CommonJS → AMD → ES Module
• 工具支持：Webpack、Vite、Rollup 等打包器

✅ 解决：全局污染、依赖混乱、代码复用难

---

2. 组件化（Componentization）

• 以组件为单位组织 UI 和逻辑（如 Vue/React 组件）
• 高内聚、低耦合，支持复用和组合

✅ 解决：UI 重复开发、维护成本高

---

3. 规范化（Standardization）

• 代码规范：ESLint、Prettier（统一风格，减少低级错误）
• 提交规范：Commitlint + Husky（如 feat: add login button）
• 目录结构：约定优于配置（如 src/views, src/components）
• 文档规范：JSDoc、TypeScript 类型注解

✅ 解决：团队协作混乱、代码可读性差

---

4. 自动化（Automation）

• 构建自动化：Vite/Webpack 自动编译、压缩、分包
• 测试自动化：Jest（单元测试）、Cypress（E2E）
• 部署自动化：CI/CD（GitHub Actions、Jenkins）
• 质量检查自动化：SonarQube、Lighthouse

✅ 解决：人工操作易出错、重复劳动多

---

5. 性能与体验优化

• 资源压缩（Terser、CSSNano）
• 代码分割（Code Splitting）
• 缓存策略（Cache-Control、ETag）
• 懒加载、预加载
• 监控上报（Sentry、Web Vitals）

✅ 解决：页面加载慢、用户体验差

---

2. 什么是Vite?和Webpack区别是什么

Vite 和 Webpack 都是现代前端构建工具，但设计理念、架构和使用体验有本质不同。

---

一、核心理念对比

特性	Webpack	Vite
定位	模块打包器（bundler）	新一代前端构建工具（基于原生 ES 模块）
开发模式原理	打包整个应用 → 启动开发服务器	不打包！直接按需加载源码
生产构建	自带打包能力	基于Rollup 进行生产打包
启动速度	慢（需分析依赖、打包所有模块）	⚡ 极快（秒级启动）
热更新（HMR）	重新打包受影响模块	只更新修改的文件，无打包开销

💡 关键区别：
Webpack 在开发时先打包再运行，Vite 在开发时直接运行源码。

---

二、技术原理详解

Webpack：传统打包流程

1. 启动时扫描所有依赖
2. 构建完整的依赖图（dependency graph）
3. 将所有模块打包成一个或多个 bundle（如 main.js）
4. 启动开发服务器，提供 bundle
5. 修改代码 → 重新打包 → 刷新/HMR

✅ 优点：兼容性好，生态成熟
❌ 缺点：项目越大，启动和热更新越慢

Vite：利用浏览器原生 ES 模块（ESM）

1. 启动开发服务器（基于 esbuild + Koa）
2. 浏览器请求 index.html
3. HTML 引用 <script type="module" src="/src/main.js">
4. 浏览器直接请求 /src/main.js
5. Vite 拦截请求：
   • 对 .js/.vue 文件：实时编译（如 Vue SFC → JS）
   • 对 node_modules：用 esbuild 预构建为 ESM（一次性的）
6. 修改代码 → 浏览器只重新请求该文件 → 热更新极快

✅ 优点：启动快、热更新快、配置简单
❌ 缺点：仅支持现代浏览器（不支持 IE）

---

三、功能对比表

功能	Webpack	Vite
开发服务器启动速度	慢（秒~分钟级）	⚡ 快（毫秒~秒级）
热更新速度	中等（依赖打包速度）	⚡ 极快（与文件大小无关）
生产构建	自研打包器	基于 Rollup
配置复杂度	复杂（loader/plugin 体系）	简洁（约定优于配置）
TypeScript 支持	需 ts-loader 或 babel	开箱即用
CSS 处理	需 css-loader + style-loader	内置支持
代码分割（Code Splitting）	支持（SplitChunksPlugin）	支持（Rollup 实现）
兼容性	支持 IE8+	仅支持现代浏览器（ESM）
插件生态	极其丰富	快速增长（兼容 Rollup 插件）

---

四、配置示例对比

Webpack（简化版）

// webpack.config.js
module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devServer: {
    hot: true
  }
}

3.什么是 Monorepo 和 Turborepo？

一、Monorepo（单体仓库）

定义

Monorepo（Mono = 单一，Repo = 仓库）是一种软件开发策略：将多个相关项目/包放在同一个代码仓库中管理。

对比：Monorepo vs Multi-repo

特性	Monorepo	Multi-repo（多仓库）
仓库数量	1 个仓库包含多个项目	每个项目独立仓库
依赖管理	内部包可直接引用，版本统一	需发布到 npm，版本耦合复杂
代码复用	跨项目共享代码极其方便	需通过 npm 包或 Git Submodule
原子提交	一次提交可修改多个包	多仓库需多次提交，难保证一致性
CI/CD	统一配置，按需运行任务	每个仓库单独配置
工具链	统一 ESLint、TypeScript 等配置	各仓库可能不一致

典型应用场景

• 前端组件库 + 示例站点 + 工具脚本
• 微前端架构（主应用 + 子应用）
• 全栈项目（React 前端 + NestJS 后端 + 共享类型定义）
• UI 库生态（如 Element Plus 的 packages）

二、Turborepo：为 Monorepo 而生的高性能构建系统

是什么？

Turborepo 是由 Vercel 开发的 高性能 Monorepo 构建工具，专为 JavaScript/TypeScript 项目设计。

🚀 核心目标：让 Monorepo 的任务执行（build/test/lint）更快、更智能

核心特性

1. 智能任务编排（Task Pipeline）

通过 turbo.json 定义任务依赖关系，自动并行执行无依赖任务。

// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"], // 依赖其他包的 build
      "outputs": [".next/**", "dist/**"]
    },
    "test": {
      "dependsOn": ["build"] // test 依赖本包的 build
    },
    "lint": {}
  }
}

2. 增量构建 & 远程缓存（Remote Caching）

本地缓存：跳过未变更代码的任务
远程缓存（Vercel 提供免费服务）：团队共享缓存，新成员/CI 直接命中缓存

# 第一次运行（慢）
$ turbo run build

# 修改后再次运行（快！只构建受影响包）
$ turbo run build