前言

今天的前端早读课文章由滴滴@王梦君分享，@jiM贡献分享，公众号为：滴滴顺风科技。

@王梦君，滴滴出行高级前端工程师，核心框架。

正文从这里开始~~

1. 小程序开发模型

一般来说，小程序开发模式有两种，一种是原生小程序开发，一种是第三方框架开发。

总体而言，小程序的原生开发只能适应在相应的独立App中运行，无法提供跨多终端的综合开发能力。在多终端小程序应用需求的情况下，是人力的浪费。

另一种解决方案是使用跨终端框架。采用该方案开发的应用程序一般可以实现“一套代码，多终端运行”的基本目标，可以节省大量人力，提高效率。

虽然跨终端框架开发小程序有很多优点，但这种开发模式也存在一些问题。比如核心问题是编译时间长、开发体验差、前后端耦合等。

本文主要分享使用框架开发业务小程序应用过程中遇到的问题，以及如何解决。

2. 业务发展面临的痛点 1. 业务发展面临的痛点

我们在小程序开发中遇到的痛点主要包括两个方面：

场景搭建难度大：严重依赖后端接口和人工操作流程

编译时间长：第三方框架编译和开发者工具编译时间极长

场景搭建难度大

我们业务发展中的很多场景，包括下达订单、接收邀请、等待车主邀请、被多个车主邀请、各种管控策略场景等，都严重依赖后端接口和人工操作某些任务。从乘客发出订单到车主收到订单的过程中，需要乘客账号和车主账号（某些场景下需要多部手机、多个账号）来协助构建一定的场景。在许多情况下，构建场景会占用高达 50% 的开发时间。 %的时间，严重影响开发进程和开发效率。

极端情况下，几十行代码的添加或删除可能需要一天的时间。大量的人力浪费在不应该存在的流程上，比如构建场景、通过多部手机收发订单等，令人痛苦。

编译需要很长时间

从开发者第一次开始项目开发到编码后保存热更新编译，框架编译的源码在小程序开发者工具中会再次消耗编译时间。

在小程序原生开发过程中，编译时间主要集中在小程序开发者工具的过程中。

对于第三方框架开发来说，编译时间主要集中在框架编译+小程序开发者工具两个过程。

同时，第三方框架编译的源码大小也会直接影响小程序开发者工具的编译时间。

针对编译时间长的问题，尤其是前端开发，需要实时检查代码更改对UI的效果。多次保存将导致多次构建。即使只写一行代码，甚至改一个空格，保存后也会出现问题。重新编译

这样的编译很容易让人抓狂、崩溃。最宝贵的开发时间都浪费在了等待上。不管项目有多紧急，这些令人难以忍受的编译过程不断循环，严重影响开发效率。严重浪费人工成本，严重影响工程进度。

2、如何解决业务痛点？

针对场景搭建难的问题，核心原因在于

关于编译时间长的问题，核心原因是

那么如何解决以上核心痛点呢？

我们团队采用“微前端应用”的思路，单点突破，将面临的棘手问题一一解决，成功解决了开发效率极低、人力成本极其浪费、开发体验差。

三、解决方案

服务层：搭建本地数据系统，整理各种状态数据结构，构建开发规范，整理开发文档

应用层+业务层：将应用层的代码对应于业务层的抽象，支持路由和分包的自动配置，支持按需开发的单页面构建。这解决了从源头构建和编译大量代码的问题。编译时间过长带来的问题

同时，团队进行历史问题梳理、文档建设、数据系统梳理等，将过去阻碍发展的问题一一排除。最终开发效率提升了50%~80%。

3、解决场景搭建难度

针对小程序开发中很多页面严重依赖人工操作，严重缺乏前端数据系统的问题，我们采用

建立本地数据系统，前后端分离

区分开发环境和生产环境请求域名

我们可以看一下改造前后前后端交互和开发模式的一些差异。

前后端分离，彻底解决了原有的前后端强耦合的问题。

自建前端数据系统中心，直接进入开发页面，省去很多手动操作场景重现等繁琐流程

参考：

4.解决编译时间长的问题

编译层适配优化

编译时间长的根本原因是【框架编译】+【开发者工具编译时间】

编译层的优化并不能显着提高开发效率。

业务层适配优化

那么业务层能有优化的方法吗？

根据上面的分析我们可以看到，当我们所有的业务代码都参与构建时，会严重影响框架编译的速度以及开发者工具二次编译的速度。能否从业务层拆分出各个模块？独立构建怎么样？

业务层原有的构建模型：

所有业务代码均参与构建。各个模块强耦合，前端和后端强耦合。每次构建都极其耗时，严重影响开发效率、开发体验，甚至开发进度。

业务层的优化构建模型：

依托自建前端数据中心，前后端分离，以“迷你前端应用”的思路独立构建前端页面，大大减少编写和构建的内容，大大提高开发效率。

参考：

基本思想是通过脚本自动配置需要构建的路由。每次开发时，只将需要开发的页面配置到路由表中，这样可以大大减少构建中需要涉及的内容。

最终我们的编译耗时问题得到了有效解决

以上介绍了基本的实现思路和优化方案。同时我还整理了一个简单的实现案例供大家参考。

5. 总结

在日常开发中，我们面临的问题无非就是开发效率提升、业务拓展、性能优化等。

开发效率将直接影响后续的业务开发和性能优化等后续工作。

日常开发中的效率提升是必须重点关注和优化的。任何阻碍发展的流程和痛点都要及时解决。绝不容忍项目开发中的各种低效率问题。直到项目太复杂、太大而无法改变时才放手。到了无法优化甚至无法开发的地步，到时候优化开发效率就更难了。