首页 > 代码库 > 使用babel-plugin-import实现antd组件库中的组件按需加载
使用babel-plugin-import实现antd组件库中的组件按需加载
Ant Design是蚂蚁金服基于react实现的一个UI 设计库,基于 npm + webpack + babel 的工作流,支持 ES2015。babel-plugin-import 可以从组件库中仅仅引入需要的模块,而不是把整个库都引入,从而提高性能。
如果使用
import { Button } from ‘antd‘;
的写法会引入 antd 下所有的模块。为了提高打包编译的速度和浏览器下载资源的速度,可以通过以下的写法来只加载需要的组件:
import Button from ‘antd/lib/button‘;
import ‘antd/lib/button/style‘;
更好的办法是使用 babel,用 babel-plugin-import 来实现同样的按需加载效果:
1,安装插件
cnpm i babel-plugin-import --save-dev
2,修改
.babelrc
文件,在plugins
节点下,添加下面这个配置项:
{
"plugins": ["transform-runtime", ["import", { "libraryName": "antd", "style": "css" }]]
}
现在插件会帮你转换成
antd/lib/xxx
的写法了,同时因为设置了 style 属性,模块样式也可以按需自动加载,不需要再手动引入css文件了。所以只需要这样写:
import { Button } from ‘antd‘;
使用babel-plugin-import实现antd组件库中的组件按需加载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。