eject后使用babel-plugin-import按需引入antd样式

在文件顶部引入 antd/dist/antd.css实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。 babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理）

$ yarn add babel-plugin-import -D

修改 src/App.js

- import Button from 'antd/lib/button';
+ import { Button } from 'antd';

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css';

此时发现按钮样式不生效了，最简单的方式是修改 package.json 文件里的 babel 配置, 增加 babel-plugin-import 的配置

  "babel": {
    "presets": [
      "react-app"
-    ]
+    ],
+   "plugins": [
+      ["import", {"libraryName": "antd", "libraryDirectory": "lib", "style": true }]
+    ]
  }

重新执行 npm start，样式重新生效

• webpack.config.js

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'less-loader'
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader'
              )
            },
if (preProcessor) {
      let loader = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: shouldUseSourceMap
        }
      };
      if (preProcessor === 'less-loader') {
        loader.options.lessOptions = {
          javascriptEnabled: true,
          modifyVars: { 'primary-color': '#eeee' }
        }
      }
      loaders.push(loader);
    }
    return loaders;