技術標籤：JavaScriptandtreactjsreact

antd按需載入

• 安裝babel-plugin-import

// yarn
yarn add babel-plugin-import
//npm
npm install --save babel-plugin-import

• 暴露webpack

// yarn
yarn eject
//npm
npm run eject

• 配置webpack.config.js

webpack3.0之後
修改webpack.config.dev和.prod下搜尋 Process JS with Babel.下的那個options

// Process JS with Babel
 

options: {
             plugins: [
               ['import',[{  // 匯入一個外掛
                 libraryName: 'antd',   // 暴露的庫名
                 style: true // 直接將ants樣式檔案動態編譯成行內樣式插入
               }]]
             ],
             cacheDirectory: true,
},

webpack4.0之後
搜尋Process application JS with Babel找到該註釋下的babel-loader配置

// Process application JS with Babel
plugins: [
                    ['import',{  // 匯入一個外掛
                      libraryName: 'antd',   // 暴露的庫名
                      style: true // 直接將ants樣式檔案動態編譯成行內樣式插入
                    }],
          ]

最後重啟即可

更多配置設定