滴滴小程序开发标准 Mpx 推出新版本，聚焦性能与包体积优化

Mpx 是滴滴开源的一款增强型跨端小程序框架，自 2018 年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在滴滴内部建设了完善的小程序跨端开发生态。目前，Mpx 已经覆盖支持了滴滴内部全量小程序业务开发，成为了滴滴小程序开发的统一技术标准。

随着小程序业务的发展演进，性能和包体积的重要性愈发凸显，Mpx 从设计之初就非常重视性能和包体积的优化，本次的 Mpx2.9 版本更新带来的三大核心特性：原子类、SSR 和包体积优化。优化都与性能和包体积息息相关，下面我们逐个展开介绍。

原子类支持

原子类（utility-first CSS）是近几年流行起来的一种全新的样式开发方式，在前端社区内取得了良好的口碑，越来越多的主流网站也基于原子类进行开发，比较知名的有 Github、OpenAI、Netflix 和 NASA 官网等。使用原子类离不开原子类框架的支持，常用的原子类框架有 Tailwindcss、Windicss和 Unocss等。

在 Mpx2.9 版本中，我们在框架中内置了原子类支持，让小程序开发也能使用原子类。对项目进行简单配置开启原子类支持后，用户就可以在 Mpx 页面/组件模板中直接使用一些预定义的基础样式类，诸如 flex，pt-4，text-center 和 rotate-90 等，对样式进行组合定义，并且在 Mpx 支持的所有小程序平台和 web 平台中正常运行，下面是一个简单示例：

<view class="container">
  <view class="flex">
    <view class="py-8 px-8 inline-flex mx-auto bg-white rounded-xl shadow-md">
      <view class="text-center">
        <view class="text-base text-black font-semibold mb-2">
          Erin Lindford
        </view>
        <view class="text-gray-500 font-medium pb-3">
          Product Engineer
        </view>
        <view
          class="mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-solid border-purple-200">
          Message
        </view>
      </view>
    </view>
  </view>
</view>

通过这种方式，我们在不编写任何自定义样式代码的情况下得到了一张简单的个人卡片，实际渲染效果如下：

相较于传统自定义类编写样式的方式，使用原子类有以下优势：

• 不再为自定义类命名烦恼，在传统样式开发中，仅为某个元素定义样式需要费尽心思想出一些抽象的类名，还要避免类名冲突。使用原子类可以让你彻底摆脱这种繁琐无趣的工作；

• 控制 css 体积的无序增长，在传统样式开发中，css 体积会随着你的迭代不断增长。但在原子类中，所有样式均可复用，几乎无需编写新 css；

• 让调整样式更安全，传统 css 是全局的，修改某个样式时可能破坏其他地方的样式。而在模板中使用原子类是局部的，不必担心修改它会波及到其他部分。

而相较于使用内联样式，原子类也有一些重要的优势：

• 约束下的设计，内联样式中的每个数值都是“魔法数字”。但通过原子工具类，你可以选择符合预设设计规范的样式，从而更轻松地创建具有视觉一致性的 UI；

• 响应式设计，你不能在内联样式中使用媒体查询。但是，通过原子类框架提供的响应式工具，你可以轻松构建响应式界面；

• Hover、focus 和其他状态，使用内联样式无法定义特定状态下的样式。然而，借助原子类框架的状态变量功能，你可以轻松为这些状态定义样式。

看到这里，是否想马上在 Mpx 中体验原子类开发？使用最新版本的@mpxjs/cli 脚手架创建项目时，在 prompt 中选择使用原子类，就可以在新创建的项目模版中直接使用原子类。可使用的工具类可以参考【交互示例】，在已有项目中开启原子类支持可以参考【配置指南】。

小程序原子类使用注意事项

小程序和 web 环境对于 css 的支持存在底层差异，且小程序本身拥有许多独特技术特性。Mpx 在支持原子类时，对这些环境特异性进行了适配和统一。在框架的支持下，我们实现了大部分（超过90%）原子类和工具类在小程序环境下的正常使用，并额外支持了原子类产物的分包输出和样式隔离下的原子类使用，详情如下：

特殊字符转义

现代原子类框架支持value auto-infer（值自动推导），允许在模板中根据规则灵活地编写自定义值原子类，如 p-5px bg-[hsl(211.7,81.9%,69.6%)]

等。针对原子类中出现的[ ( , 等特殊字符，在 web 中会通过转义字符 \ 进行转义。然而，由于小程序环境下不支持 css 选择器中出现 \ 转义字符，我们内置支持了一套不带 \ 的转义规则对这些特殊字符进行转义，同时替换模版和 css 文件中的类名，内建的默认转义规则如下：

const escapeMap = {
    '(': '_pl_',
    ')': '_pr_',
    '[': '_bl_',
    ']': '_br_',
    '{': '_cl_',
    '}': '_cr_',
    '#': '_h_',
    '!': '_i_',
    '/': '_s_',
    '.': '_d_',
    ':': '_c_',
    ',': '_2c_',
    '%': '_p_',
    '\'': '_q_',
    '"': '_dq_',
    '&#