15个秋招大厂高频面试题奇淫回答技巧你需要掌握😏😏😏

Lotzinfly
95 阅读7分钟

哈喽大家好，我是Lotzinfly，一位前端小猎人。欢迎大家来到前端丛林，在这里你将会遇到各种各样的前端猎物，我希望可以把这些前端猎物统统拿下，嚼碎了服用，并成为自己身上的骨肉。

当我们学习前端进阶的时候，面试是重中之重。学会面试场景题将大大提高我们的开发效率，所以一定要掌握好常见的面试题。 这篇文章让我们分析15个大厂高频面试题，最近秋招就要来了，学会这15个例子就可以大胆和面试官畅所欲言和自信谈薪啦！😏😏😏 这15个面试题掰扯并嚼碎了服用将会给我们带来大量经验，你们准备好了吗？话不多说，现在开启我们今天的前端丛林冒险之旅吧！

以下例子基于真实工程经验与社区主流实践整理，可直接用于面试口述。为了方便记忆，每个问题都遵循「结论 → 原因 → 落地细节」三段式回答，控制在 60 秒能说完的篇幅，面试官追问时再展开即可。

1. 给你 lint 模块，你在做这个模块的时候遇到了什么困难，你是怎么解决的？

结论：核心困难是“规则冲突”与“历史代码爆炸式报错”。
原因：接入 @typescript-eslint 时，原有 Airbnb 规则对 interface 末尾逗号、enum 首字母大写等 2000+ 处报错，直接 --fix 会产生巨大 CR。
落地：

  1. 用 eslint-nibble 做“增量 lint”，只扫本次 MR diff；
  2. 把冲突规则先 override 为 warn，写 // eslint-disable-next-line 并建 backlog；
  3. 配套 husky + lint-staged，MR 流水线做 git diff-name-only | xargs eslint，保证新代码 0 报错即可合入。
    3 个迭代后历史代码全部清零，再升 error。

2. 不同工程需要不同的 ESLint 规则吗？Vue2 与 Vue3 规则差异？

结论：必须区分，因为语法与编译时依赖不同。
差异点：

  • Vue2 用 eslint-plugin-vue@7 + parser-options: ecmaVersion:2019；
  • Vue3 需要 eslint-plugin-vue@9 + parser: vue-eslint-parser@9，否则 <script setup>、v-model 参数、defineProps 会报解析错；
  • Vue3 推荐打开 vue/require-emit-declaration、vue/no-ref-as-operand 等组合式 API 专用规则。
    工程实践：在 monorepo 里用 root:true 隔离，子包继承 @company/eslint-config-vue2 或 -vue3，防止“一刀切”。

3. 封装 HTTP 请求库，进度反馈怎么做？

结论：浏览器端用 axios.onDownloadProgress / onUploadProgress；Node 端用 fetch 的 ReadableStream 或 got.stream()。
落地：

  1. 封装 request<T>(url, { onProgress?: (p:0~1)=>void })；
  2. 上传文件时把 headers['Content-Length'] 带齐，否则浏览器算不出总大小；
  3. 返回一个 { abort:()=>void, promise:Promise<T> }，让调用方既能取消又能 await。
  4. 若需多条并发，用 RxJS merge 再 scan 出整体进度，UI 层直接订阅即可。

4. 什么时候需要进度反馈？

  • 上传/下载 > 5 MB；
  • 弱网或 2G/3G 场景；
  • 后台批量导入 Excel、大图片压缩等耗时 > 3 s 的任务；
  • 任何用户可能“以为卡死”的操作。

5. 如果让你设计一个脚手架，你会怎么做？

分层思路：

  1. core：基于 create-cli，只负责“复制模板 + 渲染 ejs + 装依赖”；
  2. plugin 体系：
    • @mycli/plugin-vue2 / -vue3 / -react 提供对应模板与 webpack/vite 配置；
    • @mycli/plugin-lint 注入 eslint、prettier、husky；
    • @mycli/plugin-release 集成 changeset + 自动版本号 + 一键发布 npm；
  3. 配置合并策略：用户配置 > 插件默认 > 核心默认，用 webpack-merge & vite-mergeConfig；
  4. 升级方案：模板与依赖分离，模板走 git tag，依赖走 ncu -u 自动生成 MR，让业务方 review 后再合。

6. 回归测试时 A、B 项目依赖版本冲突，如何解决？

思路：把“版本”变成“范围”而不是“锁死”。

  1. 先看冲突是否 API 兼容，若兼容，把库改成 ^x.y.0 并提一个共享的 @company/shared-deps；
  2. 若 API 不兼容，用 Webpack/Vite 的 resolve.alias 给 A、B 分别指向不同大版本，打两份 bundle；
  3. 长期方案：把该库升级为 peerDep，由宿主统一提供，或把它抽成微前端子应用，彻底隔离。

7. Monorepo 依赖冲突管理

  • 用 pnpm + workspace，强制 hoist=false，杜绝“幽灵依赖”；
  • 根目录 pnpm-lock.yaml 唯一，子包只声明 peerDep 范围；
  • 若必须多版本，用 pnpm.override 字段显式指定“子包→版本”映射；
  • CI 里跑 pnpm dedupe --check，发现重复就失败，强制开发者处理。

8. 脚手架支持 Vue 还是 React？分别准备什么生态？

  • Vue：
    • 构建：vite + vue-ts + vue-router@4 + pinia + eslint-plugin-vue；
    • 物料：element-plus 二次封装、@vueuse、vite-plugin-svg-icons；
    • 工具：vue-tsc 做类型检查，unplugin-auto-import 自动引入；
  • React：
    • 构建：vite + react-ts + react-router@6 + zustand；
    • 物料：antd + ahooks + styled-components / emotion；
    • 工具：@vitejs/plugin-react-swc 提速，react-refresh 热更新。

统一插件接口，通过 cli pick 让用户选择技术栈，生态包全部以插件形式注入，保证 core 无差异。

9. 是否需要围绕目标做技术选型？构建选型考虑点

结论：先定“交付目标”，再反推技术。

  • 开发环境：
    • 模块热替换速度（决定 vite/swc）；
    • 是否需 SSR（决定 webpack 更稳或 vite+ssr 插件）；
    • 是否 monorepo（决定 rollup 打包库 + vite 构建 demo 的组合）。
  • 生产环境：
    • 产物体积：vite 默认 esbuild 压缩比 terser 小 8~10 %；
    • 浏览器矩阵：若需兼容 IE11，只能 webpack + core-js；
    • 部署平台：cdn 多节点 → 拆包策略不同；
    • 安全：是否需 nonce/CSP，webpack 的 webpack_nonce 更成熟。

10. Git 最常用命令 & 分支模型

高频：rebase -i、reflog、cherry-pick、reset --soft、push --force-with-lease。
模型：

  • GitFlow（feature/develop/release/master/hotfix）适合“火车发布”；
  • TrunkBased（主干开发 + short-lived branch）适合持续部署；
  • 我司实践：主干开发 + 发布分支。每季度拉 release/3.x，修 bug 走 hotfix/3.x.y，合并回 master 后自动打 tag 上线。

11. 上线拉发布分支还是用 master 直接发布？

结论：并发需求多时必须用“发布分支”，否则回滚会把别人的功能一起下线。
流程：

  1. 功能合并到 master；
  2. 上线窗口前 1 天从 master 拉 release/2025-09-24；
  3. 预发布环境只能把 hotfix 合进该分支；
  4. 上线后把 release 合并回 master 并打 tag；
  5. 若发现故障，直接回滚 release 分支对应的镜像，master 保持干净。

12. A 上线后 master 出问题，B 也要合并，怎么解决？

  1. A 的代码回滚：
    git revert -m 1 <merge-commit> 生成一个新提交，master 立即恢复可用；
  2. B 把自己的 feature 分支 rebase 到最新的 revert 后 master，解决冲突再提 MR；
  3. A 在本地修复 bug，重新提 MR，review 后合入，再上线。
    关键点：回滚用 revert 而不用 reset，保证历史不丢失且协作友好。

13. 前端组件化要考虑哪些方面？

  • 分层：presentational / container / logic hook；
  • 接口：props 最小且不可变，events 向上，slots 向下；
  • 状态：能放本地就不放全局，必须全局用 zustand/pinia；
  • 样式：CSS-in-JS 或 scoped，避免全局污染；
  • 文档：Storybook + Controls，自动生成 props table；
  • 测试：@testing-library + vitest，覆盖 80 % 交互；
  • 主题：design-token 体系，支持动态换肤；
  • 无障碍：aria、键盘焦点管理；
  • 国际化：vue-i18n / react-i18next；
  • 版本：semver + changeset，breaking change 提前公告。

14. ElementPlus 二次封装，有看源码吗？怎么做自己的组件库？

  • 看过：重点参考了 useFormItem、useSize、useGlobalConfig 三个 composition hook，把“尺寸、禁用、表单校验”逻辑抽离，保证一致性；
  • 组件库做法：
    1. 用 vite 建 library 模式，build.lib.entry=index.ts 打出 es + umd；
    2. 用 unplugin-vue-components 做自动引入；
    3. 用 pnpm workspace 把“组件”、“主题”、“文档”拆三包，独立版本；
    4. 文档用 vitepress + live demo，md 里直接写 <demo src="../demo.vue"/>；
    5. 发版用 changeset，CI 自动 push 到私有 npm 与 CDN。

15. 有没有看过 webpack/vite 源码？构建流程？

webpack：

  1. 读取 webpack.config → new Compiler；
  2. 调用 compiler.hooks.entryOption 生成 EntryDependency；
  3. Compilation.buildModule 递归解析依赖，用 acorn 生成 AST → 遍历 import → 创建 Dependency；
  4. 生成 chunkGraph，根据 splitChunks 拆包；
  5. Template.render 把 chunk 包装成 IIFE，注入 webpack_require；
  6. 输出到 output.path。

vite：

  1. npm run dev 只启动 koa 服务，不对文件打包；
  2. 浏览器请求 .vue 文件，vite 用 @vitejs/plugin-vue 做即时单文件编译（script/style/template 三请求）；
  3. 依赖预扫描 esbuild 把 lodash、vue 等 cjs 秒级转成 esm 并缓存到 node_modules/.vite；
  4. 生产环境调用 rollup.build，用 vite 自带的 rollup 插件体系（与 dev 同构），再拆包、压缩、hash。

源码阅读技巧：先跑 node --inspect-brk ./node_modules/.bin/webpack，Chrome DevTools 断点看钩子调用顺序，再对照 tapable 流程图，事半功倍。

以上 15 题覆盖工程、性能、协作、源码四大维度，面试时可根据时间 depth 自由裁剪。祝你收割 offer!

avatar
文章
阅读
粉丝