react配置antd按需加載的使用

更新時間：2019年02月11日 09:27:20 作者：well2049

這篇文章主要介紹了react配置antd按需加載的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

我目前使用的antd版本是2.13?，F(xiàn)在最新的是3.0.1。

腳手架工具就是create-react-app。創(chuàng)建完成項目后，需添加配置，執(zhí)行yarn eject 也就是打開配置的文檔。

然后安裝第三方依賴yarn add babel-plugin-import --save-dev

找到config文件夾。里面有2個配置文檔，

webpack.config.dev.js和webpack.config.prod.js

添加配置時一定要保持文檔的一致性。我就是犯了錯誤，值配置了開發(fā)的沒有配置正式文檔導致錯誤。

首先打開webpack.config.dev.js

在147行添加這段代碼

plugins: [
            ['import', [{ libraryName: "antd", style: 'css' }]],
          ],

同樣的配置在webpack.config.prod.js里面也需要添加。

這樣就真正實現(xiàn)了按需加載，就不會再報黃色的警告。

還有第二種簡單的方式，就是在package.json里面直接添加這行代碼。當然前提也是需要先安裝依賴：yarn add babel-plugin-import --save-dev

"babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   [
    "import",
    {
     "libraryName": "antd",
     "style": "css"
    }
   ]
  ]

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React Native懸浮按鈕組件的示例代碼
本篇文章主要介紹了React Native懸浮按鈕組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2018-04-04
react16+antd4 RangePicker組件實現(xiàn)時間禁選示例
這篇文章主要為大家介紹了react16+antd4 RangePicker 時間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
react實現(xiàn)動態(tài)增減表單項的示例代碼
在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧
2024-05-05
React運行機制超詳細講解
React 作為當下最為流行的前端開發(fā)框架之一，使用它可以快速構(gòu)建大型 Web 應用，加上其出色的性能表現(xiàn)，使得眾多互聯(lián)網(wǎng)公司對它格外地青睞，這篇文章主要介紹了React運行機制
2022-11-11
react使用websocket實時通信方式
這篇文章主要介紹了react使用websocket實時通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
在console中打印React Fiber樹的操作步驟
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是：如何從使用者/學習者角度在js 代碼上拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下
2024-04-04
在react中使用highlight.js將頁面上的代碼高亮的方法
本文通過 highlight.js 庫實現(xiàn)對文章正文 HTML 中的代碼元素自動添加語法高亮，具有一定的參考價值，感興趣的可以了解一下
2022-01-01
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法
2021-12-12
react 組件傳值的三種方法
這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-06-06
react實現(xiàn)瀏覽器自動刷新的示例代碼
這篇文章主要介紹了react實現(xiàn)瀏覽器自動刷新的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04