web-dev-qa-db-fra.com

fourmi design

J'utilise et la bibliothèque de conception pour mon application de réaction.

Et j’ai fait face à d’importantes importations qui me font mal (aujourd’hui 1,1 mb en version réduite à cause de ant-design lib).

Comment puis-je importer différemment des composants antd à travers toute mon application?

 enter image description here

METTRE À JOUR:

Il semble que antd possède des modules énormes ou non optimisés . Ici, la seule différence est l’importation du module Datepicker, et .. boom! + presque 2Mo (en paquet de développement ofc.)

 enter image description here

reactjsantd
9
WebArtisan

Ces quelques composants ne sont certainement pas 1.2M ensemble. On dirait que vous importez toute la bibliothèque quand vous n'avez besoin que de quelques composants.

Pour que antd ne charge que les modules nécessaires, vous devez utiliser babel-plugin-import . Consultez le journal de votre console pour connaître l'avertissement "Vous utilisez un package complet d'antd" décrit sur ce lien.

Consultez les docs pour Create-React-App pour savoir comment l'implémenter si vous utilisez CRA. 

1
Jesper We

Pour le moment, une grande partie de antd dist est des icônes svg.
Il n’existe pas encore de moyen officiel de régler ce problème ( vérifiez le problème sur github ).

Mais une solution de contournement existe.

  1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre config de webpack:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin des alias!
    Dans ce fichier, vous définissez les icônes à inclure.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Il est également possible de faire cela avec react-app-rewire (modifications create-rea-app) dans config-overwrites.js

0
Daydreaming Duck

Essayez d'utiliser code split en utilisant webpack et réagissez routeur. Cela vous aidera à charger les modules de manière asynchrone. C’est la seule solution qui m’a aidé à améliorer le temps de chargement des pages lors de l’utilisation de Ant Framework.

0
Sivadass N

En regardant les docs https://ant.design/docs/react/getting-started#Import-on-Demand Il est recommandé d’importer des composants individuels à la demande .. , vous pouvez essayer de remplacer 

import { Button} from 'antd'

avec

import Button from 'antd/lib/button'
0
partyelite