antd按需加载

最新推荐文章于 2024-04-15 20:58:06 发布

原创最新推荐文章于 2024-04-15 20:58:06 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了React应用中按需加载与全量加载Ant Design组件的不同策略。通过对比chunk.js大小，介绍如何利用babel-plugin-import、react-app-rewired和customize-cra等工具实现按需加载，以优化项目构建大小。

非按需加载

// App.js
import { Button } from 'antd';

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

按需加载

去掉 App.css 中的 @import ‘~antd/dist/antd.css’;
安装依赖

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

在项目根目录创建一个 config-overrides.js 用于修改默认配置。类似于vue的vue.config.js

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

module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
   }),
);

package.json文件中的 react-scripts 全部替换为 react-app-rewired

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