react中使用antd按需加載（第一部）

什么是react按需加載？簡單來說就是當我們引用antd的時候需要引入全局css樣式，這會對性能造成一定的影響，那么使用按需加載以后就不需要引入css全局樣式了，直接引入功能模塊即可，既然需要設置按需加載就要對webpack文件進行修改，需要我們執行npm run eject命令來展開項目的隱藏文件，如果只是簡單的修改，我們可以使用react-app-rewired定義全局變量，react-app-rewired的作用就是在不eject的情況下,覆蓋create-react-app的配置。具體如下：

使用 react-app-rewired 對 create-react-app 的默認配置進行自定義

1.yarn add react-app-rewired --dev

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

2.然后在項目根目錄創建一個config-overrides.js用於修改默認配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

使用babel-plugin-import

babel-plugin-import 是一個用於按需加載組件代碼和樣式babel 插件（原理），現在我們嘗試安裝它並修改config-overrides.js 文件

1.yarn add babel-plugin-import --dev

+ const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
+   config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
  };

或者也可以修改

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [
                // 引入樣式為 'css'
                // style為true 則默認引入less
                ['import', { libraryName: 'antd', style: true }],
              ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
},

 參考鏈接：https://ant.design/docs/react/use-with-create-react-app-cn