前端面试：怎么帮助前端团队提高效率，搭建前端工程化体系？云哥说下这个题怎么回答，要从带前端团队的大方向考虑这个问题
1.什么是前端基建？
- “前端基建”，就是研发团队的前端基础设施建设，一个团队通用技术能力的沉淀。
- 小到文档规范，脚手架工具，大到工程化、各个领域工具链，凡是能促进业务效率、沟通成本都可以称作基建。
2.前端基建的意义
主要是为了以下几点：
- 业务复用，提高效率：
- 规范、优化流程制度：
- 更好面对未来业务发展：
- 影响力建设、开源建设
前端基建搞什么
1.核心：
下手之前首先得记住总结出的核心概念：
- 三个落地要素： 公司的团队规模、公司的业务、团队水平。
- 四大基础特性： 技术的健全性、基建的稳定性、研发的效率性、业务的体验性
根据结合落地和基础特性，来搭建不同"重量"和"复杂度"的基建系统。（毕竟每个公司的情况都不同）
2.方向
主要是从 拆解研发流程 入手的：
一个基本的研发流程闭环一般是：需求导入 => 需求拆解 => 技术方案制定 => 本地编码 => 联调 => 自测优化 => 提测修复 Bug => 打包 => 部署 => 数据收集&分析复盘 => 迭代优化 。
在研发流程闭环中每一个环节的阻塞点越少，研发效率就越高。
3.怎么做
通用的公式是： 标准化 + 规范化 + 工具化 + 自动化 ，能力完备后可以进一步提升到平台化 + 产品化。在方向上，主要是从下面的 8 个主要方向进行归类和建设，供大家参考：
- 开发规范：这一部分沉淀的是团队的标准化共识，标准化是团队有效协作的必备前提。
- 研发流程： 标准化流程直接影响上下游的协作分工和效率，优秀的流程能带来更专业的协作。
- 工程管理： 面向应用全生命周期的低成本管控，从应用的创建到本地环境配置到低代码搭建到打包部署。
- 性能体验： 自动化工具化的方式发现页面性能瓶颈，提供优化建议。
- 安全防控： 三方包依赖安全、代码合规性检查、安全风险检测等防控机制。
- 统计监控： 埋点方案、数据采集、数据分析、线上异常监控等。
- 质量保障： 自测 CheckList、单测、UI 自动化测试、链路自动化测试等。
4.大小公司基建重点
- 小公司： 针对一些小团队或者说偏初创期的团队，其建设，往往越偏向于基础的技术收益，如脚手架、组件库、打包部署工具等；优先级应该排好，推荐初创公司和小团队成立优先搭建好：规范文档、统一开发环境技术栈/方法/工具、项目模板、CI/CD流程 ，把基础的闭环优先搭建起来。
- 大公司： 越是成熟的业务和成熟沉淀的团队，其建设会越偏向于获取更多的业务收益，如直接服务于业务的系统，技术提效的同时更能直接带来业务收益。大公司在基础建设上，会更加考虑数据一些监控以及数据的埋点分析和统计，更加的偏重于数据的安全防范，做到质量保证。对于这点，很多前端需要写许多的测试case。
前端基建怎么搞，怎么搭建前端工程化体系
根据下面的来就行了
1. 规范&文档
规范和文档是最应该先行的，规范意味着标准，是团队的共识，是沟通协作的基础。
文档：
- 新人文档（公司、业务、团队、流程等）
- 技术文档、
- 业务文档、
- 项目文档（旧的、新的）
- 计划文档（月度、季度、年度）
- 技术分享交流会文档
规范：
- 项目目录规范：比如api，组件，页面，路由，hooks，store等
- 代码书写规范：组件结构、接口（定义好参数类型和响应数据类型）、事件、工具约束代码规范、代码规范、git提交规范
2. 脚手架
开发和维护一个通用的脚手架工具，可以帮助团队快速初始化项目结构、配置构建工具、集成常用的开发依赖等。
省事的可能直接拥抱框架选型对应的全家桶，如 Vue 全家桶，或者用 Webpack 撸一个脚手架。能力多一些的会再为脚手架提供一些插件服务，如 Lint 或者 Mock。从简单的一个本地脚手架，到复杂的一个工程化套件系统。
3. 组件
公司项目多了会有很多公共的组件，可以抽离出来，方便自身和其他项目复用，一般可以分为以下几种组件：
- UI组件：antd、element、vant、uview...
- 业务组件：表单、表格、搜索...
- 功能组件：上拉刷新，滚动到底部加载更多，虚拟滚动，拖拽排序，图片懒加载..
4. 工具 / 函数库
前端工具库，如 axios、lodash、Day.js、moment.js、big.js 等等（太多太多，记不得了）
常见的 方法 / API封装：query参数解析、device设备解析、环境区分、localStorage封装、Day日期格式封装、Thousands千分位格式化、防抖、节流、数组去重、数组扁平化、排序、判断类型等常用的方法和hooks抽离出来组成函数库，方便在各个项目中使用
5. 模板
可以提前根据公司的业务需求，封装出各个端对应通用开发模版，封装好项目目录结构，接口请求，状态管理，代码规范，git规范钩子，页面适配，权限，本地存储管理等等，来减少开发新项目时前期准备工作时间，也能更好的统一公司整体的代码规范。
- 通用后台管理系统基础模版封装
- 通用小程序基础模版封装
- 通用h5端基础模版封装
- 通用node端基础模版封装
- 其他类型的项目默认模版封装，减少重复工作。
6. API管理 / BFF
推荐直接使用axios封装或fetch，项目中基于次做二次封装，只关注和项目有关的逻辑，不关注请求的实现逻辑。在请求异常的时候不返回 Promise.reject() ，而是返回一个对象，只是code改为异常状态的 code，这样在页面中使用时，不用用 try/catch 包裹，只用 if 判断 code 是否正确就可以。再在规定的目录结构、固定的格式导出和导入。
BFF（Backends For Frontends）主要将后端复杂的微服务，聚合成对各种不同用户端（无线/Web/H5/第三方等）友好和统一的API；
7. CI/CD 构建部署
前端具备自己的构建部署系统，便于专业化方面更好的流程控制。很多公司目前，都实现了云打包、云检测和自动化部署，每次 git commit 代码后，都会自动的为你部署项目至 测试环境、预生产环境、生产环境，不用你每次手动的去打包后 cv 到多个服务器和环境。开发新的独立系统之初，也会希望能实现一种 Flow 的流式机制，以便实现代码的合规性静态检测能力。如果可以的话，可以去实现了一套插件化机制，可以按需配置不同的检测项，如某检测项检测不通过，最终会阻塞发布流程。
8. 数据埋点与分析
前端团队可以做的是 Web 数据埋点收集和数据分析、可视化相关的全系统建设。可实现埋点规范、埋点 SDK、数据收集及分析、PV/UV、链路分析、转化分析、用户画像、可视化热图、坑位粒度数据透出等数据化能力，下面给大家细分一些这些数据：
- 行为数据：时间、地点、人物、交互、交互的内容；
- 质量数据：浏览器加载情况、错误异常等；
- 环境数据：浏览器相关的元数据以及地理、运营商等；
- 运营数据：PV、UV、转化率、留存率（很直观的数据）；
9.微前端
将大型前端应用拆分为多个小型前端应用，这样每个小型前端应用都有自己的仓库，可以专注于单一的某个功能；也可再聚合成有各个应用组成的一个平台，而各个应用使用的技术栈可以不同，也就是可以将不同技术栈的项目给整合到一块。
提供1对1简历面试辅导，私教课，项目难点笔记，语音咨询，模拟面试