GMTC 北京站 - 大前端工程提效脱敏

2021GMTC北京站 - 大前端工程提效脱敏

2021GMTC 共分为 16 个专场演讲，几乎涵盖了目前大前端所有领域，感谢公司和秋实提供的机会，在 7 月 4 日有幸参加了大前端工程提效专项的分享，本次专场分为以下四个议题：

1. MBC 业态大前端的自动化、智能化研发提效之路
2. 拼多多千万级 SKU 商品详情页端性能建设实践
3. 滴滴大前端技术体系建设实践
4. 基于 AIOps 的智能运维实践

从工程实践的角度，深入探讨了大前端工程提效的具体方法和实践经验，具有较强的学习和借鉴意义。

一、MBC 业态大前端的自动化、智能化研发提效之路

1. 背景和挑战

随着 MBC 业态业务的快速发展，前端研发团队面临着诸多挑战：

• 研发效率低：前端项目众多，代码量庞大，研发效率低下。
• 质量问题多：前端代码质量参差不齐，导致线上问题频发。
• 运维成本高：前端项目部署复杂，运维成本高昂。

2. 解决方案

针对这些挑战，MBC 业态前端研发团队提出了“自动化、智能化”的研发提效解决方案，主要包括以下几个方面：

• 自动化构建工具链 ：搭建了一套自动化构建工具链，实现了代码的自动化编译、打包、部署。
• 智能化代码检测工具 ：开发了智能化代码检测工具，可以自动检测代码中的语法错误、逻辑错误、安全漏洞等问题。
• 智能化运维平台 ：搭建了智能化运维平台，可以自动监控前端项目的运行状态，并及时发现和修复问题。

3. 效果

通过实施“自动化、智能化”的研发提效解决方案，MBC 业态前端研发团队取得了显著的效果：

• 研发效率提高 ：前端项目研发效率提高了 30% 以上。
• 质量问题减少 ：前端代码质量大幅提升，线上问题减少了 50% 以上。
• 运维成本降低 ：前端项目部署更加简单，运维成本降低了 20% 以上。

二、拼多多千万级 SKU 商品详情页端性能建设实践

1. 背景和挑战

拼多多平台上拥有千万级 SKU 的商品，每个商品详情页都需要加载大量的图片、文字、视频等资源，这给前端性能带来了很大的挑战。

• 页面加载慢 ：商品详情页加载速度慢，影响用户体验。
• 资源请求过多 ：商品详情页需要加载大量的资源，导致网络请求过多，影响页面加载速度。
• 页面卡顿 ：商品详情页在滚动、缩放等操作时容易出现卡顿现象，影响用户体验。

2. 解决方案

针对这些挑战，拼多多前端团队提出了以下解决方案：

• 优化资源加载方式 ：采用懒加载、预加载、分片加载等技术，优化资源加载方式，减少页面加载时间。
• 减少资源请求数 ：通过代码优化、资源合并、雪碧图等技术，减少资源请求数，降低网络开销。
• 优化页面渲染 ：采用虚拟 DOM、增量渲染等技术，优化页面渲染过程，减少页面卡顿。

3. 效果

通过实施以上解决方案，拼多多前端团队大幅提升了商品详情页的端性能：

• 页面加载速度提高 ：商品详情页加载速度提高了 50% 以上。
• 资源请求数减少 ：商品详情页资源请求数减少了 30% 以上。
• 页面卡顿现象消除 ：商品详情页在滚动、缩放等操作时不再出现卡顿现象。

三、滴滴大前端技术体系建设实践

1. 背景和挑战

滴滴大前端团队面临着以下挑战：

• 技术栈复杂 ：滴滴大前端团队使用多种技术栈，包括 React、Vue、Angular 等，导致技术体系复杂，难以管理。
• 研发效率低 ：由于技术体系复杂，研发效率低下。
• 质量问题多 ：由于技术体系复杂，导致代码质量参差不齐，线上问题频发。

2. 解决方案

针对这些挑战，滴滴大前端团队提出了以下解决方案：

• 统一技术栈 ：滴滴大前端团队统一了技术栈，全部使用 React，简化了技术体系，提高了研发效率。
• 建立组件库 ：滴滴大前端团队建立了组件库，将常用的组件封装成可复用的组件，提高了研发效率和代码质量。
• 完善质量保障体系 ：滴滴大前端团队完善了质量保障体系，包括代码审查、单元测试、集成测试等，提高了代码质量，降低了线上问题率。

3. 效果

通过实施以上解决方案，滴滴大前端团队取得了显著的效果：

• 研发效率提高 ：前端项目研发效率提高了 30% 以上。
• 质量问题减少 ：前端代码质量大幅提升，线上问题减少了 50% 以上。
• 技术体系更加完善 ：滴滴大前端团队的技术体系更加完善，管理更加规范，研发效率更高。

四、基于 AIOps 的智能运维实践

1. 背景和挑战

随着大前端业务的快速发展，前端项目越来越多，运维工作量越来越大。传统的人工运维方式已经无法满足需求，需要采用智能化的运维方式。

2. 解决方案

基于 AIOps 技术，构建了智能运维平台，可以自动监控前端项目的运行状态，并及时发现和修复问题。智能运维平台主要包括以下几个模块：

• 数据采集模块 ：负责采集前端项目的运行数据，包括日志数据、指标数据、告警数据等。
• 数据分析模块 ：负责分析采集到的数据，发现问题并生成告警。
• 告警处理模块 ：负责处理告警，包括告警通知、告警修复等。

3. 效果

通过实施智能运维平台，前端运维工作量大幅降低，运维效率大幅提高。同时，智能运维平台可以自动发现和修复问题，降低了线上问题率，提高了用户体验。