干货 | 携程Taro多端化探索与实践

作者简介

Frank，携程前端研发，专注前端性能优化、一码多端、工程化建设等领域。

一、业务背景

随着移动互联网和智能设备的普及，前端开发人员需要采用多端同构技术来适配不同的终端（小程序、App和Web）。这些终端之间存在着明显的差异，包括浏览器引擎、操作系统、交互方式以及代码语言等方面。

这些差异给前端开发人员带来了不少挑战。一方面，不同终端采用不同的浏览器引擎和操作系统，导致页面渲染和交互行为的表现各不相同。另一方面，不同终端所使用的代码语言和开发工具也存在差异，需要开发人员具备不同的技术背景和知识，才能编写多份代码来适配不同的终端。这样做不仅增加了研发人员的开发工作量和代码维护的难度，还可能导致用户在不同设备上遇到不一致的用户体验，影响产品的质量和用户满意度。

为了解决这些问题，多端同构技术应运而生。通过多端同构技术，旅游前端和公共团队合作多端探索与实践，根据不同终端的特性进行灵活的适配和定制。这样可以减少开发成本和维护难度，提高开发效率和代码的可复用性。同时，多端同构技术还能提供一致的用户体验，无论用户使用哪种设备访问应用程序，都能获得相似的界面和功能。

行业现状 

                   

    

三端同构

二、多端同构技术选型

在进行多端同构技术选型时，我们需要综合考虑跨端能力、成本、性能、代码语言通用性以及现有技术的支持度。这将有助于我们选择最适合的技术方案，以下是对当前前端主流跨端技术的分析：

	Hybrid	React Native	Flutter	Weex	Taro
跨端能力	★★★★	★★	★★★	★★★	★★★★
成本	★★★★	★★	★★	★★	★★★
性能	★	★★★	★★★★	★★★	★★★
代码语言通用性	★★★★	★★★★	★★	★★★	★★★★
携程支持度	★★★	★★★★	★★★★	★	★★★★

Hybrid：使用JavaScript语言，支持快速构建多端应用。由于依赖于Webview容器来运行，所以其用户体验和性能受到一定的限制的。这种限制会导致应用的响应速度变慢，页面加载时间变长等问题。适用于三端业务述求比较高，研发成本又比较低，性能要求不高场景，比如营销广告页。

React Native：使用JavaScript语言开发的React的组件，支持构建App、Web，不支持原生小程序。App上有接近原生应用的性能和用户体验。适用于对小程序性能要求不高的场景。

Flutter：使用Dart语言和自带的渲染引擎，支持范围同ReactNative。在渲染速度和用户体验方面表现比ReactNative更加出色。由于ios平台规则限制，目前对于热更新支持并不友好。适用于对App性能要求较高，小程序性能要求不高的场景。

Weex：使用JavaScript语言开发的Vue的组件，支持范围与性能同ReactNative，社区活跃度不如ReactNative。

Taro：开放式跨端跨框架解决方案，它提供了一套统一的开发语法和组件规范，使