蚂蚁设计 - 巨大的进口

Question

我正在使用and design library作为我的反应应用程序。

我面临着巨大的进口，这会伤害我的捆绑（目前由于ant-design lib而缩小版本为1.1 mb）。

如何通过我的所有应用程序以不同方式导入antd组件？

更新

似乎antd有一些巨大的或非优化的模块。 这里的东西 - 唯一的区别是导入Datepicker模块，并且繁荣！ +差不多2MB（在开发包中）。

Answer 1

目前，antd dist的很大一部分是svg图标。
还没有官方的处理方法（check the issue on github）。

但是存在workaround。

1. 使Webpack适应以不同方式解析图标。在您的webpack配置中：

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

1. 在文件夹icons.js中或您需要的任何位置创建src/。确保它与别名路径匹配！
   在此文件中，您定义antd应该包括哪些图标。

export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

还可以通过react-app-rewire内的config-overwrites.js（创建反应应用程序修改）来完成此操作

Answer 2

1）防止antd加载所有时刻本地化。 添加webpack插件并在webpack.config.js中配置它，如下所示：

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
    alias: {moment: `moment/moment.js`}
},
target: `web`
}

2）使用与antd库中的相同时刻版本。

3）使用模块化的antd 使用babel-plugin-import

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    // `style: true` for less
  ]
}

我使用 BundleAnalyzerPlugin 来分析捆绑包。

plugins: [new BundleAnalyzerPlugin()]

Answer 3

这几个组件当然不是1.2M。当您只需要几个组件时，您似乎正在导入整个库。

要让antd仅加载所需的模块，您应该使用babel-plugin-import。检查控制台日志中的＆＃34;您正在使用一整套antd＆＃34;该链接描述了警告。

如果您正在使用CRA，请查看docs for Create-React-App如何实施它。

Answer 4

查看文档 https://ant.design/docs/react/getting-started#Import-on-Demand 建议根据需要导入单个组件。 因此，您可以尝试替换

import { Button} from 'antd' 

使用

import Button from 'antd/lib/button'

Answer 5

我通过编辑config-override.js来将捆绑包大小减少了500KB，

config-override.js

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./ src / icons.js

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

之前

之后

Answer 6

尝试使用webpack使用code splitting并对路由器做出反应。它将帮助您异步加载模块。这是帮助我在使用ant框架时改善页面加载时间的唯一解决方案。

Answer 7

Issue在Ant Design 4.0中已得到解决，该问题导致了较大的包尺寸。

从release announcement报价。

更小

在antd @ 3.9.0中，我们引入了svg图标（[为什么使用svg图标？] （））。图标API 使用字符串名称的文件无法按需加载，因此svg图标文件 完全引入，大大增加了包装的尺寸 产品。在4.0中，我们调整了图标用法API以支持目录树 摇晃，将Antant的默认包大小减小了约150 KB （已压缩）。

要安装Ant Design 4，您必须执行以下操作

npm install antd@4.0.0-rc.1
// or  in yarn
yarn add antd@4.0.0-rc.1