关于react-cli的antd的按需加载的两种方式;

按需加载是bable-plugin-import去实现的

首先安装  yarn add bable-plugin-import;

一种是 package.json 里面去配置; 前面有一篇已经写过;

https://blog.csdn.net/wangrong111222/article/details/80766773

还有一种是在webpack 配置文件里里面去配;

eject 暴露出来 

 // Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
                plugins:[['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,
            },
          },

这种js 的配置有俩  注意: 是 处理 babel那个 ;别找错了;

把 plugins 加入 options里就完事了;

把这玩意给dev 和prod 各一份 ;

对了  less 版本要降到 2.7.3 否则 就报错 ;

如果没有eject 暴露 配置项的话那么引入js 去实现  ,antd 官网上有 ,和less 版本也兼容 

安装react-app-rewired 包;

新建   config-overrides.js

写入 

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

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

然后 就可以用了

猜你喜欢

转载自blog.csdn.net/wangrong111222/article/details/82726939