使用babel-plugin-import实现antd组件库中的组件按需加载

时间：2017-07-14 10:06:26 阅读：6263 评论：0 收藏：0 [点我收藏+]

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‘;

原文地址：http://www.cnblogs.com/yswz/p/7165031.html

踩

(0)

(1)

评论一句话评论（0）

分享档案

更多>

周排行