小程序工程化思考

📅
1 分钟阅读
·

和传统工程化对比

下图列出传统前端工程化关注的内容(from umi)。 image.png

image.png

小程序的工程化空间受运行时和框架能力限制,下面按能力逐项比较:

  1. 框架:可选方案包括 kbone、taro、remax/r2m、mpvue、mpx 等。以优选业务覆盖的移动设备为准,这些方案存在体验问题或已停止维护,因此仍基于原生框架开发。小程序不提供直接操作视图的底层 API、组件层级管理和模板递归,并限制包大小与路由模型;这些限制也影响了框架方案的可行性。
  2. TypeScript:缺少适用于小程序的统一规范,原生 TypeScript 支持难以覆盖复杂场景。
  3. 样式(CSS):由于缺少视图层接口,样式方案选择有限。微信提供 @import 等模块化能力;受包大小限制,可使用 PostCSS 加变量插件或 CSS 变量管理样式。
  4. JavaScript 编译、模块打包和压缩:这是可投入建设的部分。webpack 不适用于小程序,可采用基于 Babel 的 mpbuild,或基于 esbuild/SWC 的 mpe。
  5. 路由管理和请求库:实现受小程序框架提供的方案限制,可定制空间较小。
  6. 资源加载方式:资源固定为小程序主包和子包。新版基础库提供动态加载能力,但存在两个限制:
    1. 基础库版本不满足要求的小程序无法使用。
    2. 仍需在构建时集成资源,不能像传统微前端架构那样从远端加载代码。
  7. 数据流:可以建设,但小程序没有 Context 能力,方案的使用方式难以与传统前端框架对齐。
  8. 代码风格:使用 ESLint、Prettier 等工具约束。
  9. 文档能力和通用组件开发能力:需要投入建设。
  10. 测试:需要结合投入产出决定覆盖范围,业务团队通常不会优先投入。 对比可见,小程序中可直接复用传统工程化思路的部分有限,工程投入应更多放在业务集成和业务领域能力上。

小程序框架对比传统前端框架缺少什么

小程序前端问题能否对齐是否必要
启动流程固定的 app → page 生命周期同步调用任意编排启动阶段存在异步依赖时,处理顺序较复杂不能
code split包维度任意切分不能
加载能力支持 分包异步化 ,且必须提前构建到一起,支持2.17.3及以上支持从网络加载包微应用拆分无法绕过集成构建不能
编排能力page+component任意编排不能
组件能力缺失 slot能力~不能
组件间通讯props+父节点中转props和context能力
视图介入不能直接操作视图可以直接操作 DOM缺少底层视图接口,动态操作难以保证性能性能限制,不能
动态执行JS不支持eval等
路由固化 page → page + tabbar任意自定义无法做到贴合业务场景做编排不能

演进视角看小程序当下成熟度对比

2021 增补

第一阶段:14年~17年第二阶段:18年~21年第三阶段:21年后核心小程序能力
框架范式转移,vdom 提出 代表:react vue2范式转移,编译时代替运行时 vdom 代表:svelte solidjs范式转移,去除 JS 运行时开销 代表:qwik更好的性能还处于第一阶段
框架理念class+声明式框架+TS 支持 代表:react<0.14,vue2function 代表:react>15hooks 代表:react 16,vue3框架表达内聚性的方式会影响可维护性不到第一阶段,可做工
样式理念样式预处理 代表:less scss样式后处理 代表:postcss样式框架

代表:tailwindcss
样式组织方式会影响可维护性不到第一阶段,可做工
状态管理单向数据流+单store,中心化

代表:flux,redux,vuex,mobx
增强ts+多store,去中心化

代表:mobx,pinia,recoil
元数据,惰性更新等尝试

代表:zustand、jotai、valtio
更好的DX,更好的性能,配合框架理念不到第一阶段,可做工
工具链范式转移,依赖分析,打包部署

代表:webpack
微创新

代表:rollup
构建效率提升

代表:vite
效率的提升不到第一阶段,可做工
架构SPA,SSR

代表:umi
微前端,SSR 流式,SSG,ESR

代表:qiankun
服务端组件等

代表:react18
大规模协同问题

算力转移提高性能
不到第一阶段

275 字 · 21 段落
ximing

Follow onGitHub

相关文章