使用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';