Ant Design Mobile 2.0 beta 发布

简介: ![image | center](https://gw.alipayobjects.com/zos/rmsportal/yhdUhJpsEEAvtvGBJBmU.gif "") `antd-mobile@1.0` 发布已半年多, 历经 `26` 个版本迭代,解决并关闭了几百个 issue, 在阿里巴巴十八周岁生日这天,我们也很高兴的宣布: **更轻量,更易用,性能更好** 的 [

image | center

antd-mobile@1.0 发布已半年多, 历经 26 个版本迭代,解决并关闭了几百个 issue, 在阿里巴巴十八周岁生日这天,我们也很高兴的宣布:

更轻量,更易用,性能更好antd-mobile@2.0 正式开始 beta 阶段。

What’s better ?

1. 零配置,开箱即用 ?

antd-mobile@1 的用户可能深有体会,v1 出于移动业务的需求集成了高清方案,svg sprite 等高级特性,但强依赖构建配置的方式急剧提升了上手和使用复杂度。好消息是,经过整体重构,v2 已无需任何配置,效果如下:

// install deps
npm install antd-mobile@next

// import component and style 
import {
    Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

// here you go
ReactDOM.render(<Button loading>Start</Button>, mountNode);

做了什么黑魔法呢 ?

  • 内置了 hairline mixin 实现 1px 线,可兼容 viewport 缩放与不缩放。
  • 简化并 inline 了 svg sprite 逻辑,无需 svg-sprite-loadr
  • 修改了 react-native 组件引用, 无需 webpack.resolve 配置。
  • 新增单位变量 @hd,以适用于不同适配方案。

那 v2 是否支持业务自行添加缩放高清方案?1.x 的项目又是否能平滑迁移?

答案是 Yes. 得益于 antd-mobile v2 渐进增强的哲学和实现方式。1.x 项目升级成本相当小,详见 升级指南

2. 体积显著减小,更轻量 ️

版本 antd-mobile.min.js 体积 components 体积 / 占比 node_modules 体积 / 占比
1.6.5 568.4k 142k / 24.9% 426k / 74.9%
2.0.0-alpha.13 467.4k 136k / 29.0% 331k / 70.8%

v2 共 47+ 组件,umd bundle 体积比 1.x 小了 101Kb, 即总体积下降了 17.8% ?

更多详情请查看 antd-mobile bundle-size 分析

呵呵,你们是不是精简了功能?

No. 所有的体积减少都来自于对底层依赖的全面重构和精简,包括但不限于重构去除了 moment.js 依赖,用自产的轻量级手势库 rc-gesture 完全替换了 hamemr.js。

3. 性能更好,C 端业务更友好 ?

在 React 被应用到移动端之后,体积和性能一直是一个存在讨论的点,因此当社区出现 preact 这类体积更小,性能更佳的替代者,很多 C 端业务迫切想切换过来,so:

antd-mobile 作为基础 UI 组件库已经支持无缝迁移到 preact。

经过严密的测试,antd-mobile 自身已经根据 preact 进行了酌情的重构和兼容,至此我们的 官方 demo 已经全部运行在 preact 之上 !

What’s New ?

  • 新增了 CalendarDatePickerView 组件
  • 重写了 TabBar, Tabs , 更灵活功能更强大的 Api,如支持 sticky header 等。
  • Grid 重构,支持高度自适应和固定正方形两种布局模式。
  • Popup 组件废弃并收拢作为 Modal 的一种子模式,解决了 v1 困扰已久的 Popup 内容无法更新的问题。
  • antd-mobile 不再针对设备平台自动切换样式,默认采用 ios 风格,支持用户通过 platform api 切换为 android 设计风格。
  • 所有文档完成国际化翻译,see en-US

完整变更请看 chaneglog

What’s Next?

  • 持续在 preact 适配和体积瘦身,依赖精简上下功夫。
  • 着手对所有组件的动画性能和渲染性能做优化。
  • 协助 koi 和 业务升級。

相关信息

感谢所有 contributor 和反馈问题的用户们,任何疑问和反馈请联系我们:

EOF.

目录
相关文章
|
缓存 Shell API
一文带你掌握nest.js访问静态资源
一文带你掌握nest.js访问静态资源
一文带你掌握nest.js访问静态资源
|
6月前
|
安全 应用服务中间件 nginx
Docker 命令大全:从入门到生产,全场景核心指令全覆盖
本文系统讲解Docker核心原理与实战命令,涵盖Namespace、CGroup、UnionFS三大底层机制,详解镜像构建/拉取/安全扫描、容器全生命周期管理、数据卷与网络配置、Compose编排及生产最佳实践,内容全面、示例丰富、贴合v27.0.3最新版。
1552 2
|
7月前
|
传感器 人工智能 监控
​实时云渲染赋能时空智能:数字孪生核心技术方案
时空数据具有高维、动态和海量等特性,传统二维GIS地图难以承载其全部信息价值,决策者需要的是能融合、回溯和推演的“时空立方体”。实时云渲染技术正成为将抽象的“时空立方体”转化为直观、沉浸、可操作三维场景的终极呈现层,是时空智能落地应用的可视化桥梁。
​实时云渲染赋能时空智能:数字孪生核心技术方案
|
9月前
|
运维 Shell 应用服务中间件
【速查手册】Docker常用命令大全:这20%的命令解决了80%的问题
本文精炼总结 Docker 高频命令,按镜像管理、容器生命周期、排查调试、清理维护四大场景分类,详解常用参数与实战示例,附速查表,助你高效掌握核心操作,提升开发运维效率。
|
11月前
|
XML JSON API
苏宁商品详情API秘籍!轻松获取商品详情数据
苏宁商品详情API基于RESTful架构,支持JSON/XML格式,通过AppKey、AppSecret与签名三重认证,结合OAuth 2.0实现安全调用。开发者可获取商品名称、价格、销量、库存、促销等实时数据,适用于电商分析与商业智能。接口强制使用HTTPS协议,支持POST/GET请求,统一采用UTF-8编码,确保数据传输安全可靠。
|
11月前
|
供应链 开发者 计算机视觉
淘宝拍立淘接口实战:图像优化、识别调优与避坑代码示例
本文详解淘宝拍立淘接口(taobao.picture.search)实战技巧,涵盖图像预处理、识别优化、签名生成与供应链数据联动,结合代码示例解析高频坑点,如Base64格式错误、限流处理、分页失效等,助开发者提升识别率至85%以上,高效对接电商选品与供应链系统。
|
安全 Shell Linux
【Shell 命令集合 系统管理 】Linux 以超级用户(root)的身份执行特权命令 sudo命令 使用指南
【Shell 命令集合 系统管理 】Linux 以超级用户(root)的身份执行特权命令 sudo命令 使用指南
1776 1
|
前端开发 JavaScript 中间件
React状态管理库—— zustand 为啥这么简单易用🚀
React状态管理库—— zustand 为啥这么简单易用🚀
|
网络协议 Linux 网络安全
遇到Docker容器网络隔断?揭秘六种超级实用解决方案,轻松让Docker容器畅游互联网!
【8月更文挑战第18天】Docker容器内网络不通是开发者常遇问题,可能因网络配置错、Docker服务异常或防火墙阻碍等原因引起。本文提供六种解决策略:确认Docker服务运行状态、重启Docker服务、检查与自定义Docker网络设置、验证宿主机网络连接、临时禁用宿主机IPv6及检查防火墙规则。通过这些步骤,多数网络问题可得以解决,确保容器正常联网。
5800 1