antd按需加载

antd简介

antd 是蚂蚁金服推出的一套非常好的React UI库,使用起来特别方便,而且也推出了Antd手机端库,同时还推出了vue的使用方式

如果没有按需加载,我们如果想要使用一个标签,比如Button,需要导入js和css文件,使用起来不是很方便,而且还会造成性能上面的一个下降,先来看一下正常版本的使用

import React from 'react';
import {
  Button
} from 'antd';
import "antd/dist/antd.css";

function App() {
  return (
    <div className="App">
      123
      <Button>
        按钮
      </Button>
    </div>
  );
}

export default App;

按需加载

在antd的官网上我们看到了,他说需要babel-plugin-import,然后按照他的配置即可
antd官网

结果发现我的不好使!那么经过不断搜索和填坑,终于找到了好用的方式,一共有两种

一. 暴露配置

按照需要的依赖

yarn add babel-plugin-import --dev // 安装

在package.json中找到eject

 "scripts": {
    "eject": "react-scripts eject"
  }

运行命令

npm run eject

注意: 此操作是不可逆的,他会暴露创建react时候的webpack的配置,而且这个命令只能在刚刚使用脚手架创建好项目之后运行(文件的结构不能发生改变的时候才能暴露)

修改webpack.config.dev（开发环境）和webpack.config.prod（构建环境）下的 Process JS with Babel.下的那个options为：

options: {
             plugins: [
               ['import',[{  // 导入一个插件
                 libraryName: 'antd',   // 暴露的库名
                 style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
               }]]
             ],
             cacheDirectory: true,
},

和

options: {
              plugins: [
                ['import',[{  // 导入一个插件
                  libraryName: 'antd',   // 暴露的库名
                  style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
                }]]
              ],
              compact: true,
},

重新运行一下项目,就可以直接引入组件了

import { Button } from 'antd';

这种方式必须暴露配置,这回让我们开发的时候不是很方便,所以推荐下面的这种方式

二. (推荐)使用react-app-rewired

安装依赖

npm i react-app-rewired@2.0.2-next.0 babel-plugin-import customize-cra

这个时候就会有一个比较大的坑,react-app-rewired必须制定版本,否则报错

修改启动方式,在package.json中
原版

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

修改后的版本

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

在项目的根目录下创建config-overrides.js


const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");
 
 
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

重新启动项目,就可以按需加载了

import { Button } from 'antd';

总结

使用react-app-rewired来代替react-scripts的启动方式,并且安装所需要的依赖,在根目录创建config-overrides.js文件,导入配置即可完成

如果还有问题,可以看我的Demo合集