浅谈在线编辑器中增量编译技术的应用

Lightly 是 TeamCode 团队开发的一款轻量且功能强大的集成开发工具。目前已支持C、C++、Java、Python、HTML+JS+CSS、PHP、Go项目。除语法高亮、语法错误自动检测、代码智能提示和自动补全等基础功能外,它还可以自动构建开发环境,云端存储所有代码和资源,支持项目的多用户协作开发。此文介绍增量编译技术在 Lightly IDE 的应用,方便大家更好地了解和使用产品。
背景 在产品研发周期中,编写代码、编译、调试占据了工程师们绝大部分的时间,在默认情况下,更新小部分的代码,就需要触发一次全量编译,这个过程耗时大概为分钟级别,导致每次调试的反馈周期会相对较长,影响开发效率。为了解决这个问题,Lightly 团队进行了很多探索与尝试,引进了增量编译技术,旨在缩短编译时间,提升开发效率。
架构设计 鉴于 Lightly 是一支持全语言的在线编辑器(IDE),我们认为设计一个增量编译系统需满足以下条件:

  • 通用性 : 能够接受各类文件类型的源代码变更,并进行结构化处理
  • 扩展性 : 能够适配不同语言,不同框架,进行针对性的编译和构建
为满足以上条件,我们将增量编译系统设计为以下模块:

如上图所示,在线编辑器系统整体分成3个部分:
  • 监听模块 : 负责监听源程序中文件的变化,新增、修改、删除、重命名等。
  • 消息模块 : 负责将变更的内容结构化为消息,并根据已知类型进行分类打标,作为下游编译模块消费时的依据,同时,消息系统作为传输队列,本身需要具备持久化的特性。
  • 编译模块 : 该模块由各类具体的语言模块构成,通过消息系统的数据作为输入,将变更的内容做针对性的编译和构建,输出产出物。
下面是整体运行的流程图,描述了从代码修改到完成编译的整个过程:

以 Java 工程为例,从整个流程出发,在线编辑器的内部流程如下:
监听到 Java 源代码变化之后,首先我们会将这个变化的文件打标,放入消息队列将文件编译所依赖的信息进行收集,包含 maven 所有依赖的路径,以及相关环境变量和运行时参数将变更的文件进行编译,得到产出物,即 class 文件
运行编译产出物 【浅谈在线编辑器中增量编译技术的应用】由于我们把需要的文件已经编译完成,那接下来只需要将制品加载即可看到最终效果:

Lightly使用体验 前面的部分详细描述了增量编译的具体实现,其中包含了很多复杂流程和内容,但是对用户来说,使用过程是透明的,我们在 Lightly 在线编辑器上只需要一键触发就可以在1秒内完成整个编译打包、运行流程,优化了原先 “修改代码、运行构建命令、启动” 的流程,具体介绍如下(以 Java 为例)
  1. 用户编码完之后, 只需点击右上角 RUN 按钮, 即可查看输出:

  1. 用户再次编码完之后,再次点击右上角 RUN 按钮,结果如下:

展望 未来,Lightly 团队将继续围绕更智能化的轻量级在线编辑器(IDE)迭代更多功能,为开发者带来更好的体验,并期待后续更多的开发者可以参与共建。

    推荐阅读