ant design - 大量进口

Posted 2023-02-18

【中文标题】ant design - 大量进口

【英文标题】：ant design - huge imports

【发布时间】：2018-07-21 03:16:27

【问题描述】：

我在我的 react 应用程序中使用 ant design library。

而且我面临着大量的导入，这伤害了我的包（由于 ant-design lib，目前在缩小版中为 1.1 mb）。

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

更新：

似乎antd 有一些巨大的或未优化的模块。 这里的事情 - 唯一的区别是导入 Datepicker 模块，并且.. 繁荣！ + 将近 2MB（在开发包中）

【问题讨论】：

我在一个只有两条路由的小项目中使用antd。 uglify后项目大小为1.6MB。如果您能够解决此问题，请在此处提供答案。

【参考方案1】：

UPD：新 (4.0) 版本的 antd 似乎解决了潜在问题。 因此，如果您尝试为早期版本解决此问题，推荐的方法是迁移到 antd 4

上一个答案：

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

但是workaround 存在。

调整 webpack 以不同方式解析图标。在你的 webpack 配置中：

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

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

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

也可以在config-overrides.js 中使用react-app-rewired（create-react-app 修改）来执行此操作

【讨论】：

向@Tobias Lins 推荐这个解决方案

【参考方案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()]

【参考方案3】：

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

import  Button from 'antd' 

与

import Button from 'antd/lib/button'

【讨论】：

使用babel-plugin-import时会自动处理这个问题

我发现github.com/vazco/uniforms/issues/219 很有帮助。

@DaveHowson 是的，但是 babel-plugin-import 只能通过弹出来与 create-react-app 等流行工具一起使用。阅读 GitHub 上的this issue 了解更多信息。

我在import Collapse from "antd/lib/collapse"; 中尝试了这种方法并解构const Panel = Collapse; 但得到错误TypeError: Cannot destructure property 'Panel' of 'antd_lib_collapse__WEBPACK_IMPORTED_MODULE_3__.Collapse' as it is undefined.

【参考方案4】：

我通过编辑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';

之前

之后

【讨论】：

嗨@Jan，我们怎么知道应该在icons.js 文件中导入哪些图标。我有一个 InputNumber 和 Select 下拉菜单。但箭头不可见：-|任何帮助/建议将不胜感激。

【参考方案5】：

那几个组件加起来肯定不是1.2M。当您只需要几个组件时，看起来您正在导入整个库。

要让antd 仅加载所需的模块，您应该使用babel-plugin-import。检查您的控制台日志以查看该链接中描述的“您正在使用整个 antd 包”警告。

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

【讨论】：

我的控制台像婴儿眼泪一样干净。而且我已经在使用 babel-plugin-import。无论如何捆绑仍然很大。将尝试使用 import Thing from 'antd/lib/thing' 重新格式化我的导入。它可能会减小大小，但肯定会导致许多导入字符串。

您的设置有问题。我的包通常包含您列出的所有组件，除了 Layout，还有更多。 antd 是 348kB 未压缩。 整个应用程序包括 antd、React 和笨拙的 lodash 以及许多其他东西，压缩后大小为 350kB。

提示：github.com/chrisbateman/webpack-visualizer 是一个简单的插件，它可以为您提供一个非常好的包的可视化报告，您可以在其中深入了解模块内部。你可以用它来查看Antd的哪些部分实际包含在内。

遇到了与 WebArtisan 相同的问题。逐步按照 CRA 的说明进行操作。它没有帮助捆绑包仍然包含我不使用的组件。这是我的 package.json 的屏幕截图。 config-overrides.js，以及bundle.js的可视化：imgur.com/a/Pnpm4I3

【参考方案6】：

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

【讨论】：

我也在考虑使用 react-loadable 与 antd 进行异步加载，但 Ant 文档讨论了使用 react-app-rewire 进行模块化导入。我想知道我是否应该同时做这两个或只是 react-loadble 用于动态组件导入。我觉得单独的代码拆分应该会有所帮助，但这个线程让我担心 - github.com/ant-design/ant-design/issues/12011

【参考方案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