React 项目中 Antd 按需打包

在React项目中 实现 Antd 按需打包

1 下载依赖模块

yarn add react-app-rewired customize-cra babel-plugin-import

2 定义加载配置的 js 模块

根目录下新建文件config-overrides.js

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    //针对antd实现按需打包
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',  //自动打包相关样式
    }),
);

3 修改配置: 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-scripts eject"
},

然后可以将App.css中引入的代码进行删除或者注释

//@import '~antd/dist/antd.css';

• 本文作者： étoile

• 本文链接： http://sunnyllxx.github.io/2021/04/07/antd-package-on-demand/

• 版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢你请我吃糖果

微信