esm模式按需引入模式失效

[milobluebell]

你好，我在自己的组件中引用了 @ant-design/icons/es/index.js下的createFromIconfontCN方法，伪代码大致这样：

import { createFromIconfontCN as createFromIconfont } from '@ant-design/icons/es';
const Icon = createFromIconfont({
  scriptUrl: `www.baidu.com/abcd.js`,
});
export default Icon;

打包成组件后，在另一个项目引用它，在那儿经webpack analyzer发现，整个Icon包1.23mb的东西都被引进来了👇

[milobluebell]

里面是各种我不想用的antd的Icon，👇

我是希望完全舍弃已有的antd Icon，只用createFromIconfontCN，配合自己的iconfont去构建组件来使用

[milobluebell]

或者我不打包自己的Icon组件，在任意项目中直接引 @ant-design/icons/es/index.js下的createFromIconfontCN去创造的Icon组件，一样有此问题

[milobluebell]

有没有轮值维护者？麻烦看一下，急。 @sorrycc @popomore @BANG88 @yesmeck
🙏

[yesmeck]

production 模式下 webpack 才会 tree shaking

[milobluebell]

我是使用father build开发一个组件库A。 其中有Button、Affix、Icon等。我用build + npm pack的方式将A打包后的tgz，在项目B npm install使用，而不是link使用。Button、Affix等都是按照预料做了按需，没有加载什么多余内容。但是通过createFromIconfontCN创建的Icon就是我刚才截图的情况。
这个过程似乎跟你刚才说的，没关系吧？你意思是让我对项目B build之后的结果再analyzer?

[yesmeck]

以上是我的猜测，除非你能提供可重现的 demo，不然只能是猜测。

[milobluebell]

好的。我晚点给个复现库。

[hankaibo]

@ant-design/icons这个包还是有问题吧。虽然官网的示例是按需打包了，但是我也遇到了题主同样的bug。

我不断的删除文件，发现没有页面引用了，它还是全量打包。

[hankaibo]

myantdpro.zip
这就是一个可复现的项目。我只是把官网的ts转成了js。

[yesmeck]

是这里的问题 https://github.com/umijs/plugins/blob/master/packages/plugin-locale/src/index.ts#L197

@chenshuai2144

[chenshuai2144]

我来修一下

[tdida]

遇到同样问题，等待进展

[sunkehappy]

@chenshuai2144 这个问题修复的怎么样了？我们也遇到了同样的问题，需不需要我们来帮忙修复，期待回复。

[caixianglin]

1年了，按需加载还没解决，是放弃ant-design了吗？

[chenshuai2144]

已经休掉了，不过最近又有 bug 复现了，马上会解决一下

4.113 版本

[sunkehappy]

@chenshuai2144 OK，我看到4.11.2已经发布了，期待4.11.3哈，我正好在做性能优化，所以这里很关键。

[chenshuai2144]

发了4.12.0， 你试试

[careyke]

这个问题在4.16.2版本又出现了🙏

[MrDo1890]

4.16.2 问题还是有的
只使用了LoadingOutlined这一个Icon

[careyke]

4.16.2 问题还是有的
只使用了LoadingOutlined这一个Icon

应该是同一个问题吧 官方已经修复 ant-design/ant-design#31008

[MrDo1890]

4.16.2 问题还是有的
只使用了LoadingOutlined这一个Icon

应该是同一个问题吧 官方已经修复 ant-design/ant-design#31008

已解决, many thx

[benwiley4000]

Any news on this? Seems like tree shaking isn't working.

[lxang]

遇到同样问题，有人找到解法么，求分享

[Robert-Ro]

try this: ant-design/ant-design#12011 (comment)
but not compatible for createFromIconfontCN, you should handle it manually

[adamistheanswer]

try this: ant-design/ant-design#12011 (comment)
but not compatible for createFromIconfontCN, you should handle it manually

Tried this and not working

[lucaslz2020]

我感觉还是有问题啊。antd本身又lib 又有es的方式导入，导致我都不知道改如何导入字体库了。 我都使用全路径了。

[badPumps]

2023年了，这个问题可以了吗

[Airkro]

import { DownloadOutlined } from '@ant-design/icons';

console.log(DownloadOutlined);

用 Node.js 18 跑单元测试：

@ant-design/icons v5.1.4 支持 ESM 引用：

{
  '$$typeof': Symbol(react.forward_ref),
  render: [Function: DownloadOutlined] { displayName: 'DownloadOutlined' }
}

但 v5.2.x 又不支持了：

import { DownloadOutlined } from '@ant-design/icons';
         ^^^^^^^^^^^^^^^^
SyntaxError: Named export 'DownloadOutlined' not found. The requested module '@ant-design/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@ant-design/icons';
const { DownloadOutlined } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

[manzaloros]

I also had the

SyntaxError: Named export 'DownloadOutlined' not found. The requested module '@ant-design/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@ant-design/icons';
const { DownloadOutlined } = pkg;

problem with version 5.2.x and Node v 20.

Downgrading to 5.1.4 fixed the problem.