react + antd-mobile 如何做Code Splitting

发布于 2022-09-05 22:07:48 字数 966 浏览 16 评论 0

如果使用过antd-mobile 应该知道 它集合 react 和 react-native 代码
官方推荐使用方式两种:

  1. 配置 babel-plugin-import 按需 打包antd-mobile组件
  2. 手动 按需导入 import Button from 'antd-mobile/lib/button'

归结起来 两种方式本质上都是去 import 对应组件的 .web.js代码。

考虑现在要做webpack(1.0) Code Splitting

在 entry

clipboard.png
单独打包antd-mobile, 打包后的页面组件很小,

clipboard.png

但实际上 无法正常运行,原因就是 antd-mobile 没有特定入口

如果不在entry中配置 独立antd-mobile

clipboard.png
这样由于掺杂了antd-mobile组件代码, 能正常运行,但页面组件变得特别大,这个是code splitting 完全没有任何意义

问题: antd-mobile 有没有办法比较好的做 code splitting ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

难忘№最初的完美 2022-09-12 22:07:48

clipboard.png
这部分无法理解,为什么单独打包之后无法运行?然后这里打包跟code splitting 有什么关系?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文