Tradução desta edição:

o tamanho do pacote antd svg é muito grande, é recomendado o pacote @ ant-design / icons sob demanda

• [] Tenho pesquisado os problemas deste repositório e acredito que não seja uma duplicata.

Versão

3.9.0

Meio Ambiente

Webpack4

Link de reprodução

https://zlab.github.io/report.html

Passos para reproduzir

Compilação do Webpack

O que é esperado?

Icon Pack conforme necessário, divisão de arquivo js

O que realmente está acontecendo?

Embalado em vendedores

Eu só usei alguns ícones

<Icon /> apresenta a biblioteca de ícones completa por padrão. Porque eu não sei que tipo de ícone você apresentará para o tempo de execução. Anteriormente, os ícones eram hospedados em iconfont.cn então não há percepção de embalagem.

Isso requer uma discussão aprofundada do plano temporário, consulte https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579

cc @yesmeck

É necessário fornecer um método que possa ser carregado sob demanda, e esse método também é usado dentro do componente antd.

import Star from 'antd/icons/star';

<Star />

Mas se você fizer isso, a escrita anterior é incompatível

<Icon type="star" /> // should import star icon first

Não pode ser empacotado sob demanda e o carregamento assíncrono também é bom,

Antes de usar o iconfont, o conteúdo da página sairá primeiro e o ícone será carregado lentamente

<Icon.Star />

Mas se você fizer isso, a escrita anterior é incompatível

Não, contanto que você não precise de <Icon /> não será capaz de embalar tudo.

Algumas cenas não podem ser empacotadas sob demanda, como a configuração do ícone do menu, se ele pode ser configurado em segundo plano, para que o front end não possa prever qual ícone será definido
O carregamento assíncrono é mais adequado, basta digitar @ ant-design / icons em um bloco

Na verdade, os componentes internos que usam <Icon /> , como <DatePicker /> , <Select /> etc., serão totalmente introduzidos quando usados.

Se puder ser configurado em segundo plano, o front end não poderá prever qual ícone será definido. O carregamento assíncrono é mais adequado

O menu do sistema de back-end que criamos está configurado. O carregamento assíncrono de ícones é realmente necessário e o pacote completo é muito grande.

Acho que assíncrono é melhor.
Se você quiser empacotá-lo sob demanda, você deve escrever um plugin babel como babel-plugin-import .

Na verdade, os componentes internos que usam <Icon /> , como <DatePicker /> , <Select /> etc., serão totalmente introduzidos quando usados.

Alterou a escrita interna

No projeto, o tipo é uma variável, só posso apresentar o valor total?
<Icon type={icon} />
Isso pode ser parcialmente introduzido?

Veja se você pode usar svg symbol sprite para reduzir o tamanho do pacote completo tanto quanto possível.

https://github.com/jkphl/svg-sprite
https://css-tricks.com/svg-symbol-good-choice-icons/
https://css-tricks.com/pretty-good-svg-icon-system/

Além disso, o pacote dist deve ser construído diretamente em @ant-design/icons , e não é necessário confiar diretamente no código-fonte levemente compilado.

+1, o pacote é realmente dobrado

💢 Dor de cabeça. . . . Do tio. . .

O mais embaraçoso é trazer muito SourceMappingUrl

Isso me fez voltar para a versão 3.8.2

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projeto umi)

Aqui está uma solução que usa resolve.alias no webpack para reduzir o tamanho do pacote.
Planejamos projetar novas APIs que permitam importar os ícones necessários no futuro.
Observe que você também deve importar os ícones usados ​​no componente antd , como loading , close-circle e assim por diante.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projeto umi)
Aqui está uma solução temporária: configure o campo resolve.alias do webpack.
No futuro, devemos encontrar uma maneira de projetar uma nova API de ícones para facilitar o uso de ícones de carregamento sob demanda.
Observe que os ícones sob demanda também devem incluir os ícones usados ​​por outros componentes de antd , como loading , close-circle e assim por diante.

@HeskeyBaozi Em primeiro lugar, obrigado pelo seu trabalho árduo! Minha hora atual é 9:29 , e vi que a hora que você enviou foi 6 hours ago , irmãos são realmente bons o suficiente! Like: thumbsup :: thumbsup :: thumbsup:

Meu entendimento é listar os ícones usados ​​pelo projeto separadamente, incluindo os ícones usados ​​pela antd

Você pode importar o arquivo antes que a solução oficial para carregamento assíncrono seja fornecida.

@ChiaJune antd lista completa dos ícones usados ​​no componente, caso haja alguma omissão, posso acrescentar
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

Você pode se referir à abordagem de fontawome

UMA

import { library } from "@fortawesome/fontawesome-svg-core";
import faCalendar from "@fortawesome/free-solid-svg-icons/faCalendar";

library.add(faCalendar); // Load icon once

...

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
<FontAwesomeIcon icon="calendar" />

B

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import faCalendar from "@fortawesome/free-solid-svg-icons/faCalendar";

<FontAwesomeIcon icon={faCalendar} /> // Import directly or any svg

Preserve o uso antigo e adicione mensagem de aviso e migração no console.

import { Icon } from 'antd';
<Icon type="star" />

Provedor de nova API como:

import Star from 'antd/icons/Star';
import Setting as SettingIcon from 'antd/icons/Setting';

<Star />
<SettingIcon />

E também capaz de balançar:

import { Icon: { Star, Setting } } from 'antd';

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projeto umi)

Aqui está uma solução que usa resolve.alias no webpack para reduzir o tamanho do pacote.
Planejamos projetar novas APIs que permitam importar os ícones necessários no futuro.
Observe que você também deve importar os ícones usados ​​no componente antd , como loading , close-circle e assim por diante.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projeto umi)
Aqui está uma solução temporária: configure o campo resolve.alias do webpack.
No futuro, devemos encontrar uma maneira de projetar uma nova API de ícones para facilitar o uso de ícones de carregamento sob demanda.
Observe que os ícones sob demanda também devem incluir os ícones usados ​​por outros componentes de antd , como loading , close-circle e assim por diante.

@HeskeyBaozi Ótima solução !! (até que o antd limpe isso e permita a importação única de ícones) Tenho feito algumas tentativas de usar resolve.alias para corrigir esse problema, mas acertou em cheio. Obrigado!

fique de olho nisso, já que estamos usando essa versão também.

cc @jameswhf @xcqwan

O mesmo para mim. Importar separadamente não cobre todos os cenários de uso, portanto, é necessário corrigir a fragmentação da árvore. Por favor verifique aqui

@serayuzgur
Eu uso webpack.alias e funciona para mim. Talvez possa ajudá-lo : )

o branch antd-icon-tree- shake do meu repositório (Webpack4 + Babel 7.0)

Isso também causa problemas se tudo o que tenho é um Button em um pacote (provavelmente porque ele suporta ícones). Alguma solução alternativa para reduzir o tamanho do pacote se tudo o que estou usando é um Button ?

(Na captura de tela - eu só tenho um componente Button , mas os ícones aumentam o pacote principalmente)

Solução temporária que funcionou para mim até ser corrigida (antd> = 3,9)

1. Adapte o webpack para resolver os ícones de maneira diferente. Na configuração do seu webpack:

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

1. Crie icons.js na pasta src/ ou onde quiser. Certifique-se de que corresponde ao caminho do alias!
   Neste arquivo você define quais ícones o antd deve incluir! Eu só precisava do ícone para baixo para o componente Selecionar do antd.

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

Também é possível fazer isso com react-app-rewire (modificações criar-reagir-app) dentro de config-overwrites.js

Acho que uma API melhor seria se pudéssemos definir o ícone passando algum JSX dessa forma, eu poderia simplesmente importar apenas o ícone necessário e passá-lo para o botão. Também tornaria mais simples trabalhar com ícones de terceiros (ou qualquer svg).

<Button icon={<Icon type="search" />}>Search</Button>

Apenas minha preferência pessoal :)

Para pessoas que usam o create-react-app via react-app-rewired .

config-overrides.js

const path = require('path');

/* config-overrides.js */
module.exports = function override (config, env) {
  let alias = (config.resolve.alias || {});
  alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, "./src/icons.js");

  config.resolve.alias = alias;

  return config;
}

icons.js gist

Para pessoas que usam o create-react-app via react-app-rewired .

config-overrides.js

const path = require('path');

/* config-overrides.js */
module.exports = function override (config, env) {
  let alias = (config.resolve.alias || {});
  alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, "./src/icons.js");

  config.resolve.alias = alias;

  return config;
}

icons.js gist

Fazer este método remove a compatibilidade de twoToneColor.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
resulta em:

Oi,
A causa deste problema é a capacidade de usar ícones como <Icon type="check-circle" . Esta API precisa que todos os ícones sejam incluídos para que possa fornecer o que você fornecer como tipo.

Isso também nos dá a capacidade de decidir ícones em tempo de execução e é valioso para mim. Portanto, de acordo com mim, a API deve permanecer a mesma, mas o componente Icon deve suportar o carregamento de ícones pelo tipo fornecido sob demanda .

Talvez usando importação dinâmico (depende # 12235 - atualização para Webpack 4) ou através de um Webpack 3 biblioteca, como reagem-carregáveis

Com base neste comentário, vá mais longe a solução temporária:

$ yarn add purched-antd-icons

// webpack.config.js
module.exports = {
  // other configs
  resolve:{
    // other configs
    alias:{
      "@ant-design/icons":"purched-antd-icons"
    }
  }
}

o pacote purched-antd-icons remove todos os ícones não usados ​​pelos componentes oficiais do antd. Para minha condição, Icomoon é o provedor do sistema de ícones do projeto.

Aqui está uma comparação de análise do pacote criar-reagir-app ejetado.

saída do webpack

análise de pacote

Você pode importar o arquivo antes que a solução oficial para carregamento assíncrono seja fornecida.

antes:

depois de:

A solução alternativa de @tobiaslins não está funcionando para mim, diz Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' Alguém pode me indicar como corrigi-lo? obrigado

@marcosfede Eu tive o mesmo problema que você. O alias não está funcionando corretamente.

Verifique se você tem __dirname definido em path.resolve(__dirname, "./src/icons.js")

Se estiver usando o create-react-app via alternativa react-app-rewired, você pode fazer:

• caminhos
• webpack.dev.js
• webpack.prod.js

A atualização de 3,9 aumentou nosso pacote em 700kb (23%). Embora amemos a nova implementação, o tamanho maior do pacote foi uma grande surpresa. O aumento é compensado por não incluir 'iconfont'. Implementaremos a solução @Obooman que ainda verá nosso impacto geral aumentar, mas não o suficiente para garantir o congelamento em 3.8.4.

A implementação do pacote purched-antd-icons deixa nosso projeto com muitos ícones ausentes.

@michaelpeterlee purched-antd-icons fornece apenas ícones que os componentes oficiais precisam, nós os usamos porque não estamos usando outros ícones no antd. para mais personalização, você terá que gerenciar seus ícones manualmente ou escolher geradores de ícone de fonte como icomoon ou iconfont como seu provedor de sistema de ícone.

@marcosfede Eu tive o mesmo problema que você. O alias não está funcionando corretamente.

Verifique se você tem __dirname definido em path.resolve(__dirname, "./src/icons.js")

Se estiver usando o create-react-app via alternativa react-app-rewired, você pode fazer:

• caminhos
• webpack.dev.js
• webpack.prod.js

isso foi útil, obrigado. Eu tinha ejetado o projeto, então eu tinha __dirname apontando para a pasta de configuração onde os arquivos webpack estão localizados em vez da pasta raiz

Talvez a equipe do AntDesign deva considerar voltar à forma anterior (antes de 3.9). É a melhor maneira, a maneira mais sábia.

Deve ser tão externo. https://github.com/ant-design/ant-design-icons/issues/14

@marcosfede Eu tive o mesmo problema que você. O alias não está funcionando corretamente.
Verifique se você tem __dirname definido em path.resolve(__dirname, "./src/icons.js")
Se estiver usando o create-react-app via alternativa react-app-rewired, você pode fazer:

• caminhos
• webpack.dev.js
• webpack.prod.js

isso foi útil, obrigado. Eu tinha ejetado o projeto, então eu tinha __dirname apontando para a pasta de configuração onde os arquivos webpack estão localizados em vez da pasta raiz

Funciona para mim, obrigado!

Aqui estão as mudanças que faremos no próximo lançamento para resolver o problema do tamanho do pacote.

Crie um componente separado para cada ícone

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

Rejeitar a referência a um ícone como uma string

Um aviso de uso suspenso será exibido quando você fizer referência a um ícone como uma string nos seguintes componentes:

<Icon type="star" />
<Alert iconType="success" />
<Avatar icon="star" /> 
<Button icon="star" /> 
Modal.confirm({ iconType: 'star' })

Para compatibilidade, carregaremos um sprite SVG sob demanda quando você fizer referência a um ícone como uma string.

Em vez de fazer referência a um ícone como uma string, você deve passar ReactNode explicitamente para estes adereços:

import StarFilled from 'antd/icons/StarFilled';

<Avatar icon={<StarFilled />} /> 

@yesmeck Uma boa solução que introduz o shake de árvore e nenhum método addIcon ao mesmo tempo!

Uma pergunta. E se tivermos estilos CSS nesses ícones e precisarmos alterar o tipo dos ícones dinamicamente? Precisamos passar estilos para todos os ícones de substituição?

@michaelpeterlee rc-calendar não dependia de antd e @ant-design/icons , então não é para "carregar toda a biblioteca de ícones". Você pode criar um problema em https://github.com/react-component/calendar/issues com uma reprodução de demonstração.

Meu erro. Excluí meu comentário irrelevante. Deve ser o componente DatePicker que apresenta o ícone:

Meu ponto é, eu não estou importando ícones antd em qualquer lugar em meu projeto, mas alguns componentes antd estão importando Icon de antd . Seria bom se esses componentes pudessem importar apenas os ícones de que precisam, em vez de toda a biblioteca de ícones.

Aqui estão as mudanças que faremos no próximo lançamento para resolver o problema do tamanho do pacote.

@yesmeck

Você quer dizer 3.11.x ? Não parece estar incluído em 3.10.4 .

@johnernaut # 12888

De volta à v3.8.4 por enquanto, a versão 3.9.0+ é muito grande depois de ser empacotada, a versão mencionada pelos deuses acima é apenas uma solução temporária, estou ansioso para a próxima versão para poder carregar o ícone de forma assíncrona

Obrigado @yesmeck , estou ansioso para a próxima versão.

Também gostaria de mencionar que publiquei um plugin do Ant Design para create-react-app v2 e craco . Aqui está o plugin craco-antd no GitHub

Acabei de adicionar um Large Bundle Size da seção no PR ). Obrigado pela dica @sunel (e outros). Incluí um link para seu comentário sobre a configuração de um alias.

module.exports = {
  resolve: {
    alias: {
      "@ant-design/icons-angular/icons": "/path/to/node_modules/@ant-design/icons-angular/esm2015/icons/ant-design-icons-angular-icons.js"
    }
  }
}

Eu rascunho um repositório de reprodução mostrando esse problema. A configuração do webpack é modificada do exemplo de integração original do ng-zorro-antd aqui e parece que DllPlugin torna inútil a agitação da árvore no Módulo ES achatado.

Funciona conforme o esperado se DllPlugin estiver ausente.

Aqui estão alguns planos de fundo históricos sobre aquele webpack não balança árvores em módulos achatados. Acredito que o que eles se referem foi corrigido na maior parte no lançamento recente, exceto alguns casos extremos de DllPlugin .

• https://twitter.com/IgorMinar/status/835710218977734656
• https://github.com/ng-packagr/ng-packagr/issues/705
• https://github.com/angular/angular-cli/issues/10754

Curiosamente, foi só em maio que o webpack oferece suporte a trepidação de árvores no DllPlugin . Eu adicionei entryOnly: true mas sem sorte. Eu esboçaria um exemplo mais isolado e levantaria um problema para o webpack.

Edições: Adicionado repositório de reprodução e questões históricas.

Fim da história: é aqui que torna o repositório de reprodução falso. O webpack 3.5.6 é muito antigo sem suporte para entryOnly: true . É por isso que fesm5 módulos não são abalados por árvores.

Para aqueles que gostariam de agrupar ng-zorro-antd para fornecedores dll

• Se você tiver webpack > = 4.9.0 , adicione entryOnly: true à sua configuração DllPlugin .
• Caso contrário, adicione esta configuração à configuração do seu webpack

module.exports = {
  resolve: {
    alias: {
      "@ant-design/icons-angular/icons": "/path/to/node_modules/@ant-design/icons-angular/esm2015/icons/ant-design-icons-angular-icons.js"
    }
  }
}

@issuehuntfest financiou $ 200,00 para esta edição. Veja em IssueHunt

Os arquivos de fonte não podem participar do empacotamento e importá-los localmente?muito grande

O oficial planeja otimizar este problema? Você pode fornecer uma solução svg local semelhante à versão anterior à 3.8?

Ansioso por melhorias

Existe uma solução oficial?

@fuhaiwei Até a próxima versão, verifique este comentário para uma solução alternativa exportando ícones diretamente https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Atualmente eu uso webpack.resolve.alias substituir antd/es/icon por um componente personalizado.
A montagem será <Icon /> a props.type e props.theme enviada para a API especificada.
Desta forma, todos os dados do ícone usados ​​podem ser registrados durante o teste da página.
Então, com base nos dados e https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228, gere icons.js automaticamente.
Espero encontrar uma solução melhor.

Atualmente estou usando webpack.resolve.alias para substituir antd/es/icon por um componente personalizado.
Esse componente enviará props.type e props.theme de <Icon /> para a API especificada.
Isso permite que você registre todos os dados do ícone usados ​​durante o teste de página.
Em seguida, gere icons.js automaticamente, com base nos dados e https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 .
Espero encontrar uma solução melhor.

3 meses se passaram, o funcionário encontrou uma maneira de carregar sob demanda?

Parece melhor começar com o método de introdução, e é tão bom que todos os componentes sejam cotados separadamente como material. . Agora, apenas os componentes que podem usar o ícone embutido, todos os ícones são empacotados. .

Se o componente Icon não for usado, o pacote @ ant-desigin / icons também será carregado

Se o componente Icon não for usado, o pacote @ ant-desigin / icons também será carregado

Datepicker também é usado, veja se existe tal no código. o menu também será usado

Mais de 500 KB é muito grande

Ansioso para começar, mudei originalmente para a versão mais recente, mas quando vi que era tão grande, fiquei assustado novamente

Não quero usar o formato SVG, posso configurá-lo de maneira flexível? Configure para usar ou não usar svg

Você pode fornecer uma maneira de fazer referência a apenas um único ícone, e todos os componentes internos do antd são atualizados para usar desta forma:

import Search from 'antd/icons/Search";

<Search />

Para compatibilidade com projetos existentes, import { Icon } from 'antd'; ainda import { Icon } from 'antd'; seja usado, a quantidade total de ícones é importada.

Concordo lá em cima

marca esperando pela solução perfeita

500k ícones, existe uma solução?

Alguém pode me atualizar sobre isso em inglês? Os 500kb são um quarto do meu pacote. Estou usando o webpack e importando os ícones assim:

import Icon from 'antd/lib/icon';
<Icon type="logout" />

Eu tentei várias maneiras de importá-los e até mesmo remover todas as importações de ícone, mas parece que tudo o que eu faço os 500kb ficam. Estou usando o webpack e fui capaz de agitar os ícones de forma adequada usando o recurso de içamento experimental do parcel, mas não posso usar isso, pois ele quebra meu aplicativo em 20 outros lugares.

Como as pessoas estão lidando com esse problema? Todos aqui estão apenas enviando seus projetos com 500kb extras ou alguma solução alternativa óbvia que estou ignorando?

Importar assim funciona com uma compilação de webpack padrão?

import Star from 'antd/icons/star';
Se alguém pudesse me atualizar, eu realmente apreciaria.

@ApolloGun A solução alternativa foi mencionada várias vezes neste tópico, tudo está neste comentário: https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Funciona dizendo ao Webpack para resolver os ícones de um local diferente, especificamente um novo arquivo onde você exporta exatamente os ícones que deseja usar. Depois de fazer isso, os ícones funcionarão normalmente, nada mais é alterado nos componentes.

Não estou usando nenhum ícone, mas ainda recebo aquele arquivo enorme. Talvez os componentes do antd o estejam usando internamente. Como faço para descobrir os ícones que são usados ​​pelos componentes. Este parece ser um bom método para substituir ícones Antd por ícones personalizados para coisas como Select, Dropdown, etc.

Não estou usando nenhum ícone, mas ainda recebo aquele arquivo enorme. Talvez os componentes do antd o estejam usando internamente. Como faço para descobrir os ícones que são usados ​​pelos componentes. Este parece ser um bom método para substituir ícones Antd por ícones personalizados para coisas como Select, Dropdown, etc.

@HeskeyBaozi criou uma lista dos ícones usados ​​nos componentes antd, usando o alias do webpack:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
Por favor, leia toda a discussão do problema para entender este método.

@ApolloGun Atualmente não existe uma solução oficial.
A solicitação pull: # 12888 ainda está funcionando em andamento.

@yesmeck , @ afc163 Algum plano para encerrar em breve?

@HeskeyBaozi @ afc163 , como uso este novo que você escreveu? ?

@HeskeyBaozi Posso perguntar por que vocês não estão trabalhando nisso? Já se passaram mais de cinco meses. Vocês consideram isso uma prioridade baixa?

@HeskeyBaozi Posso perguntar por que vocês não estão trabalhando nisso? Já se passaram mais de cinco meses. Vocês consideram isso uma prioridade baixa?

Concordo, é muito chato = (

Depois de inspecionar o código de antd , estou vendo que um componente como Button importa Icon , que por sua vez importa (de acordo com o código gerado)

// import everything here
import * as allIcons from '@ant-design/icons/lib/dist';

//...

// use everything here :(
ReactIcon.add.apply(
  ReactIcon,
  _toConsumableArray(
    Object.keys(allIcons).map(function(key) {
      return allIcons[key];
    })
  )
);

o que faz com que o treehaking falhe, importando todos os ícones. Considere apontar a importação para @ant-design/icons/lib/index.es.js e não realizar operações em todos os ícones até que seja necessário. Além disso, confira a história desta linha: https://github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3 Está mudando um pouco com o tempo.

Isso faz com que todo o projeto fique diretamente inutilizável

@poorel ,

<Icon /> apresenta a biblioteca de ícones completa por padrão. Porque eu não sei que tipo de ícone você apresentará para o tempo de execução. Anteriormente, os ícones eram hospedados em iconfont.cn então não há percepção de embalagem.

Isso requer uma discussão aprofundada do plano provisório, consulte # 12011 (comentário)

Essa solução ainda pode ser usada, eu testei, mas você tem que descobrir quais ícones estão no seu projeto, isso é um pouco mais problemático

Mas você tem que decidir quais ícones estão em seu projeto ...

Tentei ler antes e descobri que muitas das referências de ícones são feitas pelos próprios componentes do antd, e o número não é pequeno. Embora a referência direta no negócio seja muito pequena, mas considerando que os componentes podem ser referenciados, o número não é fácil de contar.

@chenyong Uh , aquele ovo dói. . .

@aryzing Sua abordagem parece atraente. Isso resultará em menos esforço do que # 12888? Esse PR envolve muitas mudanças significativas, provavelmente é parte do motivo pelo qual ainda não foi concluído após meses.

@zachguo Eu olhei em # 12888 e não consegui entender o que estava acontecendo. Depois de pensar um pouco sobre o assunto, não tenho certeza se podemos sacudir os ícones com sucesso porque a apis dinâmica usada por alguns componentes para renderizar ícones está em conflito com a natureza estática das importações ES usadas para sacudir as árvores.

O ícone usado em alguns componentes antd é renderizado dinamicamente (ou seja, determinado em tempo de execução) com base em um prop. Por exemplo, dê uma olhada na API de Button:

<Button icon="search">Search</Button>

Para que esse componente seja renderizado corretamente, o componente Botão (ou o componente Ícone subjacente usado) deve ter acesso (em tempo de execução) a todos os ícones e não permite o movimento da árvore.

A solução seria ter uma API como

import { 
  SearchIcon // not sure if this actually exists
} from '@antd/some-icons-package';

<Button icon={SearchIcon}>Search</Button> {/* option 1 - component */}
<Button icon={() => <SearchIcon />}>Search</Button> {/*option 2 - render prop */}

Neste cenário, você está importando apenas o que precisa e a agitação da árvore pode entrar em ação e eliminar todas as exportações não utilizadas do exemplo @antd/some-icons-package .

Esse problema já dura mais de meio ano e ainda não há uma solução oficial. A solução que uso atualmente é usar import() para carregamento assíncrono.
Esse problema já dura mais de meio ano e ainda não há uma solução formal. A solução que estou usando no momento é usar import() para carregamento assíncrono.

Use os componentes carregáveis recomendados na documentação oficial do React .
Use os componentes carregáveis recomendados na documentação oficial do React .

import React from 'react';
import ReactDOM from 'react-dom';
import { Icon } from 'antd';

ReactDOM.render(
  <Icon type="github" />,
  document.getElementById('root')
);

• O primeiro passo é instalar as dependências: @loadable/component e @babel/plugin-syntax-dynamic-import .
  O primeiro passo é instalar as dependências: @loadable/component e @babel/plugin-syntax-dynamic-import .

• A segunda etapa é criar uma pasta icons no diretório raiz do projeto e usar o script para exportar todos os ícones em @ant-design/icons :
  A segunda etapa é criar uma pasta icons na raiz do projeto e exportar todos os ícones em @ant-design/icon usando um script:

  #!/usr/bin/env node
  const fs = require('fs');
  const path = require('path');
  const util = require('util');
  const icons = require('@ant-design/icons');
  
  const fsMkdir = util.promisify(fs.mkdir);
  const fsWriteFile = util.promisify(fs.writeFile);
  
  // https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/utils.ts#L94-L108
  const mapping = {
  fill: 'fill',
  outline: 'o',
  twotone: 'twotone',
  };
  const saveFlag = { encoding: 'utf8', mode: 0o644, flag: 'w' };
  
  (async () => {
  const dir = path.join(__dirname, 'icons');
  await fsMkdir(dir, 0o755);
  const processes = Object.values(icons).map(value => {
    if (value && value.name && value.theme) {
      // https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/components/Icon.tsx#L38-L42
      const file = path.join(dir, `${value.name}-${mapping[value.theme]}.js`);
      const data = `export default ${JSON.stringify(value)}`;
      return fsWriteFile(file, data, saveFlag);
    }
  });
  await Promise.all(processes);
  })();
  

  Use o node para executar este script diretamente no projeto para armazenar todos os ícones exportados em @ant-design/icons no diretório icons .
  Execute este script diretamente no projeto usando o nó para armazenar todos os ícones exportados de @ ant-design/icons na pasta icons .

• A terceira etapa é copiar components / icon / index.tsx no repositório de código Antd para o diretório raiz do projeto e nomeá-lo como Icon.jsx ou Icon.js e, em seguida, excluir a definição de tipo TypeScript no código para obter pure Código JavaScript. (Se o seu projeto usa TypeScript, você também pode nomeá-lo diretamente como Icon.tsx ou Icon.ts , portanto, não há necessidade de excluir a definição do tipo)
  Na terceira etapa, copie components / icon / index.tsx no repositório de código Antd para a raiz do projeto e denomine Icon.jsx ou Icon.js e remova a definição de tipo TypeScript no código para obter código JavaScript puro. (Se o seu projeto usa TypeScript, você também pode nomeá-lo diretamente como Icon.tsx ou Icon.ts , então você não precisa excluir a definição do tipo)
  Em seguida, modifique este arquivo de código e use import() com @loadable/component para carregar arquivos de ícone sob demanda.
  Em seguida, modifique o arquivo de código e use import() com @loadable/component para carregar o arquivo de ícone conforme necessário.

  diff -- a/Icon.tsx b/Icon.jsx
  --- a/Icon.tsx
  +++ b/Icon.jsx
  @@ -1,70 +1,29 @@
  import * as React from 'react';
  import classNames from 'classnames';
  -import * as allIcons from '@ant-design/icons/lib/dist';
  +import loadable from '@loadable/component';
  import ReactIcon from '@ant-design/icons-react';
  -import createFromIconfontCN from './IconFont';
  +import createFromIconfontCN from 'antd/es/icon/IconFont';
  import {
  svgBaseProps,
  withThemeSuffix,
  removeTypeTheme,
  getThemeFromTypeName,
  alias,
  -} from './utils';
  +} from 'antd/es/icon/utils';
  -import warning from '../_util/warning';
  +import warning from 'antd/es/_util/warning';
  -import LocaleReceiver from '../locale-provider/LocaleReceiver';
  +import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
  -import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
  +import { getTwoToneColor, setTwoToneColor } from 'antd/es/icon/twoTonePrimaryColor';
  +
  +const AllIcons = loadable.lib(props => import(
  +  /* webpackChunkName: "icons/icon-" */
  +  `./icons/${props.type}.js`
  +));
  
  // Initial setting
  -ReactIcon.add(...Object.keys(allIcons).map(key => (allIcons as any)[key]));
  setTwoToneColor('#1890ff');
  -let defaultTheme: ThemeType = 'outlined';
  +let defaultTheme = 'outlined';
  -let dangerousTheme: ThemeType | undefined = undefined;
  +let dangerousTheme = undefined;
  -
  -export interface TransferLocale {
  -  icon: string;
  -}
  -
  -export interface CustomIconComponentProps {
  -  width: string | number;
  -  height: string | number;
  -  fill: string;
  -  viewBox?: string;
  -  className?: string;
  -  style?: React.CSSProperties;
  -  spin?: boolean;
  -  rotate?: number;
  -  ['aria-hidden']?: string;
  -}
  -
  -export type ThemeType = 'filled' | 'outlined' | 'twoTone';
  -
  -export interface IconProps {
  -  tabIndex?: number;
  -  type?: string;
  -  className?: string;
  -  theme?: ThemeType;
  -  title?: string;
  -  onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
  -  onClick?: React.MouseEventHandler<HTMLElement>;
  -  component?: React.ComponentType<CustomIconComponentProps>;
  -  twoToneColor?: string;
  -  viewBox?: string;
  -  spin?: boolean;
  -  rotate?: number;
  -  style?: React.CSSProperties;
  -  prefixCls?: string;
  -  role?: string;
  -}
  -
  -export interface IconComponent<P> extends React.SFC<P> {
  -  createFromIconfontCN: typeof createFromIconfontCN;
  -  getTwoToneColor: typeof getTwoToneColor;
  -  setTwoToneColor: typeof setTwoToneColor;
  -  unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
  -  unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
  -}
  -
  -const Icon: IconComponent<IconProps> = props => {
  +const Icon = props => {
  const {
    // affect outter <i>...</i>
    className,
  @@ -107,7 +66,7 @@
    [`anticon-spin`]: !!spin || type === 'loading',
  });
  
  -  let innerNode: React.ReactNode;
  +  let innerNode;
  
  const svgStyle = rotate
    ? {
  @@ -116,7 +75,7 @@
      }
    : undefined;
  
  -  const innerSvgProps: CustomIconComponentProps = {
  +  const innerSvgProps = {
    ...svgBaseProps,
    className: svgClassString,
    style: svgStyle,
  @@ -165,12 +124,19 @@
      dangerousTheme || theme || defaultTheme,
    );
    innerNode = (
  -      <ReactIcon
  -        className={svgClassString}
  -        type={computedType}
  -        primaryColor={twoToneColor}
  -        style={svgStyle}
  -      />
  +      <AllIcons type={computedType}>
  +        {({ default: loadedIcon }) => {
  +          ReactIcon.add(loadedIcon);
  +          return (
  +            <ReactIcon
  +              className={svgClassString}
  +              type={computedType}
  +              primaryColor={twoToneColor}
  +              style={svgStyle}
  +            />
  +          );
  +        }}
  +      </AllIcons>
    );
  }
  
  @@ -181,7 +147,7 @@
  
  return (
    <LocaleReceiver componentName="Icon">
  -      {(locale: TransferLocale) => (
  +      {locale => (
        <i
          aria-label={type && `${locale.icon}: ${type}`}
          {...restProps}
  @@ -196,7 +162,7 @@
  );
  };
  
  -function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
  +function unstable_ChangeThemeOfIconsDangerously(theme) {
  warning(
    false,
    'Icon',
  @@ -206,7 +172,7 @@
  dangerousTheme = theme;
  }
  
  -function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
  +function unstable_ChangeDefaultThemeOfIcons(theme) {
  warning(
    false,
    'Icon',
  

• A última etapa é configurar o Webpack:
  A etapa final é configurar o Webpack:
  `` `diff
  diff - a / webpack.js b / webpack.js
  --- a / webpack.js
  +++ b / webpack.js
  @@ -1,4 +1,5 @@
  const path = require ('path');
  + const webpack = require ('webpack');
  const HtmlWebpackPlugin = require ('html-webpack-plugin');
  const TerserPlugin = require ('terser-webpack-plugin');

  @@ -33,12 +34,16 @@
  plugins: [
  new HtmlWebpackPlugin ({
  título: 'Página incrível',
  template: path.join (__ dirname, 'public / index.html'),
  meta: {
  janela de visualização: 'largura = largura do dispositivo, escala inicial = 1',
  },
  hash: verdadeiro,
  }),

  • new webpack.NormalModuleReplacementPlugin (
  • /node_modules\/antd\/es\/icon\/index.js/,
  • path.resolve (__ dirname, 'Icon.jsx')
  • ),
    ],
    resolver: {
    módulos: ['node_modules'],
    @@ -56,13 +61,14 @@
    usar: [{
    loader: 'babel-loader',
    opções: {
    predefinições: [
    ['@ babel / preset-env', {targets: '> 2,486%, not dead'}],
    '@ babel / preset-react',
    ],
    plugins: [
  • ['@ babel / plugin-syntax-dynamic-import'],
    ['@ babel / plugin-proposal-class-properties'],
    ['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}],
    ],
    },
    }]
    

    `` `

A vantagem desta solução é que você pode manter todos os ícones e pode modificá-los arbitrariamente no sistema de gerenciamento de fundo configurável sem se preocupar com a falta de ícones; e os ícones são carregados sob demanda e só serão carregados quando os ícones de uma página específica forem renderizados O arquivo de ícone correspondente. A única coisa que deve ser carregada são os dados da lista de ícones de cerca de 50K no índice empacotado (designar um nome mais curto no comentário mágico do webpack em Icon.jsx pode reduzir o tamanho).
A vantagem desta solução é que você pode manter todos os ícones, você também pode modificar os ícones no sistema de gerenciamento de fundo configurável sem se preocupar com os ícones que faltam, e os ícones são carregados sob demanda, apenas os ícones necessários para serem renderizados serão carregados quando você começa a renderizar uma página específica. O arquivo de índice empacotado que deve ser carregado tem apenas cerca de 50K de dados da lista de ícones (especificar um nome mais curto no comentário mágico do Webpack em Icon.jsx pode reduzir esse tamanho).

A desvantagem deste esquema é que cada ícone contém informações adicionais do módulo Webpack além do conteúdo do ícone, então você pode ver que o tamanho da pasta de ícones é muito maior do que o tamanho do arquivo único empacotado como um todo, mais os 50K no índice Os dados da lista de ícones são realmente compactados em tamanhos próximos a 3M. No entanto, como há apenas alguns ou uma dúzia de ícones que podem ser usados ​​para frente e para trás, a quantidade de dados baixados pelo navegador do usuário não será muito grande e porque é carregado de forma assíncrona, desde que o número de ícones exibidos ao mesmo tempo em uma única página não seja Mais, tem pouco efeito na velocidade de carregamento.
A desvantagem desta solução é que cada ícone contém informações do módulo Webpack, além do conteúdo do ícone, então você pode ver que o tamanho da pasta icons é muito maior do que o tamanho do único arquivo empacotado antes, e 50 K de dados da lista de ícones no arquivo de índice, o tamanho real do pacote é próximo a 3 M. No entanto, como os ícones que podem realmente ser usados ​​são apenas alguns ou uma dúzia, a quantidade de dados baixados pelo navegador do usuário não é muito grande e, como é carregado de forma assíncrona, desde que o número de ícones exibidos em uma única página não seja maior, o impacto na velocidade de carregamento não é grande.

@ jinliming2 é uma modificação legal, apenas para descobrir que a importação do webpack pode realmente passar variáveis

Instruções totalmente dinâmicas, como import (foo), falharão porque o webpack requer pelo menos algumas informações de localização do arquivo. Isso ocorre porque foo pode ser qualquer caminho para qualquer arquivo em seu sistema ou projeto. O import () deve conter pelo menos algumas informações sobre onde o módulo está localizado, portanto, o empacotamento pode ser limitado a um diretório específico ou conjunto de arquivos.

Contanto que haja um prefixo do diretório, eu pensei que era impossível antes.
Dito isso, os usuários do antd não usam apenas o webpack, o que é um pouco embaraçoso.

@aryzing Parece que a opção 1 de suas APIs propostas é realmente o que # 12888 está tentando alcançar. Muitas mudanças importantes estariam envolvidas, então provavelmente ainda precisamos esperar a equipe do Ant Design terminar.

pode considerar o uso de xhr para carregar svg de forma assíncrona？
arqueiro-svgs

Visto que ant deisgn si usa mais ícones, você considera alterar 图标文件 para um esquema de carregamento assíncrono de forma que não ocupe o volume do arquivo principal. Você pode consultar isto:

Como o próprio ant deisgn usará mais ícones, considere alterar o arquivo de ícone para um esquema de carregamento assíncrono, de modo que você não precise ocupar o tamanho do arquivo principal, você pode consultar isto:

webpack-ant-icon-loader

@rororofff financiou $ 2,00 para esta edição.

• Envie a solicitação pull por meio do IssueHunt para receber este prêmio.
• Quer contribuir? Chip para este problema via IssueHunt .
• Verifique o
• Precisa de ajuda de desenvolvedores? Adicione seu repositório no IssueHunt para arrecadar fundos.

Para quem está intimidado com a duração desta conversa e só quer usar create-react-app e ant-design, criei um projeto clichê aqui https://github.com/AustinGreen/cra-antd-starter

Isso inclui uma correção para o problema de tamanho do pacote de ícones e uma configuração de pacote da web personalizado sem ejetar. Obrigado a @ndbroadbent , @patricklafrance e a toda a equipe de design de formigas por todo o seu trabalho árduo.

Para quem está intimidado com a duração desta conversa e só quer usar create-react-app e ant-design, criei um projeto clichê aqui https://github.com/AustinGreen/cra-antd-starter

Isso inclui uma correção para o problema de tamanho do pacote de ícones e uma configuração de pacote da web personalizado sem ejetar. Obrigado a @ndbroadbent , @patricklafrance e a toda a equipe de design de formigas por todo o seu trabalho árduo.

Como posso usar no app Nextjs?

@AustinGreen Tentei seu exemplo.

Para um aplicativo com barra lateral e um botão ter um tamanho de ~ 100kB Gzipado ainda é demais.

@anjmao se houver uma maneira de reduzir ainda mais o tamanho do pacote, avise-me e irei adicioná-lo. Se você estiver criando um aplicativo da web empresarial, ~ 100kB Gzipado para uma estrutura de front-end, ~ 5 componentes (de uma biblioteca de componentes abrangente), ícones e outros utilitários é bastante padrão.

@anjmao se houver uma maneira de reduzir ainda mais o tamanho do pacote, avise-me e irei adicioná-lo. Se você estiver criando um aplicativo da web empresarial, ~ 100kB Gzipado para uma estrutura de front-end, ~ 5 componentes (de uma biblioteca de componentes abrangente), ícones e outros utilitários é bastante padrão.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579. Aqui está uma boa solução

@ Oscar-ren o projeto já está usando um alias para ícones (é por isso que o tamanho do pacote é de apenas ~ 100kB e não ~ 400kB)

@tobiaslins , você mudou sua solução alternativa desde seu último comentário ?
Quando eu uso isso em um projeto Nuxt, o cliente e a renderização do lado do servidor ficam fora de sincronia:
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Apenas para sua informação, uma versão do Vue para reduzir o tamanho do pacote usando o alias do webpack:
https://github.com/atjason/ant-design-vue-demo

Referir:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Tamanho do pacote de Hello World :

Visto que ant deisgn si usa mais ícones, você considera alterar 图标文件 para um esquema de carregamento assíncrono de forma que não ocupe o volume do arquivo principal. Você pode consultar isto:

Como o próprio ant deisgn usará mais ícones, considere alterar o arquivo de ícone para um esquema de carregamento assíncrono, de modo que você não precise ocupar o tamanho do arquivo principal, você pode consultar isto:

webpack-ant-icon-loader

Para a posteridade, isso só funciona para React.

Olá, quando a solução @ jinliming2 será lançada?
O webpack-ant-icon-loader não funciona para mim.

Olá, você pode fornecer informações sobre como usar
webpack-ant-icon-loader com você?
Deixe-me ver se posso ajudar a resolver isso.

Olá @ beven91!

Já fiz alguns testes anteriormente e não funcionou e não fui capaz de
descobrir por quê. No entanto, sua pergunta me fez isolar o caso em um
projeto dedicado Eu criei um teste de amostra para você mostrar a você e este
vez que funcionou! Estou economizando constantemente 1,21 Mb do pacote resultante
o que é fantástico, tanto do projeto de demonstração quanto daquele que está trabalhando
comercialmente.

Estou postando aqui o projeto de exemplo caso outra pessoa tenha o mesmo
problemas:
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

Sem o webpack-ant-icon-loader, obtenho o seguinte resultado:
app bundle.development.js 4.59 MiB [emitido] app

Com webpack-ant-icon-loader eu obtenho:
../../index.html 555 bytes [emitidos]
0.bundle.development.js 1.21 MiB 0 [emitido]
bundle.development.js 3.41 aplicativo MiB [emitido] aplicativo

Algumas notas:

• acho que será melhor se você excluir 0.bundle.development.js produzidos
  artefato.
• os ícones desaparecem do produto final, ou seja, eles não são visíveis na página. Eu vi a configuração do umirc.js, mas estou usando o react-router. Como posso fazê-los reaparecer?

Na sexta-feira, 5 de abril de 2019 às 14h38, beven91 [email protected] escreveu:

Olá, você pode fornecer informações sobre como usar
webpack-ant-icon-loader com você?
Deixe-me ver se posso ajudar a resolver isso.

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

https://github.com/AustinGreen/cra-antd-starter

@AustinGreen só por curiosidade, como sua solução é diferente do método Ant documentado react-app-rewired e babel-plugin-import documentado aqui - https://ant.design/docs/react/use-with-create-react -app ?

GitHub

AustinGreen / cra-antd-starter

boilerplate para usar criar app react e design formiga - AustinGreen / cra-antd-starter

Ant Design - uma linguagem de design de interface do usuário

Uma linguagem de design de IU de classe empresarial e implementação baseada em React com um conjunto de componentes React de alta qualidade, uma das melhores bibliotecas de IU React para empresas

@annjawn a partir de create-

@ Beven91 você poderia ajudar com esta parte do meu comentário anterior, por favor?

• os ícones desaparecem do produto final, ou seja, eles não são visíveis na página. Eu vi a configuração do umirc.js, mas estou usando o react-router. Como posso fazê-los reaparecer?

Quer dizer, é ótimo que haja separação entre os ícones em todo o pacote, mas os ícones usados ​​ainda fazem parte do pacote separado, então usá-los significaria incluí-los como pacote separado, o que torna a separação inútil.

@annjawn a partir de create-

@AustinGreen faz sentido, mas é fundamentalmente a mesma coisa usando CRACO. Aliás, também vou usar o react-loadable para fazer a divisão de código e estou pensando que seu método + importações modulares + carga de componente assíncrona deve fornecer redução significativa do tamanho do pacote.

@vladimirmoushkov
Desculpe o atraso, vou tentar resolver isso。

Ola @vladimirmoushkov

Você pode ver os detalhes aqui. ant-icons-webpack-loade-test # 1

Solução temporária que funcionou para mim até ser corrigida (antd> = 3,9)

1. Adapte o webpack para resolver os ícones de maneira diferente. Na configuração do seu webpack:

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

1. Crie icons.js na pasta src/ ou onde quiser. Certifique-se de que corresponde ao caminho do alias!
   Neste arquivo você define quais ícones o antd deve incluir! Eu só precisava do ícone para baixo para o componente Selecionar do antd.

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

Também é possível fazer isso com react-app-rewire (modificações criar-reagir-app) dentro de config-overwrites.js

Isso não está funcionando para componentes de formigas que usam ícones. por exemplo, o componente de alerta usa ícones de verificação e fechamento, mas não são visíveis com esta solução

@ Venugopal46 você pode adicionar aqueles ícones (que são usados ​​por componentes de formigas) em seu icons.js também.
Funciona bem para mim.

Parece que estamos perto de uma solução; Para terminar, poderíamos criar um utilitário que gere automaticamente o icons.js como parte do processo de construção.

Como você pode saber exatamente quais ícones estão sendo importados através dos próprios componentes do formiga, para colocá-los em seu icons.js ?

Para mim, o hack acima:

1. Adapte o webpack para resolver os ícones de maneira diferente. Na configuração do seu webpack:

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

1. Crie icons.js na pasta src/ ou onde quiser. Certifique-se de que corresponde ao caminho do alias!
   Neste arquivo você define quais ícones o antd deve incluir! Eu só precisava do ícone para baixo para o componente Selecionar do antd.

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

Também é possível fazer isso com react-app-rewire (modificações criar-reagir-app) dentro de config-overwrites.js

E use o seguinte arquivo generateIconsList.sh para gerar src/icons.js :

grep -iR \<Icon\  ./src/ | cut -d: -f2 | sed -e s/.*\<Icon\ //g | sort | uniq | while read icon; do 
    theme='Outline';
    themelowercase="outline";
    if [[ $icon =~ ^.*twoTone.*$ ]]; then
        theme="TwoTone";
        themelowercase="twotone";
    fi
    if [[ $icon =~ ^.*fill.*$ ]]; then
        theme="Fill";
        themelowercase="fill";
    fi
    icon=$(echo $icon | sed -e 's/type\=\"//g'| sed -e 's/\".*//g' | sed -e 's/\-/ /g')
    icon=$(python -c "print('"$icon"'.title())")
    icon=$(echo $icon | sed -e 's/ //g')
    core_path="@ant-design/icons/lib/"$themelowercase"/"$icon$theme
    search_path="node_modules/"$core_path".js"
    if [ -e $search_path ]; then
        echo "export { default as "$icon$theme" } from \""$core_path"\";"
    fi
done | sort | uniq

executando generateIconsList.sh 2>/dev/null >src/icons.js da raiz do projeto - faz o trabalho! .
O script é um hack feio e obviamente não captura referências de ícones internos ou referências de multilinha <Icon /> . No meu caso, precisei adicionar alguns casos de ícone manualmente, no entanto, o script faz o trabalho no final - tendo 1,1 MB a menos no pacote final!

Como você pode saber exatamente quais ícones estão sendo importados através dos próprios componentes do formiga, para colocá-los em seu icons.js ?

Estou apenas adicionando os ícones que estão faltando (não exibidos) em uma página da web, mas deveriam estar lá. Depende de quantos componentes do antd você está usando, mas para mim demorou cerca de 10 minutos para adicionar. (Eu uso muitos componentes Antd, no entanto)

Por exemplo, se as setas de classificação nas tabelas estiverem faltando:

1. inspecione a mesa de formigas e encontre <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> . Você verá que esta tag <i /> está vazia. Você pode ver aqui que o nome do ícone é caret-down .
2. Encontre este ícone em uma pasta @ant-design/icons/lib , escolha a pasta filled ou outline (dependendo de qual tipo de ícone você precisa) e adicione uma nova importação a icons.js assim :

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

Não é a melhor abordagem, mas funciona conforme o esperado. Esperamos que a equipe de desenvolvimento de formigas conserte isso em lançamentos futuros para que possamos evitar esses hacks sujos.

Oi !

Alguma notícia sobre este assunto? É um candidato para o próximo lançamento do antd?
Tentei algumas coisas para resolver este problema ( webpack-ant-icon-loader , babel-import-plugin ) mas nenhuma delas funcionou.

Obrigado!

Realmente preciso de uma solução para isso, o tamanho do pacote é demais!

@zlab @nuintun @anjmao para obter ajuda, pergunte https://zlab.github.io/report.html por qual plug-in esta página foi gerada, quero analisar meu projeto

Eu encontrei, é webpack-bundle-analyser

Apenas modal é usado, mas 500k icon lib está empacotado

Já faz mais de meio ano, não houve progresso?

Abandonando antd, uma questão tão importante não é marcada como importante ...

Agora carregue os arquivos que devem ser compactados em ícones sob demanda, 500kb

adiciono um alias no meu webpack e exporto o ícone em icon.ts, mas quando executo npm start , ocorre um erro

ERROR in ./node_modules/antd/lib/icon/index.js
Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in 'xxx\node_modules\antd\lib\icon'

esta é a minha configuração de resolução do webpack

resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/utils/antdIcon.ts',
        ),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      plugins: [
        new TsConfigPathsPlugin({
          tsconfig: path.resolve(__dirname, '../tsconfig.json'),
        }),
      ],
    },

1. O ícone ícone não é usado no projeto, por que existe um pacote, por favor me ajude?

2. Usar webpack externals = {'antd': 'antd'} não funciona bem. Você ainda consegue ver antd na análise do pacote?

1. O ícone ícone não é usado no projeto, por que existe um pacote, por favor me ajude?
2. Usar webpack externals = {'antd': 'antd'} não funciona bem. Você ainda consegue ver antd na análise do pacote?

@wiiler

1. Consulte isso, pode ser um componente que faz referência ao ícone

   https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
   Na verdade, os componentes internos que usam <Icon /> , como <DatePicker /> , <Select /> etc., serão totalmente introduzidos quando usados.

2. Se você usar recursos externos, você precisa desligar o plugin babel-plugin-import

adiciono um alias no meu webpack e exporto o ícone em icon.ts, mas quando executo npm start , ocorre um erro

ERROR in ./node_modules/antd/lib/icon/index.js
Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in 'xxx\node_modules\antd\lib\icon'

esta é a minha configuração de resolução do webpack

resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/utils/antdIcon.ts',
        ),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      plugins: [
        new TsConfigPathsPlugin({
          tsconfig: path.resolve(__dirname, '../tsconfig.json'),
        }),
      ],
    },

Eu recomendo essas duas práticas

• usar alias
• usar plugin

@ As3ass1n
Por que '../src/utils/antdIcon.ts' tem um '..'? A configuração do webpack está localizada em um diretório separado?

1. O ícone ícone não é usado no projeto, por que existe um pacote, por favor me ajude?
2. Usar webpack externals = {'antd': 'antd'} não funciona bem. Você ainda consegue ver antd na análise do pacote?

@wiiler

1. Consulte isso, pode ser um componente que faz referência ao ícone
   > # 12011 (comentário)
   > Na verdade, os componentes integrados que usam <Icon /> , como <DatePicker /> , <Select /> etc., serão totalmente introduzidos quando usados.
2. Se você usar recursos externos, você precisa desligar o plugin babel-plugin-import

Compreendido , obrigado

adiciono um alias no meu webpack e exporto o ícone em icon.ts, mas quando executo npm start , ocorre um erro

ERROR in ./node_modules/antd/lib/icon/index.js
Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in 'xxx\node_modules\antd\lib\icon'

esta é a minha configuração de resolução do webpack

resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/utils/antdIcon.ts',
        ),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      plugins: [
        new TsConfigPathsPlugin({
          tsconfig: path.resolve(__dirname, '../tsconfig.json'),
        }),
      ],
    },

Eu recomendo essas duas práticas

• usar alias
• usar plugin

@ As3ass1n
Por que '../src/utils/antdIcon.ts' tem um '..'? A configuração do webpack está localizada em um diretório separado?

desculpe, é minha culpa. escrevi um nome de arquivo errado e agora resolvi usar um alias. obrigado

Este problema não será resolvido no futuro? Aumenta em quase 400 k

Olá, é possível fornecer uma estimativa de tempo aproximada de quando o problema será resolvido?

490kb extras no pacote tornam Icon s praticamente inutilizáveis. Este é um problema muito grande. Existe alguma correção temporária que possamos fazer até que você lance uma correção para isso?

@smddzcy leu o tópico?

@ schester44 Com o tópico escrito em uma variedade de idiomas e ... Eu estava prestes a dizer alfabetos, ou mesmo silabários, mas acho que tenho que ir tão longe quanto os scripts ... Atrevo-me a dizer que é muito difícil para qualquer pessoa cuja linguística é limitada a idiomas normalmente restrito a alfabetos derivados de etruscos para ficar totalmente claro o que está acontecendo.

Olá pessoal, tive sucesso com a implementação do pacote purched-antd-icons muito simples, no entanto, é totalmente manual; Estimo 3-4 horas mexendo ao redor para reconciliar ícones ausentes inspecionando o DOM. Pretendemos implementar isso no último estágio de nosso ciclo de desenvolvimento / lançamento. Para nossos aplicativos empacotados / offline primeiro, o único problema é se aproximar da limitação muito modesta de RAM do iOS WKWebview. Para nós, se os perfis móveis iOS continuarem a não exibir artefatos, vamos ignorar isso completamente. Visto que nenhum progresso foi feito aqui, minha preferência seria ver esta nova Icon API arquivada e a API antiga devolvida.

@ afc163 ,

O que você escreveu em 15 de setembro de 2018 parece uma boa solução (tradução do Google abaixo). Você pode fornecer uma estimativa de quando isso será implementado?

Preserve o uso antigo e adicione mensagem de aviso e migração no console.

import { Icon } from 'antd';
<Icon type="star" />

Provedor de nova API como:

import Star from 'antd/icons/Star';
import Setting as SettingIcon from 'antd/icons/Setting';

<Star />
<SettingIcon />

E também capaz de balançar:

import { Icon: { Star, Setting } } from 'antd';

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

De acordo com o roteiro V4 , isso seria corrigido no quarto trimestre deste ano.

Legal: smiley:

Vào Th 7, 1 thg 6, 2019 vào lúc 01:51 Zach Guo [email protected]
đã viết:

De acordo com o roteiro V4
https://github.com/ant-design/ant-design/issues/16911 , isso seria
fixado no quarto trimestre deste ano.

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/ant-design/ant-design/issues/12011?email_source=notifications&email_token=ADKDE4RXC63VER4GSUMG5Q3PYFXT7A5CNFSM4FS3WEAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWWCRFY#issuecomment-497821847 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
.

ICYMI, os documentos do

"⚠️ Sobre o tamanho do pacote extra trazido por todos os ícones SVG que importamos na 3.9.0, forneceremos uma nova API para permitir que os desenvolvedores importem ícones conforme sua necessidade, você pode rastrear # 12011 para progresso posterior.
Antes disso, você pode usar o plugin webpack da comunidade para

A última parte é legal, dividir o código e carregar os ícones de forma assíncrona ou, no meu caso, dividir o código e não usar os ícones.

O funcionário desistiu disso? Há quanto tempo isso ainda não foi resolvido?

O funcionário desistiu disso? Há quanto tempo isso ainda não foi resolvido?

@ zhe-he

Nenhuma solução clara!

Este funcionário realmente não vai resolver o problema?Um pacote tão grande e desnecessário, realmente persuade você a deixar

@DemoHu

@tibotiber obrigado pelo link para o carregador de ícones, o pedaço de ícone ainda é inserido no index.html? qualquer sugestão sobre como remover o fragmento de ser inserido de index.html

@Jasan-s Suponho que isso dependeria de como você constrói os pacotes e de onde usa os ícones. Por exemplo, estou no último create-react-app, que configura a divisão de código para mim e me certifico de não import ícones em qualquer lugar da árvore de componentes do pacote principal (nunca uso ícones) .

A solução alternativa de @tobiaslins não está funcionando para mim, diz Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' Alguém pode me indicar como corrigi-lo? obrigado

@marcosfede eu uso customize-cra, tem como não ejetar? Eu ainda tenho esse erro

./node_modules/antd/lib/icon/index.js
Cannot find module: '@ant-design/icons/lib/dist'. Make sure this package is installed.

You can install this package by running: yarn add @ant-design/icons/lib/dist.

@marcosfede Oh! foi mal. Agora eu entendi.

Tenho uma ideia 💡 @ afc163

Podemos usar o ícone svg e, em seguida, manter o uso anterior:

<Icon type='search' />

Em seguida, através do plug-in babel para:

import _searchIcon from '@ant-design/icons/lib/dist/search.svg'
<Icon component={ _searchIcon } />

// 或者直接转化成
<Icon component={ require('@ant-design/icons/lib/dist/search.svg') } />

Depois, você pode usar a agitação de árvore para empacotar apenas os ícones usados.

Quanto ao tipo dinâmico, basta usá-lo caso não seja compatível. Ele pode ser usado para necessidades dinâmicas:

import * as AllIcons from '@ant-design/icons/lib/dist'

<Icon component={ AllIcons[type] } />

Na verdade, a função real do tipo original é removida e todo o uso do tipo é convertido em uso do componente.

Tenho uma ideia 💡 @ afc163

Podemos usar o ícone svg e, em seguida, manter o uso anterior:

<Icon type='search' />

Em seguida, através do plug-in babel para:

import _searchIcon from '@ant-design/icons/lib/dist/search.svg'
<Icon component={ _searchIcon } />

// 或者直接转化成
<Icon component={ require('@ant-design/icons/lib/dist/search.svg') } />

Depois, você pode usar a agitação de árvore para empacotar apenas os ícones usados.

Quanto ao tipo dinâmico, basta usá-lo caso não seja compatível. Ele pode ser usado para necessidades dinâmicas:

import * as AllIcons from '@ant-design/icons/lib/dist'

<Icon component={ AllIcons[type] } />

Na verdade, a função real do tipo original é removida e todo o uso do tipo é convertido em uso do componente.

A ideia é a mesma da transformação 4.0, mas o uso de escape de babel obviamente reduz a carga de trabalho, e apenas mudanças dinâmicas precisam ser tratadas manualmente.

Eu escrevi temporariamente um plug-in do Babel depois de postar os comentários na noite passada. Eu tentei localmente e foi totalmente viável @ afc163 ,

const template = require('@babel/template')

function genRequireEpx (name) {
  return template.expression(`require('@ant-design/icons/lib/dist/${name}.svg')`)()
}

module.exports = function ({ Plugin, types: t }) {
  return {
    visitor: {
      // <Icon type='search' />
      JSXElement({ node }, { opts: { patterns = [] } }) {
        const { name, attributes } = node.openingElement
        if (!(name && name.name === 'Icon') || !attributes || !attributes.length) {
          return
        }
        attributes.forEach(attr => {
          if (attr.name.name === 'type') {
            attr.name.name = 'component'
            attr.value = genRequireEpx(attr.value.value)
          }
        })
      },
      // React.createElement(Icon, { type: "search" }
      CallExpression({ node }, { opts: { patterns = [] } }) {
        const cal = node.callee
        const arg = node.arguments
        if (!(cal.object && cal.object.name === 'React' &&
            cal.property && cal.property.name === 'createElement' &&
            arg[0] && arg[0].name === 'Icon' &&
            arg[1] && arg[1].properties
          )) {
          return
        }
        arg[1].properties.forEach(obj => {
          if (obj.key.name === 'type') {
            obj.key.name = 'component'
            obj.value = genRequireEpx(obj.value.value)
          }
        })
      },
    }
  };
}

A função real das regras de conversão descendente e do tipo de castração precisa ser melhorada.

algum progresso ?

Veja a solução para este pacote no código-fonte do ícone oficial e empacote o ícone em um js separadamente
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4 trabalhando em andamento # 16911

Você pode tentar a versão alfa do antd 4 agora

https://github.com/ant-design/ant-design/releases/tag/4.0.0-alpha.2

Puxe o ícone para apoiar o movimento da árvore.

Este funcionário realmente não vai resolver o problema?Um pacote tão grande e desnecessário, realmente persuade você a deixar

Na verdade, essa coisa tem o mesmo tom que afc163 tinha no Natal. O subtexto é "Eu gosto, você gosta ou não"

@ lizy0329 4.0.0-alpha.2 foi alterado. Envolve energia e arranjo de tempo. Se você estiver com pressa, o fork muda você mesmo ...

@ lizy0329 consulte https://github.com/ant-design/ant-design/pull/18217

Não legal, realmente.

@ lizy0329 ver # 18217

Não legal, realmente.

Não é legal, realmente. Mas quando isso é alterado, as consequências devem ser imaginadas.A mesma tonalidade de HO! HO! Não pode ser comparada sem comparação.

@ lizy0329

其实 这 东西 跟 afc163 在 圣诞节 的 所作所为 是 一样 的 调 性, 潜 台词 是 “老子 喜欢, 你 爱 用 不用”

Por que usar SVG em vez de fonte?
Use componentes React SVG para ícones em vez de uma fonte de ícone

Uma empresa já fez isso antes?
Distribuição de octicons com SVG

Qual é o problema agora?
O ícone anterior usa fonte, carregada por cdn, o tamanho não será refletido no fornecedor. Não há um cdn padrão (você ainda pode colocar todos os ícones em um pedaço e usar seu próprio cdn para hospedar) para hospedar o ícone svg, esta parte será refletida no fornecedor.
O que é discutido nesta edição é como sacudir a árvore, como carregar o ícone sob demanda.

Se você não pode tolerar isso, carregue todos os ícones de uma vez, lá (no problema) existem pelo menos três maneiras de evitar.

@ afc163
Eu acho que o log de alterações de 3.9 é muito hostil. Não explicou por que mudou para SVG. Quais são as desvantagens da fonte e quais são seus benefícios?

A propósito, eu me oponho ao uso de svg (como este, viewBox até 1024 * 1024), que causa um aumento demorado nas operações da camada composta.

@muzea https://ant.design/components/icon/#SVG -icons

@ afc163 É muito curto e não é suficiente para explicar por que é necessário mudar para SVG. O oficial não deu uma explicação suficientemente conspícua para explicar por que usar o svg e como carregar o ícone sob demanda, acho que essa é uma das razões para muitas emoções negativas nesta edição.

@muzea obrigado pela sugestão
viewBox impacto de svg no desempenho de renderização de svg其 子path desenho do caminho Vá em frente. É este último que realmente leva ao aumento do funcionamento da camada de síntese.
Se isso significar que o ícone svg si (largura e altura) é muito grande, um ícone grande realmente trará a complexidade do desenho, mas o coeficiente de correlação é relativamente baixo. O que pode ser garantido é que no processo de processamento do ícone obtido do designer, a experiência cognitiva do usuário será melhorada tanto quanto possível (o ícone não está muito deformado), e a compressão do caminho e a otimização relacionada serão realizadas com a maior precisão aproximada. Na verdade, se você quiser garantir que o navegador seja renderizado no estágio de camada de composição, o esquema svg sprite será considerado, mas isso geralmente adiciona efeitos colaterais à página (adicionar definições relacionadas no cabeçalho ou outras posições), o que é muito importante para manutenção e Para bibliotecas com requisitos de alta versatilidade, isso pode não ser considerado.

Em que circunstâncias as pessoas odeiam svg como uma solução de ícone de aplicativo da web que merece reconhecimento?

• Usuários do IE8
• A condição de rede do usuário tem sido boa
• Contanto que o ícone possa ser visto (não se preocupe com a clareza)
• Ícones monocromáticos são sempre suficientes agora e no futuro

A falta de acompanhamento oficial sobre este assunto, de fato, a pessoa correspondente ao serviço não resolveu o problema, mas agora não resolve.

@ lizy0329 O quão malicioso uma pessoa está disposta a especular sobre o comportamento dos outros, os outros não têm o direito de interferir. Mas esta pessoa ainda pode mencionar um pr

@HeskeyBaozi
A parte do ícone do documento tem desempenho muito baixo no meu navegador.

Na verdade, o cromo no osx, quando a página tiver muito ícone antd, o desempenho ficará muito ruim.

Talvez babel-plugin-macros possa nos ajudar a resolver este problema?

@ lizy0329 O quão malicioso uma pessoa está disposta a especular sobre o comportamento dos outros, os outros não têm o direito de interferir. Mas esta pessoa ainda pode mencionar um pr

Isso não é especulação maliciosa, é chamado de "busca de semelhança". HO! HO! O incidente não aconteceu por acidente, deve ser um acúmulo de longo prazo. Não me caluniei, só quero me desenvolver melhor e pensar nas consequências e soluções de cada atualização.

Então, quando posso usar isso? Usei antd no projeto e não fiz nada, então importei um Button, e o pacote empacotado mudou de 177k para 1,1m ... O analisador olhou para ele e eram ícones também. grande

Existe uma maneira de remover os ícones do pacote quando você não o está usando?

Estou usando override com create-react-app. Igual a:

fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
}),

Vocês devem verificar @ qaiser110 's solução para antd@3 .

O tamanho do pacote é enorme porque antd source faz uma importação curinga de todos os ícones . A solução no post vinculado acima é usar o webpack resolve.alias para redirecionar @ant-design/icons/lib/dist import para um arquivo personalizado que tem ícones escolhidos a dedo em @ant-design/icons .

É melhor do que ter um pacote grande, mas ainda não é o ideal porque você precisa selecionar os ícones manualmente. Embora você geralmente escolha apenas a dedo conforme necessário (quando o ícone está faltando). Para descobrir o que precisa ser escolhido, você pode pesquisar em antd e em seu código-fonte os ícones usados.

Seria útil se tivéssemos um arquivo compartilhado ou pacote de ícones selecionados da fonte antd . Dessa forma, só temos que nos preocupar em escolher nossa própria fonte. Aqui está uma ideia geral . Poderíamos agrupar os ícones que um componente antd exporta e, em vez de olhar para a origem do antd para selecionar manualmente, você poderia apenas export * from 'antd-cherry-pick-icons/icon' em seu arquivo de ícone personalizado. Isso poderia ser feito com um esforço da comunidade para mantê-lo o mais atualizado possível com a fonte antd .

@LucasBassetti , tem certeza que não precisa de ícones? Mesmo se você não estiver usando <Icon /> diretamente, alguns componentes antd usam ` . Por exemplo, <Alert /> .

Observe que o antd 4.0 (em alfa) corrige esse problema não usando uma importação de curinga . Em vez disso, eles selecionam as importações de cada componente .

Solução temporária que funcionou para mim até ser corrigida (antd> = 3,9)

1. Adapte o webpack para resolver os ícones de maneira diferente. Na configuração do seu webpack:

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

1. Crie icons.js na pasta src/ ou onde quiser. Certifique-se de que corresponde ao caminho do alias!
   Neste arquivo você define quais ícones o antd deve incluir! Eu só precisava do ícone para baixo para o componente Selecionar do antd.

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

Também é possível fazer isso com react-app-rewire (modificações criar-reagir-app) dentro de config-overwrites.js

Se alguém estiver procurando por config-overwrites.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');
const rewireUglifyjs = require('react-app-rewire-uglifyjs');
const path = require('path');


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@ant-design/icons/lib/dist$']: path.resolve(__dirname, './src/client/icons.js')
  }),
  rewireUglifyjs,
  rewireCompressionPlugin
);

O caminho dos ícones @ant-design/icons/lib/outline/DownOutline

Mark presta muita atenção a este problema. Atualmente, o antd 3 é usado e um botão é introduzido. Basta vincular o momento e o ícone. O arquivo do ícone tem mais de 500k de tamanho.

Os problemas do momento @DemonCloud podem ser prestados atenção em https://github.com/ant-design/babel-plugin-import/issues/352

Para pessoas que usam o create-react-app via react-app-rewired .

config-overrides.js

Const  path  =  require ( ' path ' );

/* config-overrides.js */
 module . exports  =  function  override ( config , env ) {
   let alias = ( config . resolve . alias  || {});
  Alias[ ' @ant-design/icons/lib/dist$ ' ] =  path . resolve ( __dirname , " ./src/icons.js " );

  Config . resolve . alias  = alias;

  Return config;
}

icons.js Gist

Não sei por que, mas depois de usar seu icons.js, meu pacote aumenta em 600 KB.

Talvez porque eu tenha que usar este pacote em meu código https://www.npmjs.com/package/html-webpack-inline-source-plugin

Reduzi o tamanho do meu pacote em 500 KB editando config-override.js assim:

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';

Antes

Depois de

Reduzi o tamanho do meu pacote em 500 KB editando config-override.js assim:

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';

Antes

Depois de

Obrigado! Isso me ajudou!

O caminho dos ícones @ant-design/icons/lib/outline/DownOutline

Ei, você é capaz de encontrar alguma solução. Eu também recebo o mesmo erro

Como remover @ ant-design se você não usar o ícone embutido ?

Pelo que vejo aqui, são apresentadas apenas soluções alternativas. Não seria muito mais fácil e limpo que os componentes apenas importassem o ícone que usam? Isso resolveria a causa raiz e espero que não seja muito difícil se estivermos usando importações nomeadas, não é?

@Nomeasmo , deve ser corrigido na v4, conforme roteiro .

Seria bom se o 3.X tivesse uma correção. Não pretendo atualizar para 4, se possível.

Esperando migrar inteiramente do Ant algum dia, porque o CSS para coisas simples como botões é MUITO complicado, a biblioteca carece de recursos de acessibilidade e até mesmo atualizações de patch são preenchidas com cerca de 1.000 commits. Isso é churn demais para o meu gosto.

marca

Para pessoas que usam o create-react-app via react-app-rewired .

config-overrides.js

const  path  =  require ( ' path ' );

/ * config-overrides.js * /
 module . exports  =  function  override ( config , env ) {
   let alias = ( config . resolve . alias  || (});
  alias [ ' @ ant-design / icons / lib / dist $ ' ] =  path . resolve ( __dirname , " ./src/icons.js " );

  config . resolve . alias  = alias;

  return config;
}

icons.js gist

Ainda não funciona, o tamanho do pacote para ícones é alto

Parece que o tremor de árvore para ícones não funciona fora da caixa na v4.0.0-beta.0.
Alguém conseguiu reduzir o pacote de ícones? Você pode compartilhar sua configuração?

Mais tarde, tentei v4.0.0-beta.1 e removi o pacote @ant-design/compatible , todos os ícones ainda estão incluídos no pacote.

Para pessoas que usam o create-react-app via react-app-rewired .
config-overrides.js

const  path  =  require ( ' path ' );

/ * config-overrides.js * /
 module . exports  =  function  override ( config , env ) {
   let alias = ( config . resolve . alias  || (});
  alias [ ' @ ant-design / icons / lib / dist $ ' ] =  path . resolve ( __dirname , " ./src/icons.js " );

  config . resolve . alias  = alias;

  return config;
}

icons.js gist

Ainda não funciona, o tamanho do pacote para ícones é alto

você precisa de um arquivo icons.js para incluir quais ícones você precisa importar, como https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531

Solução temporária que funcionou para mim até ser corrigida (antd> = 3,9)

1. Adapte o webpack para resolver os ícones de maneira diferente. Na configuração do seu webpack:

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

1. Crie icons.js na pasta src/ ou onde quiser. Certifique-se de que corresponde ao caminho do alias!
   Neste arquivo você define quais ícones o antd deve incluir! Eu só precisava do ícone para baixo para o componente Selecionar do antd.

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

Também é possível fazer isso com react-app-rewire (modificações criar-reagir-app) dentro de config-overwrites.js

Se alguém estiver procurando por config-overwrites.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');
const rewireUglifyjs = require('react-app-rewire-uglifyjs');
const path = require('path');


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@ant-design/icons/lib/dist$']: path.resolve(__dirname, './src/client/icons.js')
  }),
  rewireUglifyjs,
  rewireCompressionPlugin
);

Diminuiu meu pacote de 700kb para 200kb, obrigado

Parece que o tremor de árvore para ícones não funciona fora da caixa na v4.0.0-beta.0.
Alguém conseguiu reduzir o pacote de ícones? Você pode compartilhar sua configuração?

Mais tarde, tentei v4.0.0-beta.1 e removi o pacote @ant-design/compatible , todos os ícones ainda estão incluídos no pacote.

Tendo o mesmo problema no 4.0.0-rc.0, apesar de minhas importações de ícones atualizados

@jhockett Eu tive o mesmo problema! Descobri que algumas de minhas importações estavam interrompendo o processo de trepidação. Por exemplo: _import Text from 'antd / lib / typography / Text'; _
Substituí-o por _import {Typography} from 'antd'; _, e os ícones saíram do meu pacote!

@jhockett Eu tive o mesmo problema! Descobri que algumas de minhas importações estavam interrompendo o processo de trepidação. Por exemplo: _import Text from 'antd / lib / typography / Text'; _
Substituí-o por _import {Typography} from 'antd'; _, e os ícones saíram do meu pacote!

Todas as minhas importações de design de formigas usam a sintaxe que você mencionou: _import {Typography} from 'antd'; _
então este não parece ser o meu problema, mas talvez outras pessoas possam ser afetadas por ele!

Solução temporária que funcionou para mim até ser corrigida (antd> = 3,9)

1. Adapte o webpack para resolver os ícones de maneira diferente. Na configuração do seu webpack:

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

1. Crie icons.js na pasta src/ ou onde quiser. Certifique-se de que corresponde ao caminho do alias!
   Neste arquivo você define quais ícones o antd deve incluir! Eu só precisava do ícone para baixo para o componente Selecionar do antd.

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

Também é possível fazer isso com react-app-rewire (modificações criar-reagir-app) dentro de config-overwrites.js

Se alguém estiver procurando por config-overwrites.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');
const rewireUglifyjs = require('react-app-rewire-uglifyjs');
const path = require('path');


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@ant-design/icons/lib/dist$']: path.resolve(__dirname, './src/client/icons.js')
  }),
  rewireUglifyjs,
  rewireCompressionPlugin
);

Diminuiu meu pacote de 700kb para 200kb, obrigado

quando eu uso isso, não funciona, o que posso fazer a seguir:

Para quem usa Parcel.js, fazer o seguinte funcionou para mim:

npm install purched-antd-icons

E adicione package.json :

  "alias": {
    "@ant-design/icons": "purched-antd-icons"
  }

Parece que o tremor de árvore para ícones não funciona fora da caixa na v4.0.0-beta.0.
Alguém conseguiu reduzir o pacote de ícones? Você pode compartilhar sua configuração?

Mais tarde, tentei v4.0.0-beta.1 e removi o pacote @ant-design/compatible , todos os ícones ainda estão incluídos no pacote.

Resolvi meu problema alterando a configuração de babel-plugin-import assim .

  {
    "libraryName": "antd",
+   "libraryDirectory": "es",
    "style": true
  },

Inspirado em https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531, consegui funcionar com antd@4 (https://github.com/ant-design/ant -design / edições / 20661).

Adicione o seguinte resolve.alias à sua configuração webpack (também deve funcionar com customize-cra ):

// [...]
config.resolve.alias = {
    "@ant-design/icons$": resolve(__dirname, "path/to/your/src/icons.tsx")
};
// [...]

Seu icons.tsx deve ser parecido com este:

/**
 * Provide all needed icons from antd. This file is associated to the webpack.config.js resolve.alias.
 */

export { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";

Por exemplo, o ícone LoadingOutlined é necessário para o componente Button . Adicione todos os ícones necessários nesse arquivo. E você também pode reutilizar esse arquivo. Mas isso depende de você, porque você também pode usar a importação direta de @ant-design/icons :

import { LoadingOutlined } from "./icons";
import { LoadingOutlined } from "@ant-design/icons";

A solução sugerida por icons.tsx ? Por exemplo: eu tenho elementos de formulário como InputNumber e Select dropdown. Alguma dica, por favor?

Estou me perguntando qual é a maneira correta de saber quais ícones devo incluir em icons.tsx ? Por exemplo: eu tenho elementos de formulário como InputNumber e Select dropdown. Alguma dica, por favor?

@ pradeepb6 Imagine que você incluiu um novo componente em sua fonte de antd . O Webpack tentará resolver os ícones, mas não consegue encontrar uma exportação com nome porque você nunca a definiu em seu icons.tsx . Você receberá um aviso como este:

Depois disso, você sabe quais ícones precisam ser exportados em seu icons.tsx para que o componente funcione conforme o esperado. 🙂

@matzeeable Obrigado. Eu tentei isso. Mas recebo erros conforme mostrado na imagem. O código pode ser encontrado aqui .

Eu já escrevi no github babel-plugin-import, mas talvez alguém aqui tenha tido esse problema devido a mais pessoas estarem aqui. Eu migrei para o V4 e estou observando um grande tamanho de pacote.
Quando adicionei "libraryDirectory": "es" conforme escrito em https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378, estou observando o seguinte erro:

[ error ] /home/maciek/Dokumenty/websites/bookingapp/frontend/node_modules/antd/es/notification/index.js:3
import * as React from 'react';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.antd/es/notification (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10975:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../lib/withData.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:8200:78)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10614:71)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10754:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at 

Estou usando next.js btw. Deps:

    "@ant-design/compatible": "0.0.1-rc.1",
    "@ant-design/icons": "^4.0.0-rc.0",
    "antd": "^4.0.0-rc.3",
    "babel-plugin-import": "^1.13.0",

Qualquer um?

@ afc163 recompensou $ 142,10 para Veja em IssueHunt

• : bolsa de dinheiro: Depósito total: $ 203,00
• : tada: Recompensa do repositório (20%): $ 40,60
• : chave: Taxa de serviço (10%): $ 20,30

Eu encontrei o mesmo problema que @chemicalkosek , e [email protected] + next.js está atualmente resolvido por esm.

yarn add esm

"scripts": {
    "dev": "NODE_OPTIONS=\"-r esm\" next",
    "build": "NODE_OPTIONS=\"-r esm\" next build",
    "start": "NODE_OPTIONS=\"-r esm\" next start"
}

Espero que ajude outras pessoas :)

@ i-tengfei Uau, está funcionando! Muito obrigado!

Para antd @ 4 , agora estamos usando um pacote próprio, que sobrescreve o pacote @ ant-design / icons e substitui os ícones antd por ícones incríveis.

Ele fornece apenas os ícones que o Antd requer. E reduziu o tamanho do pacote para nós significativamente, pois não conseguimos ativar o treehaking e, portanto, todo o pacote an-design / icons foi incluído.

https://github.com/DavidSichau/antd-fa-icons

Atualize para [email protected] , este problema foi resolvido perfeitamente.

https://github.com/ant-design/ant-design/issues/20661

Para quem usa Parcel.js, fazer o seguinte funcionou para mim:

npm install purched-antd-icons

E adicione package.json :

  "alias": {
    "@ant-design/icons": "purched-antd-icons"
  }

Obrigado, funciona!

@ afc163 @yesmeck define o ícone de acordo com os dados retornados pelo fundo, como o front end carrega de forma assíncrona, por exemplo, a string do ícone retornada pelo fundo é AppstoreOutlined , minha abordagem é a seguinte:

const iconStr = res.icon // 服务器返回的数据假如
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

Mas agora é impossível compilar diretamente.O carregamento dinâmico parece não funcionar

@ afc163

Atualize para [email protected] , este problema foi resolvido perfeitamente.

20661

Não tenho certeza se está resolvido. Ele ainda contém todos os pacotes de ícones no pacote:
Tenho todos os ícones importados desta forma.
Estou usando "@ ant-design / icons": "^ 4.0.6" e webpack 4.43.0
tem esta configuração também

 {
    "libraryName": "antd",
+   "libraryDirectory": "es",
    "style": true
  },

import {DeleteOutlined, EditOutlined, WarningTwoTone} from "@ant-design/icons";

@ afc163 @yesmeck define o ícone de acordo com os dados retornados pelo fundo, como o front end carrega de forma assíncrona, por exemplo, a string do ícone retornada pelo fundo é AppstoreOutlined , minha abordagem é a seguinte:

const iconStr = res.icon // 服务器返回的数据假如
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

Mas agora é impossível compilar diretamente.O carregamento dinâmico parece não funcionar

Eu acho que deveria ser Mude para {Icon}.
Se você postar a mensagem de erro, poderá avaliar melhor a causa.

Usando babel-plugin-import , diminuí o tamanho de 500kb +

['import', { 
  libraryName: '@ant-design/icons', 
  libraryDirectory: '', // defaults to 'lib'
  camel2DashComponentName: false  // defaults to true
}]

import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons'

@thangbn

  [
       "import",
       {
         "libraryName": "@ant-design/icons",
         "libraryDirectory": "es/icons",
         "camel2DashComponentName": false
      },
       "@ant-design/icons"

  ],

@ mit123suki @nwoeddie Obrigado por sua sugestão, tentei os dois, mas ainda não

const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
var LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const path = require("path");

let dev = {
  mode: "development",
  optimization: {
    usedExports: true,
    noEmitOnErrors: true
  },
  entry: [
    path.resolve(__dirname, "./src/index.tsx")
  ],
  output: {
    path: path.resolve(__dirname, "./public"),
    publicPath: "/",
    filename: "[name].js"
  },
  target: "web",
  devServer: {
    // writeToDisk: true,
    historyApiFallback: true, // catch all 404
    port: 8080,
    hot: true,
    proxy: {
      "/backend": {
        target: "http://localhost:4000",
        pathRewrite: { "^/backend": "" }
      },
      "/runner": {
        target: "http://localhost:4001",
        pathRewrite: { "^/runner": "" }
      }
    }
  },
  devtool: "cheap-module-eval-source-map",
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom"
    },
    extensions: [".js", ".jsx", ".less", ".tsx", ".ts"]
  },
  plugins: [
    new LodashModuleReplacementPlugin(),
    new AntdDayjsWebpackPlugin(),
    new CopyWebpackPlugin([{ from: path.join(__dirname, "./static"), to: "./" }]),
    new ProgressBarPlugin(),
    new ForkTsCheckerWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env.ENV": JSON.stringify("dev"),
    }),
    new BundleAnalyzerPlugin({
      "openAnalyzer": true,
      analyzerPort: 8889
    })
  ],
  module: {
    rules: [
      {
        test: /\.(tsx|ts)$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true
            }
          }
        ],
        exclude: /node_modules/
      }
      , {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            "presets": [
              [
                "@babel/preset-env",
                {
                  "targets": "defaults",
                  "modules": false
                }
              ],
              [
                "@babel/preset-react"
              ]
            ],
            plugins: [
              "@babel/plugin-transform-runtime",
              ["import",
                { "libraryName": "antd", "style": false, "libraryDirectory": "es" }, "antd"],
              ["import",
                {
                  "libraryName": "@ant-design/icons",
                  // "style": false,
                  "libraryDirectory": "es/icons",
                  "camel2DashComponentName": false
                }, "@ant-design/icons"],
              "react-hot-loader/babel"
            ]
          }
        }
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true,
              javascriptEnabled: true
            }
          }]
      },
      {
        test: /\.(png|jpg|gif|svg|ico)$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  },

};

module.exports = dev;

@ afc163 @yesmeck define o ícone de acordo com os dados retornados pelo fundo, como o front end carrega de forma assíncrona, por exemplo, a string do ícone retornada pelo fundo é AppstoreOutlined , minha abordagem é a seguinte:

const iconStr = res.icon // 服务器返回的数据假如
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

Mas agora é impossível compilar diretamente.O carregamento dinâmico parece não funcionar

Acho que deveria ser alterado para {Icon}.
Se você postar a mensagem de erro, poderá avaliar melhor a causa.

Failed to compile.

./node_modules/@ant-design/icons/dist/icons/index.d.ts
Module not found: Can't resolve './AccountBookFilled' in '/Users/andy/Projects/shop-platform/node_modules/@ant-design/icons/dist/icons'

@Xezzon mostra diretamente que o primeiro módulo de ícone não foi encontrado. Tentei adicionar a configuração babel-plugin-import, mas ainda não funciona.

@nwoeddie

  [
       "import",
       [
         { libraryName: 'antd', style: true },
         {
         "libraryName": "@ant-design/icons",
         "libraryDirectory": "es/icons",
         "camel2DashComponentName": false
      }] 
  ],

"babel-loader": "^ 7.1.5"
"babel-plugin-import": "^ 1.13.0"

oi, nwoeddie ~ !, minha configuração não está funcionando, eu dividi as opções de importação em simples, mas também está fora de uso; posso aprender a configuração completa?

este aritcle pode resolver o problema: https://www.cnblogs.com/fulu/p/13255538.html

@nwoeddie

  [
       "import",
       [
         { libraryName: 'antd', style: true },
         {
         "libraryName": "@ant-design/icons",
         "libraryDirectory": "es/icons",
         "camel2DashComponentName": false
      }] 
  ],

"babel-loader": "^ 7.1.5"
"babel-plugin-import": "^ 1.13.0"

oi, nwoeddie ~ !, minha configuração não está funcionando, eu dividi as opções de importação em simples, mas também está fora de uso; posso aprender a configuração completa?

Esta não é a sintaxe correta para o babel 7. O plugin de importação não suporta um array. O caminho certo:

    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "ant"],
    ["import", {
      "libraryName": "@ant-design/icons",
      "libraryDirectory": "es/icons",
      "camel2DashComponentName": false
    }, "ant-design-icons"],