美文网首页
antd-design4.0配置按需加载

antd-design4.0配置按需加载

作者: Small_Song | 来源:发表于2021-09-16 16:57 被阅读0次
  1. create-react-app

  2. 安装antd-design

  3. 配置antd按需加载

    1. antd 的 JS 代码默认支持基于 ES modules 的 tree shaking。

    2. antd的css按需加载优化:

      1. 安装react-app-rewired、customize-cra、babel-plugin-import

      2. npm run eject

      3. 根目录增加config-overrides.js,并增加以下代码:

//根目录创建config-overrides.js, 修改默认配置
            const { override, fixBabelImports } = require("customize-cra");

            module.exports = override(
              fixBabelImports("import", {//antd按需加载
                libraryName: "antd",
                libraryDirectory: "es",
                style: "css" })
            );
3.  修改package.json:
4. 
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
    现在项目里可以使用
    import {Button} from 'antd'
    来按需引入antd

相关文章

网友评论

      本文标题:antd-design4.0配置按需加载

      本文链接:https://www.haomeiwen.com/subject/pneoeltx.html