使用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": true }]]
　　}

 

如今插件會幫你轉換成  antd/lib/xxx 的寫法了，同時由於設置了 style 屬性，模塊樣式也能夠按需自動加載，不須要再手動引入css或less文件了。

因此只須要這樣寫：

 

　　import { Button } from 'antd';