ترجمة هذه المشكلة:

حجم حزمة antd svg كبير جدًا ، فمن المستحسن @ حزمة ant-design / icons عند الطلب

• [] لقد بحثت في قضايا هذا المستودع وأعتقد أن هذه ليست نسخة مكررة.

الإصدار

3.9.0

بيئة

حزمة الويب 4

رابط الاستنساخ

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

خطوات التكاثر

بناء Webpack

ما هو متوقع؟

حزمة رمز حسب الحاجة ، تقسيم ملف js

ما الذي يحدث بالفعل؟

معبأة في قطعة البائعين

لم أستخدم سوى عدد قليل من الرموز

<Icon /> مكتبة الأيقونات بالكامل بشكل افتراضي. لأنني لا أعرف نوع الأيقونة التي ستقدمها لوقت التشغيل. في السابق ، تمت استضافة الرموز في iconfont.cn لذلك لا يوجد تصور للتعبئة.

يتطلب هذا مناقشة متعمقة للخطة المؤقتة ، راجع https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579

ccyesmeck

من الضروري توفير طريقة يمكن تحميلها عند الطلب ، وتستخدم هذه الطريقة أيضًا داخل مكون antd.

import Star from 'antd/icons/star';

<Star />

لكن إذا قمت بذلك ، فإن الكتابة السابقة غير متوافقة

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

لا يمكن تعبئتها عند الطلب ، كما أن التحميل غير المتزامن جيد أيضًا ،

قبل استخدام iconfont ، سيظهر محتوى الصفحة أولاً ، وسيتم تحميل الرمز ببطء

<Icon.Star />

لكن إذا قمت بذلك ، فإن الكتابة السابقة غير متوافقة

لا ، طالما أنك لست بحاجة إلى <Icon /> فلن تتمكن من حزمها جميعًا.

لا يمكن حزم بعض المشاهد عند الطلب ، مثل تعيين رمز القائمة ، إذا كان من الممكن تهيئتها في الخلفية ، بحيث لا يمكن للواجهة الأمامية التنبؤ بالأيقونة التي سيتم تعيينها.
التحميل غير المتزامن أكثر ملاءمة ، فقط اكتب @ ant-design / icons في قطعة

في الواقع ، سيتم تقديم المكونات المضمنة التي تستخدم <Icon /> ، مثل <DatePicker /> ، <Select /> وما إلى ذلك ، بشكل كامل عند استخدامها.

إذا كان من الممكن تهيئته في الخلفية ، فلا يمكن للواجهة الأمامية التنبؤ بالأيقونة التي سيتم تعيينها. التحميل غير المتزامن أكثر ملاءمة

تم تكوين قائمة النظام الخلفي الذي أنشأناه ، وهناك حاجة فعلية إلى التحميل غير المتزامن للرموز. الحزمة الكاملة كبيرة جدًا.

أشعر بعدم التزامن أفضل.
إذا كنت ترغب في حزمها عند الطلب ، فيجب عليك كتابة مكون إضافي babel مثل babel-plugin-import .

في الواقع ، سيتم تقديم المكونات المضمنة التي تستخدم <Icon /> ، مثل <DatePicker /> ، <Select /> وما إلى ذلك ، بشكل كامل عند استخدامها.

تغيرت الكتابة الداخلية

في المشروع ، النوع متغير ، هل يمكنني تقديم المبلغ بالكامل فقط؟
<Icon type={icon} />
هل يمكن إدخال هذا جزئيًا؟

تعرف على ما إذا كان يمكنك استخدام رمز svg لتقليل حجم الحزمة الكاملة قدر الإمكان.

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

بالإضافة إلى ذلك ، يجب إنشاء حزمة التوزيع مباشرة @ant-design/icons ، وليس من الضروري الاعتماد بشكل مباشر على الكود المصدري المترجم قليلاً.

+1 ، الحزمة مضاعفة بالفعل

صداع. . . . العم. . .

الشيء الأكثر إحراجًا هو جلب الكثير من SourceMappingUrl

لقد جعلني أعود إلى الإصدار 3.8.2

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (مشروع umi)

إليك حل يستخدم حزمة الويب resolve.alias لتقليل حجم الحزمة.
نحن نخطط لتصميم واجهات برمجة تطبيقات جديدة تسمح باستيراد الرموز المطلوبة في المقدمة.
لاحظ أنه يجب عليك أيضًا استيراد الرموز المستخدمة في مكون antd ، مثل loading ، close-circle وهكذا.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (مشروع umi)
إليك حل مؤقت: قم بتكوين حقل حزمة الويب resolve.alias .
في المستقبل ، يجب أن نجد طريقة لتصميم واجهة برمجة تطبيقات رمز جديدة لتسهيل استخدام أيقونات التحميل عند الطلب.
لاحظ أن الرموز عند الطلب يجب أن تتضمن أيضًا الرموز المستخدمة بواسطة المكونات الأخرى لـ antd ، مثل loading ، close-circle وهكذا.

HeskeyBaozi أولا وقبل كل شيء شكرا 9:29 ، ورأيت أن الوقت الذي أرسلته كان 6 hours ago ، الإخوة جيدون حقًا! مثل: thumbsup :: thumbsup :: thumbsup:

ما أفهمه هو سرد الرموز التي يستخدمها المشروع بشكل منفصل ، بما في ذلك الرموز المستخدمة من قبل antd

يمكنك استيراد ملف @ ant-design / icons / lib / dist.js إلى ملف dll للتخزين المؤقت على المدى الطويل

ChiaJune antd قائمة الرموز المستخدمة بالكامل في المكون ، إذا كان هناك أي حذف ، يمكنني إضافة
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

يمكنك الرجوع إلى نهج الخطاف

أ

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" />

ب

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

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

الحفاظ على الاستخدام القديم وإضافة رسالة تحذير وترحيل في وحدة التحكم.

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

مزود واجهة برمجة تطبيقات جديدة مثل:

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

<Star />
<SettingIcon />

وطريقة تقطيع الأشجار أيضًا:

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

<Star />
<SettingIcon />

تضمين التغريدة

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (مشروع umi)

إليك حل يستخدم حزمة الويب resolve.alias لتقليل حجم الحزمة.
نحن نخطط لتصميم واجهات برمجة تطبيقات جديدة تسمح باستيراد الرموز المطلوبة في المقدمة.
لاحظ أنه يجب عليك أيضًا استيراد الرموز المستخدمة في مكون antd ، مثل loading ، close-circle وهكذا.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (مشروع umi)
إليك حل مؤقت: قم بتكوين حقل حزمة الويب resolve.alias .
في المستقبل ، يجب أن نجد طريقة لتصميم واجهة برمجة تطبيقات رمز جديدة لتسهيل استخدام أيقونات التحميل عند الطلب.
لاحظ أن الرموز عند الطلب يجب أن تتضمن أيضًا الرموز المستخدمة بواسطة المكونات الأخرى لـ antd ، مثل loading ، close-circle وهكذا.

HeskeyBaozi حل رائع !! (حتى يقوم antd بتنظيف هذا الأمر ويسمح باستيراد الرموز بشكل فردي) لقد كنت أقوم ببعض المحاولات في استخدام solution.alias لإصلاح هذه المشكلة ، لكن هذا ضرب المسمار في الرأس. شكرًا لك!

راقب هذا ، لأننا نستخدم هذا الإصدار أيضًا.

تضمين التغريدة

نفس الشيء بالنسبة لي. لا يغطي الاستيراد بشكل منفصل جميع سيناريوهات الاستخدام ، لذا من الضروري إصلاح اهتزاز الأشجار. يرجى التحقق هنا

تضمين التغريدة
أستخدم webpack.alias وهو يعمل معي. ربما يمكن أن تساعدك : )

فرع antd-icon-tree-shaking الخاص بي (Webpack4 + Babel 7.0)

يتسبب هذا أيضًا في حدوث مشكلات إذا كان كل ما لدي هو Button في حزمة (ربما لأنه يدعم الرموز). أي حل بديل لتقليل حجم الحزمة إذا كان كل ما أستخدمه هو Button ؟

(في لقطة الشاشة - لدي فقط مكون Button لكن الرموز تنتفخ الحزمة بشكل أساسي)

الحل المؤقت الذي نجح معي حتى يتم إصلاحه (antd> = 3.9)

1. تكييف حزمة الويب لحل الرموز بشكل مختلف. في تهيئة حزمة الويب الخاصة بك:

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

1. أنشئ icons.js في المجلد src/ أو أينما تريد. تأكد من أنه يطابق مسار الاسم المستعار!
   في هذا الملف تحدد الرموز التي يجب أن تتضمنها antd! أنا فقط بحاجة إلى أيقونة أسفل لمكون التحديد من antd.

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

من الممكن أيضًا إجراء ذلك باستخدام react-app-rewire (تعديلات إنشاء التطبيق التفاعلي) ضمن config-overwrites.js

أعتقد أن واجهة برمجة التطبيقات الأفضل ستكون إذا تمكنا من تعيين الرمز عن طريق تمرير بعض JSX بهذه الطريقة يمكنني ببساطة استيراد الرمز المطلوب فقط وتمريره إلى الزر. سيجعل أيضًا من السهل العمل مع أيقونات الطرف الثالث (أو أي svg).

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

فقط تفضيلي الشخصي :)

للأشخاص الذين يستخدمون إنشاء تطبيق تفاعل عبر إعادة تطبيق رد فعل .

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 جوهر

للأشخاص الذين يستخدمون إنشاء تطبيق تفاعل عبر إعادة تطبيق رد فعل .

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 جوهر

يؤدي القيام بهذه الطريقة إلى إزالة توافق twoToneColor.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
النتائج في:

مرحبا،
سبب هذه المشكلة هو القدرة على استخدام رموز مثل <Icon type="check-circle" . تحتاج واجهة برمجة التطبيقات هذه إلى تضمين كل رمز حتى تتمكن من توفير كل ما تقدمه كنوع.

يمنحنا هذا أيضًا القدرة على تحديد الرموز في وقت التشغيل وهو أمر مهم بالنسبة لي. وفقًا لي ، يجب أن تظل واجهة برمجة التطبيقات كما هي ولكن يجب أن يدعم مكون Icon تحميل الرموز حسب النوع المحدد عند الطلب .

ربما باستخدام الاستيراد الديناميكي (يعتمد على # 12235 - الترقية إلى Webpack 4) أو من خلال مكتبة Webpack 3 مثل قابلة للتحميل التفاعلي

بناءً على هذا التعليق ، انتقل إلى حل مؤقت إضافي:

$ yarn add purched-antd-icons

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

تزيل الحزمة purched-antd-icons جميع الرموز التي لم تستخدمها مكونات antd الرسمية. بالنسبة لحالتي ،

فيما يلي تحليل حزمة إنشاء-تفاعل-تطبيق مقذوف للمقارنة.

إخراج webpack

تحليل الحزمة

يمكنك استيراد ملف @ ant-design / icons / lib / dist.js إلى ملف dll للتخزين المؤقت على المدى الطويل

قبل:

بعد:

الحل البديل من tobiaslins لا يعمل بالنسبة لي ، فهو يقول Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' يمكن لأي شخص أن يرشدني إلى كيفية إصلاحه؟ شكر

marcosfede لدي نفس المشكلة مثلك. الاسم المستعار لا يعمل بشكل صحيح.

تحقق مما إذا كان لديك __dirname تعيينه في path.resolve(__dirname, "./src/icons.js")

إذا كنت تستخدم تطبيق create-react-app عبر البديل الذي يُعاد توصيله بالتطبيق ، فيمكنك القيام بما يلي:

• مسارات
• webpack.dev.js
• webpack.prod.js

3.9 أدى التحديث إلى زيادة حجم الحزمة 700 كيلو بايت (23٪). بينما نحب التنفيذ الجديد ، كان حجم الحزمة المتزايد مفاجأة كبيرة. تم تعويض الزيادة بسبب عدم تضمين "iconfont". سنقوم بتنفيذ حل Obooman الذي سيظل يشهد زيادة في حجمنا الإجمالي ، ولكن لا يكفي لضمان

يترك تنفيذ حزمة purched-antd-icons مشروعنا بالعديد من الرموز المفقودة.

michaelpeterlee purched-antd-icons يوفر فقط الرموز التي تحتاجها المكونات الرسمية ، ونحن نستخدمها لأننا لا نستخدم أيقونات أخرى في antd. لمزيد من التخصيص ، سيتعين عليك إدارة الرموز يدويًا أو اختيار مولدات رموز الخطوط مثل icomoon أو iconfont كمزود نظام الرموز الخاص بك.

marcosfede لدي نفس المشكلة مثلك. الاسم المستعار لا يعمل بشكل صحيح.

تحقق مما إذا كان لديك __dirname تعيينه في path.resolve(__dirname, "./src/icons.js")

إذا كنت تستخدم تطبيق create-react-app عبر البديل الذي يُعاد توصيله بالتطبيق ، فيمكنك القيام بما يلي:

• مسارات
• webpack.dev.js
• webpack.prod.js

كان هذا مفيدًا ، شكرًا. لقد قمت بإخراج المشروع لذا كان لدي __dirname أشر إلى مجلد التكوين حيث توجد ملفات webpack بدلاً من المجلد الجذر

ربما يجب على فريق AntDesign التفكير في العودة إلى الطريقة السابقة (قبل 3.9). هو الطريق الأفضل ، الطريق الحكيم.

يجب أن يكون مثل الخارجيين. https://github.com/ant-design/ant-design-icons/issues/14

marcosfede لدي نفس المشكلة مثلك. الاسم المستعار لا يعمل بشكل صحيح.
تحقق مما إذا كان لديك __dirname تعيينه في path.resolve(__dirname, "./src/icons.js")
إذا كنت تستخدم تطبيق create-react-app عبر البديل الذي يُعاد توصيله بالتطبيق ، فيمكنك القيام بما يلي:

• مسارات
• webpack.dev.js
• webpack.prod.js

كان هذا مفيدًا ، شكرًا. لقد قمت بإخراج المشروع لذا كان لدي __dirname أشر إلى مجلد التكوين حيث توجد ملفات webpack بدلاً من المجلد الجذر

إنه يعمل لأجلي ، شكرا!

فيما يلي التغييرات التي سنجريها في الإصدار التالي لحل مشكلة حجم الحزمة.

قم بإنشاء مكون منفصل لكل رمز واحد

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

تجاهل الإشارة إلى رمز كسلسلة

سيظهر تحذير تم إيقاف العمل به عند الإشارة إلى رمز كسلسلة في المكونات التالية:

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

للتوافق ، سنقوم بتحميل SVG sprite عند الطلب عندما تشير إلى رمز كسلسلة.

بدلاً من الإشارة إلى رمز كسلسلة ، يجب عليك تمرير ReactNode صراحةً إلى هذه الخاصيات:

import StarFilled from 'antd/icons/StarFilled';

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

yesmeck حل جيد يقدم هزة الشجرة وليس طريقة addIcon في نفس الوقت!

سؤال. ماذا لو كانت لدينا أنماط CSS على هذه الرموز وتحتاج إلى تغيير نوع الرموز ديناميكيًا؟ هل يتعين علينا تمرير الأنماط إلى جميع أيقونات الاستبدال؟

michaelpeterlee rc-calendar لم يعتمد على antd و @ant-design/icons ، لذلك ليس من المفترض "تحميل مكتبة الأيقونات بالكامل". يمكنك إنشاء مشكلة في https://github.com/react-component/calendar/issues باستخدام نسخة تجريبية.

غلطتي. لقد حذفت تعليقي غير ذي صلة. يجب أن يكون المكون DatePicker الذي يقدم الرمز:

وجهة نظري هي أنني لا أقوم باستيراد رموز antd في أي مكان في مشروعي ، ولكن بعض مكونات antd تستورد Icon من antd . سيكون من الجيد أن تتمكن هذه المكونات من استيراد الرموز التي تحتاجها فقط ، بدلاً من مكتبة الرموز بأكملها.

فيما يلي التغييرات التي سنجريها في الإصدار التالي لحل مشكلة حجم الحزمة.

تضمين التغريدة

هل تقصد 3.11.x ؟ لا يبدو أنه مدرج في 3.10.4 .

Johnernaut # 12888

بالعودة إلى الإصدار 3.8.4 في الوقت الحالي ، فإن الإصدار 3.9.0+ كبير جدًا بعد أن يتم تجميعه. الإصدار الذي ذكرته الآلهة أعلاه هو حل مؤقت فقط. أتطلع إلى الإصدار التالي لتحميل الرمز بشكل غير متزامن.

شكرًا yesmeck ، أتطلع إلى الإصدار التالي.

أردت أيضًا أن أذكر أنني قمت بنشر مكون إضافي لـ Ant Design مقابل create-react-app v2 و craco . هنا هو البرنامج المساعد craco-antd على جيثب

لقد أضفت للتو حجم حزمة كبيرة من قسم وسأراقب هذه المشكلة ( والعلاقات العامة ). شكرًا للنصيحةsunel (وغيرها). لقد قمت بتضمين ارتباط لتعليقك حول إعداد اسم مستعار.

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"
    }
  }
}

أقوم بصياغة مستودع نسخ يعرض هذه المشكلة. تم تعديل تكوين حزمة الويب من مثال التكامل الأصلي ng-zorro-antd هنا ويبدو أن اهتزاز الشجرة DllPlugin في وحدة ES المسطحة عديم الفائدة.

يعمل كما هو متوقع إذا كان DllPlugin غير موجود.

فيما يلي بعض الخلفيات التاريخية حول أن webpack لا يقوم بهز الأشجار في وحدات es المسطحة. أعتقد أن ما يشيرون إليه قد تم إصلاحه في الغالب في الإصدار الأخير باستثناء بعض حالات الحافة البالغة DllPlugin .

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

ومن المثير للاهتمام أنه لم يكن حتى مايو أن حزمة الويب تدعم اهتزاز الشجرة على DllPlugin ، لقد قمت entryOnly: true لكن لم يحالفني الحظ. أود صياغة مثال أكثر عزلة وإثارة مشكلة على webpack.

التعديلات: تمت إضافة مستودع النسخ والقضايا التاريخية.

نهاية القصة: هنا يجعل مستودع التكاثر خاطئًا. حزمة الويب 3.5.6 قديمة جدًا بدون دعم entryOnly: true . هذا هو السبب في أن الوحدات النمطية fesm5 ليست هز الشجرة.

بالنسبة لأولئك الذين يرغبون في تجميع ng-zorro-antd لبائعي dll

• إذا كانت لديك حزمة ويب > = 4.9.0 ، فأضف entryOnly: true إلى تكوين DllPlugin .
• بخلاف ذلك ، أضف هذا الإعداد إلى تهيئة حزمة الويب الخاصة بك

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 بتمويل 200.00 دولار لهذه المشكلة. شاهده على IssueHunt

هل يمكن أن لا تشارك ملفات الخطوط في الحزم واستيرادها محليًا؟كبير جدا

هل يخطط المسؤولون لتحسين هذه المشكلة؟ هل يمكنك تقديم حل svg محلي مشابه للإصدار السابق 3.8؟

نتطلع إلى التحسين

هل يوجد حل رسمي؟

fuhaiwei حتى الإصدار التالي ، تحقق من هذا التعليق للحصول على حل بديل عن طريق تصدير الرموز مباشرة https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

أستخدم حاليًا webpack.resolve.alias لاستبدال antd/es/icon بمكون مخصص.
سيكون التجميع <Icon /> a props.type و props.theme المرسلة إلى API المحدد.
بهذه الطريقة ، يمكن تسجيل جميع بيانات الأيقونة المستخدمة أثناء اختبار الصفحة.
ثم استنادًا إلى البيانات و https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 ، قم تلقائيًا بإنشاء icons.js .
نأمل في إيجاد حل أفضل.

أستخدم حاليًا webpack.resolve.alias لاستبدال antd/es/icon بمكون مخصص.
سيرسل هذا المكون props.type و props.theme من <Icon /> إلى API المحدد.
يتيح لك هذا تسجيل جميع بيانات الأيقونة المستخدمة أثناء اختبار الصفحة.
ثم قم بإنشاء icons.js تلقائيًا ، بناءً على البيانات و https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 .
نأمل في إيجاد حل أفضل.

مرت 3 أشهر ، هل وجد المسؤول طريقة للتحميل عند الطلب؟

أشعر أن أفضل شيء هو البدء بطريقة المقدمة ، مثل المواد ، يتم نقل جميع المكونات بشكل منفصل. . الآن فقط تلك المكونات التي قد تستخدم الرمز المدمج ، يتم حزم جميع الرموز. .

إذا لم يتم استخدام المكون Icon ، فسيتم أيضًا تحميل حزمة @ ant-desigin / icons

إذا لم يتم استخدام المكون Icon ، فسيتم أيضًا تحميل حزمة @ ant-desigin / icons

يتم استخدام Datepicker أيضًا ، لمعرفة ما إذا كان هناك مثل هذا في الكود. القائمة سوف تستخدم أيضا

أكثر من 500 كيلوبايت كبير جدًا

أتطلع إلى ذلك ، لقد انتقلت في الأصل إلى أحدث إصدار ، ولكن عندما رأيت أنه كان كبيرًا جدًا ، فقد أخافني مرة أخرى

لا أريد استخدام تنسيق SVG ، هل يمكنني تهيئته بمرونة؟ تكوين لاستخدام أو عدم استخدام svg

يمكنك توفير طريقة للإشارة إلى رمز واحد فقط ، ويتم تحديث جميع المكونات الداخلية لـ antd لاستخدامها بهذه الطريقة:

import Search from 'antd/icons/Search";

<Search />

للتوافق مع المشاريع الحالية ، لا يزال import { Icon } from 'antd'; محجوزًا ، ولكن طالما تم استخدام import { Icon } from 'antd'; ، سيتم استيراد المبلغ الكامل للرموز.

توافق في الطابق العلوي

علامة انتظار الحل الأمثل

رموز 500k ، هل هناك حل؟

هل يمكن لأحد أن يطلعني على هذا باللغة الإنجليزية؟ 500 كيلو بايت هو ربع حزمتي. أنا أستخدم حزمة الويب وأقوم باستيراد الأيقونات مثل:

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

لقد جربت طرقًا مختلفة لاستيرادها وحتى إزالة استيراد الرمز معًا ، ولكن يبدو أن كل ما أفعله يبقى 500 كيلو بايت. أنا أستخدم حزمة الويب ، وتمكنت من هز الرموز بشكل شجرة باستخدام ميزة الرفع التجريبية للنطاق ، ولكن لا يمكنني استخدام ذلك لأنه يكسر تطبيقي في 20 مكانًا آخر.

كيف يتعامل الناس مع هذه المشكلة؟ هل يقوم الجميع هنا بشحن مشاريعهم بسعة 500 كيلو بايت إضافية فقط أم أن هناك بعض الحلول الواضحة التي أتجاهلها؟

هل يعمل استيراد مثل ذلك مع حزمة ويب قياسية؟

import Star from 'antd/icons/star';
إذا تمكن أي شخص من إعلامي ، فسأكون ممتنًا حقًا.

ApolloGun تمت الإشارة إلى الحل البديل عدة مرات في هذا الموضوع ، كل شيء موجود في هذا التعليق: https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

الطريقة التي تعمل بها هي إخبار Webpack بحل الرموز من موقع مختلف ، وتحديدًا ملف جديد حيث تقوم بتصدير الرموز التي تريد استخدامها بالضبط. بعد القيام بذلك ، ستعمل الرموز كالمعتاد ، ولا يجب تغيير أي شيء آخر في المكونات.

لا أستخدم أي أيقونات ولكني ما زلت أحصل على هذا الملف الضخم. ربما ، المكونات في antd تستخدمه داخليًا. كيف يمكنني تحديد الرموز التي تستخدمها المكونات. هذا ويبدو أن طريقة جيدة لاستبدال الرموز Antd من الرموز المخصصة لأشياء مثل تحديد، منسدلة، الخ

لا أستخدم أي أيقونات ولكني ما زلت أحصل على هذا الملف الضخم. ربما ، المكونات في antd تستخدمه داخليًا. كيف يمكنني تحديد الرموز التي تستخدمها المكونات. هذا ويبدو أن طريقة جيدة لاستبدال الرموز Antd من الرموز المخصصة لأشياء مثل تحديد، منسدلة، الخ

أنشأ HeskeyBaozi قائمة بالأيقونات المستخدمة في مكونات antd ، باستخدام الاسم المستعار webpack:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
يرجى قراءة مناقشة القضية بأكملها لفهم هذه الطريقة.

ApolloGun لا يوجد حاليا أي حل رسمي.
طلب السحب: # 12888 لا يزال قيد التنفيذ.

yesmeck ، @ afc163 هل من خطط لإغلاق هذا قريباً؟

HeskeyBaozi @ afc163 ، كيف تستخدم هذا الجديد الذي كتبته؟ ؟

HeskeyBaozi هل لي أن أسأل لماذا لا تعملون على هذا يا رفاق؟ لقد مر أكثر من خمسة أشهر. هل تعتبرون هذا أولوية منخفضة؟

HeskeyBaozi هل لي أن أسأل لماذا لا تعملون على هذا يا رفاق؟ لقد مر أكثر من خمسة أشهر. هل تعتبرون هذا أولوية منخفضة؟

موافق ، إنه أمر مزعج حقًا = (

بعد فحص الكود antd ، أرى أن مكوّنًا مثل Button يستورد Icon ، والذي بدوره يستورد (وفقًا للرمز الذي تم إنشاؤه)

// 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];
    })
  )
);

مما يؤدي إلى فشل اهتزاز الأشجار ، وبالتالي استيراد جميع الرموز. يرجى مراعاة توجيه الاستيراد إلى @ant-design/icons/lib/index.es.js وعدم إجراء عمليات على كافة الرموز حتى الحاجة إليها. تحقق أيضًا من سجل هذا السطر: https://github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3 لقد تغير قليلاً بمرور الوقت.

يؤدي هذا مباشرة إلى عدم توفر المشروع بأكمله

poorel ،

<Icon /> مكتبة الأيقونات بالكامل بشكل افتراضي. لأنني لا أعرف نوع الأيقونة التي ستقدمها لوقت التشغيل. في السابق ، تمت استضافة الرموز في iconfont.cn لذلك لا يوجد تصور للتعبئة.

يتطلب هذا مناقشة متعمقة للخطة المؤقتة ، راجع # 12011 (تعليق)

لا يزال من الممكن استخدام هذا الحل ، لقد اختبرته ، لكن عليك تحديد الرموز الموجودة في مشروعك ، فهذا أمر مزعج أكثر قليلاً

لكن عليك تحديد الرموز الموجودة في مشروعك ...

حاولت قراءتها من قبل ووجدت أن العديد من مراجع الرموز تم إجراؤها بواسطة مكونات antd الخاصة ، والرقم ليس صغيرًا. على الرغم من أنني نقلت مباشرة في العمل صغير جدًا ، ولكن بالنظر إلى المكونات التي يمكن الاستشهاد بها ، ليس من السهل حساب الرقم.

chenyong اه ، تلك البيضة مؤلمة. . .

aryzing أسلوبك يبدو جذابًا. هل سينتج عنه جهد أقل من # 12888؟ تتضمن العلاقات العامة الكثير من التغييرات المفاجئة ، وربما تكون جزءًا من سبب عدم اكتمالها بعد شهور.

zachguo لقد بحثت في # 12888 ، ولم أستطع حقًا فهم ما كان يحدث. بعد بعض التفكير في الأمر ، لست متأكدًا من قدرتنا على هز الرموز بالشجرة بنجاح لأن واجهة برمجة التطبيقات الديناميكية التي تستخدمها بعض المكونات لتقديم الرموز تتعارض مع الطبيعة الثابتة لواردات ES المستخدمة في اهتزاز الشجرة.

يتم تقديم الرمز المستخدم في بعض مكونات antd ديناميكيًا (أي يتم تحديده في وقت التشغيل) بناءً على الدعامة. على سبيل المثال ، ألق نظرة على واجهة برمجة تطبيقات Button:

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

لكي يتم عرض هذا المكون بشكل صحيح ، يجب أن يكون لمكون الزر (أو مكون الرمز الأساسي المستخدم) حق الوصول (في وقت التشغيل) إلى جميع الرموز ، ولا يسمح بهز الشجرة.

سيكون الحل هو الحصول على واجهة برمجة تطبيقات مثل

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 */}

في هذا السيناريو ، أنت تقوم فقط باستيراد ما تحتاج إليه ، ويمكن أن يبدأ اهتزاز الشجرة وإفلات جميع الصادرات غير المستخدمة من المثال @antd/some-icons-package .

لقد مضى على هذه المشكلة أكثر من نصف عام ، ولا يوجد حتى الآن حل رسمي. الحل الذي أستخدمه حاليًا هو استخدام import() للتحميل غير المتزامن.
لقد مرت أكثر من نصف عام على هذه المشكلة ، ولا يوجد حتى الآن حل رسمي. الحل الذي أستخدمه حاليًا هو استخدام import() للتحميل غير المتزامن.

استخدم المكونات القابلة للتحميل الموصى بها في وثائق React الرسمية .
استخدم المكونات القابلة للتحميل الموصى بها في وثائق React الرسمية .

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

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

• الخطوة الأولى هي تثبيت التبعيات: @loadable/component و @babel/plugin-syntax-dynamic-import .
  الخطوة الأولى هي تثبيت التبعيات: @loadable/component و @babel/plugin-syntax-dynamic-import .

• الخطوة الثانية هي إنشاء مجلد icons في الدليل الجذر للمشروع ، واستخدام البرنامج النصي لتصدير جميع الرموز الموجودة في @ant-design/icons :
  الخطوة الثانية هي إنشاء مجلد icons في جذر المشروع وتصدير جميع الرموز في @ant-design/icon باستخدام برنامج نصي:

  #!/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);
  })();
  

  استخدم العقدة لتنفيذ هذا البرنامج النصي مباشرة ضمن المشروع لتخزين جميع الرموز المصدرة في @ant-design/icons في الدليل icons .
  قم بتنفيذ هذا البرنامج النصي مباشرة ضمن المشروع باستخدام العقدة لتخزين جميع الرموز المصدرة من @ ant-design/icons في المجلد icons .

• الخطوة الثالثة هي نسخ المكونات / icon / index.tsx في مستودع كود Antd إلى الدليل الجذر للمشروع ، وتسميتها كـ Icon.jsx أو Icon.js ، ثم حذف تعريف نوع TypeScript في الكود للحصول على نقي. كود جافا سكريبت. (إذا كان مشروعك يستخدم TypeScript ، فيمكنك أيضًا تسميته مباشرة كـ Icon.tsx أو Icon.ts ، لذلك ليست هناك حاجة لحذف تعريف النوع)
  في الخطوة الثالثة ، انسخ المكونات / icon / index.tsx في مستودع كود Antd إلى جذر المشروع ، وتسمى بـ Icon.jsx أو Icon.js ، ثم أزل تعريف نوع TypeScript في الكود الحصول على كود JavaScript خالص. (إذا كان مشروعك يستخدم TypeScript ، فيمكنك أيضًا تسميته مباشرة كـ Icon.tsx أو Icon.ts ، لذلك ليس عليك حذف تعريف النوع)
  ثم قم بتعديل ملف الشفرة هذا واستخدم import() مع @loadable/component لتحميل ملفات الرموز عند الطلب.
  ثم عدّل ملف الشفرة واستخدم import() مع @loadable/component لتحميل ملف الرمز حسب الحاجة.

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

• الخطوة الأخيرة هي تكوين Webpack:
  الخطوة الأخيرة هي تكوين Webpack:
  فرق
  فرق - a / webpack.js b / webpack.js
  --- a / webpack.js
  +++ b / webpack.js
  -1،4 +1،5
  مسار ثابت = يتطلب ('مسار') ؛
  + حزمة ويب const = تتطلب ('حزمة ويب') ؛
  const HtmlWebpackPlugin = تتطلب ('html-webpack-plugin') ؛
  const TerserPlugin = تتطلب ('terser-webpack-plugin') ؛

  -33،12 +34،16
  المكونات الإضافية: [
  HtmlWebpackPlugin الجديد ({
  العنوان: "صفحة رائعة" ،
  النموذج: path.join (__ dirname، 'public / index.html') ،
  ميتا: {
  منفذ العرض: 'العرض = عرض الجهاز ، المقياس الأولي = 1' ،
  } ،
  التجزئة: صحيح ،
  }) ،

  • حزمة الويب الجديدة.NormalModuleReplacementPlugin (
  • /node_modules\/antd\/es\/icon\/index.js/ ،
  • path.resolve (__ dirname، "Icon.jsx")
  • ) ،
    ] ،
    حل: {
    الوحدات: ['node_modules'] ،
    -56،13 +61،14
    استعمال: [{
    محمل: 'babel-loader' ،
    خيارات: {
    الإعدادات المسبقة: [
    ['@ babel / preset-env'، {الأهداف: '> 2.486٪، not dead'}]،
    "@ babel / preset-response" ،
    ] ،
    المكونات الإضافية: [
  • ['@ babel / plugin-syntax-dynamic-import'] ،
    ['@ babel / plugin-offer-class-properties'] ،
    ['import'، {libraryName: 'antd'، libraryDirectory: 'es'، style: true}]،
    ] ،
    } ،
    }]
    

    ""

تتمثل ميزة هذا الحل في أنه يمكنك الاحتفاظ بجميع الرموز ، ويمكنك تعديل الرموز بشكل تعسفي في نظام إدارة الخلفية القابل للتكوين دون القلق بشأن نقص الرموز ؛ ويتم تحميل الرموز عند الطلب ، وسيتم تحميلها فقط عند عرض أيقونات صفحة معينة ملف الرمز المقابل. الشيء الوحيد الذي يجب تحميله هو بيانات قائمة الأيقونات التي تبلغ حوالي 50 كيلوبايت في الفهرس المعبأ (يمكن أن يؤدي تعيين اسم أقصر في تعليق webpack السحري في Icon.jsx تقليل الحجم).
تتمثل ميزة هذا الحل في أنه يمكنك الاحتفاظ بجميع الرموز ، ويمكنك أيضًا تعديل الرموز في نظام إدارة الخلفية القابل للتكوين دون القلق بشأن الرموز المفقودة ، ويتم تحميل الرموز عند الطلب ، وسيتم تحميل الرموز المطلوبة فقط لتقديمها عند بدء عرض صفحة معينة. يحتوي ملف الفهرس المجمّع الذي يجب تحميله على حوالي 50 كيلو بايت فقط من بيانات قائمة الرموز (يمكن أن يؤدي تحديد اسم أقصر في تعليق Webpack السحري في Icon.jsx تقليل هذا الحجم).

عيب هذا الحل هو أن كل رمز يحتوي على معلومات وحدة Webpack إضافية بالإضافة إلى محتوى الرمز ، لذلك يمكنك أن ترى أن حجم مجلد الرموز أكبر بكثير من حجم الملف الفردي المجمّع ككل ، بالإضافة إلى 50 كيلو في الفهرس يتم فعليًا تعبئة بيانات قائمة الرموز بحجم قريب من 3M. ولكن نظرًا لوجود عدد قليل أو عشرات الرموز التي يمكن استخدامها فعليًا ذهابًا وإيابًا ، فإن كمية البيانات التي يتم تنزيلها بواسطة متصفح المستخدم لن تكون كبيرة جدًا ، ولأنها يتم تحميلها بشكل غير متزامن ، طالما أن عدد الرموز المعروضة في نفس الوقت على صفحة واحدة غير أكثر ، له تأثير ضئيل على سرعة التحميل.
الجانب السلبي لهذا الحل هو أن كل رمز يحتوي على معلومات الوحدة النمطية Webpack بالإضافة إلى محتوى الرمز ، لذلك يمكنك أن ترى أن حجم المجلد icons أكبر بكثير من حجم الملف الفردي الذي تم حزمه من قبل ، و 50 كيلوبايت من بيانات قائمة الرموز في ملف الفهرس ، فإن الحجم الفعلي للحزمة يقترب من 3M. ومع ذلك ، نظرًا لأن الرموز التي يمكن استخدامها فعليًا هي فقط بضع أو اثني عشر ، فإن كمية البيانات التي تم تنزيلها بواسطة متصفح المستخدم ليست كبيرة جدًا ، ونظرًا لأنه يتم تحميله بشكل غير متزامن ، طالما أن عدد الرموز المعروضة على صفحة واحدة ليس أكثر ، فإن التأثير على سرعة التحميل ليس كبيرًا.

@ jinliming2 هو تعديل رائع ، فقط لتجد أن استيراد حزمة الويب يمكنه تمرير المتغيرات بالفعل

ستفشل العبارات الديناميكية بالكامل ، مثل import (foo) ، لأن حزمة الويب تتطلب على الأقل بعض معلومات موقع الملف. وذلك لأنه من المحتمل أن يكون foo أي مسار لأي ملف في نظامك أو مشروعك. يجب أن يحتوي الاستيراد () على بعض معلومات حول مكان وجود الوحدة ، لذلك يمكن أن يقتصر التجميع على دليل معين أو مجموعة من الملفات.

طالما أن هناك بادئة للدليل ، اعتقدت أنه كان مستحيلًا من قبل.
بعد قولي هذا ، لا يستخدم مستخدمو antd حزمة الويب فقط ، وهو أمر محرج بعض الشيء.

aryzing يبدو أن الخيار 1 من واجهات برمجة التطبيقات المقترحة هو في الواقع ما يحاول # 12888 تحقيقه. سيتم تضمين الكثير من التغييرات ، لذلك ربما لا نزال بحاجة إلى انتظار فريق Ant Design لإنهائه.

قد يفكر في استخدام xhr لتحميل svg بشكل غير متزامن？
آرتشر سفغس

نظرًا لأن ant deisgn نفسه يستخدم المزيد من الرموز ، فهل تفكر في تغيير 图标文件 إلى نظام تحميل غير متزامن بحيث لا يشغل حجم الملف الرئيسي. يمكنك الرجوع إلى هذا:

نظرًا لأن ant deisgn نفسها ستستخدم المزيد من الرموز ، لذلك فكر في تغيير ملف الرمز إلى نظام تحميل غير متزامن ، بحيث لا تحتاج إلى شغل حجم الملف الرئيسي ، يمكنك الرجوع إلى هذا:

webpack-ant-icon-loader

قام rororofff بتمويل 2.00 دولار لهذه المشكلة.

• أرسل طلب السحب عبر
• تريد المساهمة؟ شارك في هذه المشكلة عبر IssueHunt .
• تحقق من IssueHunt Issue Explorer لمعرفة المزيد من المشكلات الممولة.
• بحاجة الى مساعدة من المطورين؟ أضف المستودع الخاص بك على IssueHunt لجمع الأموال.

بالنسبة لأي شخص يشعر بالخوف من طول هذه المحادثة ويريد فقط استخدام تطبيق إنشاء تفاعل وتصميم نملة ، فقد قمت بإنشاء مشروع معياري هنا https://github.com/AustinGreen/cra-antd-starter

يتضمن ذلك إصلاحًا لمشكلة حجم حزمة الأيقونات ، وتكوين حزمة ويب مخصصة بدون إخراج. بفضل ndbroadbent و @ patricklafrance وفريق تصميم النمل بأكمله على عملهم الشاق.

بالنسبة لأي شخص يشعر بالخوف من طول هذه المحادثة ويريد فقط استخدام تطبيق إنشاء تفاعل وتصميم نملة ، فقد قمت بإنشاء مشروع معياري هنا https://github.com/AustinGreen/cra-antd-starter

يتضمن ذلك إصلاحًا لمشكلة حجم حزمة الأيقونات ، وتكوين حزمة ويب مخصصة بدون إخراج. بفضل ndbroadbent و @ patricklafrance وفريق تصميم النمل بأكمله على عملهم الشاق.

كيف يمكنني استخدامه في تطبيق Nextjs؟

AustinGreen جربت

بالنسبة إلى التطبيق الذي يحتوي على شريط جانبي وزر واحد بحجم ~ 100kB Gzipped ، لا يزال هناك الكثير.

anjmao إذا كانت هناك طريقة لتقليل حجم الحزمة بشكل أكبر ، فيرجى إبلاغي وسأضيفها. إذا كنت تقوم بإنشاء تطبيق ويب مؤسسي ، حوالي 100 كيلو بايت Gzipped لإطار عمل أمامي ، حوالي 5 مكونات (من مكتبة مكونات شاملة) وأيقونات وأدوات مساعدة أخرى قياسية جدًا.

anjmao إذا كانت هناك طريقة لتقليل حجم الحزمة بشكل أكبر ، فيرجى إبلاغي وسأضيفها. إذا كنت تقوم بإنشاء تطبيق ويب مؤسسي ، حوالي 100 كيلو بايت Gzipped لإطار عمل أمامي ، حوالي 5 مكونات (من مكتبة مكونات شاملة) وأيقونات وأدوات مساعدة أخرى قياسية جدًا.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579. هذا حل جيد

@ Oscar-ren ، المشروع يستخدم بالفعل اسمًا مستعارًا للرموز (وهذا هو السبب في أن حجم الحزمة هو 100 كيلو بايت فقط وليس 400 كيلو بايت تقريبًا)

tobiaslins هل غيّرت الحل منذ آخر تعليق لك ؟
عندما أستخدم هذا في مشروع Nuxt ، يخرج عرض العميل والخادم من المزامنة:
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.

Just FYI ، إصدار Vue لتقليل حجم الحزمة باستخدام الاسم المستعار webpack:
https://github.com/atjason/ant-design-vue-demo

أشير:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

حجم الحزمة Hello World :

نظرًا لأن ant deisgn نفسه يستخدم المزيد من الرموز ، فهل تفكر في تغيير 图标文件 إلى نظام تحميل غير متزامن بحيث لا يشغل حجم الملف الرئيسي. يمكنك الرجوع إلى هذا:

نظرًا لأن ant deisgn نفسها ستستخدم المزيد من الرموز ، لذلك فكر في تغيير ملف الرمز إلى نظام تحميل غير متزامن ، بحيث لا تحتاج إلى شغل حجم الملف الرئيسي ، يمكنك الرجوع إلى هذا:

webpack-ant-icon-loader

للأجيال القادمة ، هذا يعمل فقط مع React.

مرحبًا ، متى سيتم إصدار حل
لا يعمل محمل webpack-ant-icon-لودر بالنسبة لي.

مرحبا ، هل يمكنك تقديم معلومات حول استخدام
webpack-ant-icon-loader معك؟
دعني أرى ما إذا كان بإمكاني المساعدة في حلها.

مرحبا @ beven91!

سبق لي أن أجريت بعض الاختبارات ولم أعمل ولم أتمكن من ذلك
معرفة السبب. لكن سؤالك جعلني أعزل القضية على
مشروع مخصص لقد قمت بإنشاء اختبار عينة لك لتظهر لك وهذا
الوقت الذي عملت فيه! أقوم بحفظ 1.21 ميجا بايت باستمرار من الحزمة الناتجة
وهو أمر رائع من كل من المشروع التجريبي والمشروع الذي يعمل عليه
تجاريا.

أنا أنشر هنا مثال المشروع في حال كان لدى شخص آخر نفس الشيء
مشاكل:
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

بدون أداة تحميل webpack-ant-icon-loader ، أحصل على النتيجة التالية:
bundle.development.js 4.59 تطبيق MiB [المنبعث]

مع أداة تحميل webpack-ant-icon-loader ، أحصل على:
../../index.html 555 بايت [منبعثة]
0.bundle.development.js 1.21 MiB 0 [انبعث]
bundle.development.js 3.41 تطبيق MiB [المنبعث]

زوجان من الملاحظات:

• أعتقد أنه سيكون أفضل إذا حذفت 0.bundle.development.js
  قطعة أثرية.
• الرموز تختفي من المنتج النهائي ، أي أنها غير مرئية على الصفحة. رأيت تكوين umirc.js الخاص بك لكنني أستخدم جهاز التوجيه التفاعلي. كيف يمكنني إعادة ظهورها؟

في الجمعة 5 أبريل 2019 الساعة 2:38 مساءً كتب beven91 [email protected] :

مرحبا ، هل يمكنك تقديم معلومات حول استخدام
webpack-ant-icon-loader معك؟
دعني أرى ما إذا كان بإمكاني المساعدة في حلها.

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

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

AustinGreen مجرد فضول ، كيف يختلف الحل الخاص بك عن طريقة Ant الموثقة react-app-rewired و babel-plugin-import الموثقة هنا - https://ant.design/docs/react/use-with-create-react -app ؟

جيثب

AustinGreen / cra-antd-starter

أداة مرجعية لاستخدام إنشاء تطبيق تفاعلي وتصميم نملة - AustinGreen / cra-antd-starter

تصميم النمل - لغة تصميم واجهة المستخدم

لغة تصميم واجهة المستخدم على مستوى المؤسسات والتنفيذ المستند إلى React مع مجموعة من مكونات React عالية الجودة ، وهي واحدة من أفضل مكتبات React UI للمؤسسات

annjawn اعتبارًا من create-react-app 2.0 ، لم يعد يتم الاحتفاظ بالتفاعل-app- تم إعادة توصيله ، لذلك يستخدم مشروعي craco + craco-antd التي تم إنشاؤها لاستبدال رد فعل التطبيق المعاد توصيله لـ CRA 2.0.

@ Beven91 هل يمكنك المساعدة في هذا الجزء من تعليقي السابق من فضلك؟

• الرموز تختفي من المنتج النهائي ، أي أنها غير مرئية على الصفحة. رأيت تكوين umirc.js الخاص بك لكنني أستخدم جهاز التوجيه التفاعلي. كيف يمكنني إعادة ظهورها؟

أعني أنه من الرائع وجود فصل بين الرموز في الحزمة بأكملها ولكن الرموز المستخدمة لا تزال جزءًا من الحزمة المنفصلة ، لذا فإن استخدامها يعني تضمينها كحزمة منفصلة تجعل الفصل بلا فائدة.

annjawn اعتبارًا من create-react-app 2.0 ، لم يعد يتم الاحتفاظ بالتفاعل-app- تم إعادة توصيله ، لذلك يستخدم مشروعي craco + craco-antd التي تم إنشاؤها لاستبدال رد فعل التطبيق المعاد توصيله لـ CRA 2.0.

AustinGreen يبدو منطقيًا ، لكنه في الأساس نفس الشيء باستخدام CRACO. راجع للشغل ، سأستخدم أيضًا رد الفعل القابل للتحميل للقيام بتقسيم الكود وأعتقد أن طريقتك + الواردات المعيارية + تحميل المكون غير المتزامن يجب أن توفر تقليلًا كبيرًا في حجم الحزمة.

تضمين التغريدة
آسف على التأخير سأحاول حلها。

مرحبا vladimirmoushkov

يمكنك رؤية التفاصيل هنا. ant-icons-webpack-loade-test # 1

الحل المؤقت الذي نجح معي حتى يتم إصلاحه (antd> = 3.9)

1. تكييف حزمة الويب لحل الرموز بشكل مختلف. في تهيئة حزمة الويب الخاصة بك:

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

1. أنشئ icons.js في المجلد src/ أو أينما تريد. تأكد من أنه يطابق مسار الاسم المستعار!
   في هذا الملف تحدد الرموز التي يجب أن تتضمنها antd! أنا فقط بحاجة إلى أيقونة أسفل لمكون التحديد من antd.

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

من الممكن أيضًا إجراء ذلك باستخدام react-app-rewire (تعديلات إنشاء التطبيق التفاعلي) ضمن config-overwrites.js

هذا لا يعمل مع مكونات النمل التي تستخدم الرموز. على سبيل المثال ، يستخدم مكون التنبيه أيقونات التحقق والإغلاق ولكنها غير مرئية مع هذا الحل

@ Venugopal46 يمكنك إضافة تلك الرموز (التي تستخدمها مكونات النمل) إلى icons.js أيضًا.
يعمل بشكل جيد بالنسبة لي.

يبدو أننا قريبون من حل ؛ للإنهاء ، يمكننا صياغة استخدام يقوم تلقائيًا بإنشاء icon.js كجزء من عملية الإنشاء.

كيف يمكنك أن تعرف بدقة الرموز التي يتم استيرادها من خلال مكونات النملة الخاصة ، وذلك لوضعها في icons.js ؟

بالنسبة لي الاختراق أعلاه:

1. تكييف حزمة الويب لحل الرموز بشكل مختلف. في تهيئة حزمة الويب الخاصة بك:

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

1. أنشئ icons.js في المجلد src/ أو أينما تريد. تأكد من أنه يطابق مسار الاسم المستعار!
   في هذا الملف تحدد الرموز التي يجب أن تتضمنها antd! أنا فقط بحاجة إلى أيقونة أسفل لمكون التحديد من antd.

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

من الممكن أيضًا إجراء ذلك باستخدام react-app-rewire (تعديلات إنشاء التطبيق التفاعلي) ضمن config-overwrites.js

واستخدام ملف generateIconsList.sh لإنشاء 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

عن طريق تشغيل generateIconsList.sh 2>/dev/null >src/icons.js من جذر المشروع - يقوم بالمهمة! .
البرنامج النصي هو اختراق قبيح ومن الواضح أنه لا يمسك بمراجع الرموز الداخلية أو مراجع <Icon /> متعددة الأسطر. في حالتي ، كنت بحاجة إلى إضافة عدد قليل من حالات Icon يدويًا ، لكن البرنامج النصي يقوم بالمهمة ولكن في النهاية - مع وجود 1.1 ميغابايت أقل في الحزمة النهائية!

كيف يمكنك أن تعرف بدقة الرموز التي يتم استيرادها من خلال مكونات النملة الخاصة ، وذلك لوضعها في icons.js ؟

أقوم فقط بإضافة الرموز المفقودة (غير المعروضة) على صفحة الويب ولكن يجب أن تكون هناك. يعتمد ذلك على مقدار مكونات antd التي تستخدمها ، لكن بالنسبة لي استغرق الأمر حوالي 10 دقائق لإضافتها. (أنا أستخدم الكثير من مكونات antd ، رغم ذلك)

على سبيل المثال ، إذا كانت أسهم الفرز في الجداول مفقودة:

1. تفقد طاولة النمل وابحث عن <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> . ستلاحظ أن علامة <i /> فارغة. يمكنك أن ترى هنا أن اسم الرمز هو caret-down .
2. ابحث عن هذا الرمز في مجلد @ant-design/icons/lib ، واختر مجلد filled أو outline (اعتمادًا على نوع الرمز الذي تحتاجه) وأضف استيرادًا جديدًا إلى icons.js مثل ذلك :

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

ليس أفضل نهج ، لكنه يعمل كما هو متوقع. نتطلع إلى فريق تطوير النمل لإصلاح هذا في الإصدارات المستقبلية حتى نتمكن من تجنب مثل هذه الاختراقات القذرة.

مرحبا !

أي أخبار عن هذا الموضوع؟ هل هو مرشح للإفراج عن أنتد القادم؟
لقد جربت بعض الأشياء لحل هذه المشكلة ( webpack-ant-icon-loader ، babel-import-plugin ) لكن لم ينجح أي منها.

شكر!

تحتاج حقًا إلى حل في هذا الشأن ، حجم الحزمة كبير جدًا!

zlabnuintunanjmao للمساعدة، يرجى أن تطلب https://zlab.github.io/report.html ما المكونات في غير هذه الصفحة التي تولدها، أريد أن تحليل مشروع بلدي

لقد وجدته ، إنه محلل حزمة حزمة الويب

يتم استخدام الوسائط فقط ، ولكن يتم حزم 500k icon lib

لقد مر أكثر من نصف عام ، ألا يوجد تقدم؟

التخلي عن antd ، مثل هذه القضية الهامة ليست مهمة ...

الآن قم بتحميل الملفات التي يجب تجميعها في رموز عند الطلب ، 500 كيلوبايت

أضفت اسمًا مستعارًا في حزمة الويب الخاصة بي وأيقونة التصدير في icon.ts ، ولكن عند تشغيل npm start ، حدث خطأ

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'

هذا هو حل حزمة الويب الخاصة بي التكوين

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. أيقونة الأيقونة غير مستخدمة في المشروع ، لماذا توجد حزمة ، أرجو مساعدتي؟

2. استخدام webpack externals = {'antd': 'antd'} لا يعمل بشكل جيد. هل مازلت ترى antd أثناء تحليل الحزمة؟

1. أيقونة الأيقونة غير مستخدمة في المشروع ، لماذا توجد حزمة ، أرجو مساعدتي؟
2. استخدام webpack externals = {'antd': 'antd'} لا يعمل بشكل جيد. هل مازلت ترى antd أثناء تحليل الحزمة؟

تضمين التغريدة

1. الرجوع إلى هذا ، قد يكون مكونًا يشير إلى Icon

   https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
   في الواقع ، سيتم تقديم المكونات المضمنة التي تستخدم <Icon /> ، مثل <DatePicker /> ، <Select /> وما إلى ذلك ، بشكل كامل عند استخدامها.

2. إذا كنت تستخدم عناصر خارجية ، فأنت بحاجة إلى إيقاف تشغيل المكون الإضافي babel-plugin-import

أضفت اسمًا مستعارًا في حزمة الويب الخاصة بي وأيقونة التصدير في icon.ts ، ولكن عند تشغيل npm start ، حدث خطأ

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'

هذا هو حل حزمة الويب الخاصة بي التكوين

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'),
        }),
      ],
    },

أوصي بهاتين الممارسات

• استخدام الاسم المستعار
• استخدام البرنامج المساعد

@ As3ass1n
لماذا "../src/utils/antdIcon.ts" لديه ".."؟ هل تم وضع webpack في دليل منفصل؟

1. أيقونة الأيقونة غير مستخدمة في المشروع ، لماذا توجد حزمة ، أرجو مساعدتي؟
2. استخدام webpack externals = {'antd': 'antd'} لا يعمل بشكل جيد. هل مازلت ترى antd أثناء تحليل الحزمة؟

تضمين التغريدة

1. الرجوع إلى هذا ، قد يكون مكونًا يشير إلى Icon
   > # 12011 (تعليق)
   > في الواقع ، المكونات المضمنة التي تستخدم <Icon /> ، مثل <DatePicker /> ، <Select /> إلخ ، سيتم تقديمها بالكامل عند استخدامها.
2. إذا كنت تستخدم عناصر خارجية ، فأنت بحاجة إلى إيقاف تشغيل المكون الإضافي babel-plugin-import

حسنًا ، شكرًا

أضفت اسمًا مستعارًا في حزمة الويب الخاصة بي وأيقونة التصدير في icon.ts ، ولكن عند تشغيل npm start ، حدث خطأ

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'

هذا هو حل حزمة الويب الخاصة بي التكوين

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'),
        }),
      ],
    },

أوصي بهاتين الممارسات

• استخدام الاسم المستعار
• استخدام البرنامج المساعد

@ As3ass1n
لماذا "../src/utils/antdIcon.ts" لديه ".."؟ هل تم وضع webpack في دليل منفصل؟

آسف هذا خطأي. لقد كتبت اسم ملف خاطئًا ، والآن قمت بحل المشكلة باستخدام الاسم المستعار. شكر

ألن تحل هذه المشكلة في المستقبل؟ زيادة بنحو 400 ك

مرحبًا ، هل من الممكن تقديم تقدير على الأقل للوقت التقريبي لموعد حلها؟

490 كيلو بايت إضافي على الحزمة يجعل Icon s غير قابل للاستخدام عمليًا. هذه مشكلة كبيرة جدًا ، فهل هناك أي إصلاح مؤقت يمكننا القيام به حتى تصدر إصلاحًا لهذا الأمر؟

@ smddzcy قراءة الموضوع؟

@ schester44 مع كتابة الموضوع بمجموعة متنوعة من اللغات و… كنت على وشك أن أقول الحروف الهجائية أو حتى المقاطع الصوتية ، ولكن أعتقد أنني يجب أن أذهب إلى أبعد من النصوص ... أتجرأ على أنه من الصعب جدًا على أي شخص تقتصر لغته اللغوية على اللغات عادةً تقتصر على الأبجديات المشتقة من اللغة الأترورية لتوضيح ما يحدث تمامًا.

مرحبًا يا رفاق ، لقد نجحت في تنفيذ حزمة بسيطة جدًا من purched-antd-icons ، ولكن هذا يدوي تمامًا ؛ أقدر أن 3-4 ساعات من العبث للتوفيق بين الرموز المفقودة من خلال فحص DOM. نعتزم تنفيذ ذلك في المرحلة الأخيرة من دورة التطوير / الإصدار. بالنسبة لتطبيقاتنا المُجمَّعة / غير المتصلة بالإنترنت ، فإن المشكلة الوحيدة هي التعامل مع قيود ذاكرة الوصول العشوائي (RAM) المتواضعة للغاية لنظام iOS WKWebview. بالنسبة لنا ، إذا استمرت ملفات تعريف iOS للجوّال في عدم عرض المشغولات اليدوية ، فسوف نتجاهل ذلك تمامًا. نظرًا لعدم إحراز أي تقدم هنا ، فإنني أفضّل أن أرى أيقونة واجهة برمجة التطبيقات الجديدة هذه على الرف وأن واجهة برمجة التطبيقات القديمة تعود.

@ afc163 ،

ما كتبته في 15 سبتمبر 2018 يبدو أنه حل جيد (ترجمة جوجل أدناه). هل يمكنك تقديم تقدير متى سيتم تنفيذ ذلك؟

الحفاظ على الاستخدام القديم وإضافة رسالة تحذير وترحيل في وحدة التحكم.

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

مزود واجهة برمجة تطبيقات جديدة مثل:

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

<Star />
<SettingIcon />

وطريقة تقطيع الأشجار أيضًا:

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

<Star />
<SettingIcon />

تضمين التغريدة

وفقًا لخارطة طريق V4 ، سيتم إصلاح ذلك في الربع الرابع من هذا العام.

رائع: مبتسم:

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

وفقًا لخارطة طريق V4
https://github.com/ant-design/ant-design/issues/16911 ، سيكون هذا
ثابت في الربع الرابع من هذا العام.

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/ant-design/ant-design/issues/12011؟email_source=notifications&email_token=ADKDE4RXC63VER4GSUMG5Q3PYFXT7A5CNFSM4FS3WEAKYY3PNVWWK3TUL52HS4DFVREXG43TUL52HS4DFVREXG43TUL52HS4DFVREXG43TUL52HS4DFVREXG43
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
.

ICYMI ، ذكرت مستندات Icon هذا. نسخة منه أدناه.

"⚠️ حول حجم الحزمة الإضافي الذي جلبته جميع رموز SVG التي قمنا باستيرادها في 3.9.0 ، سنوفر واجهة برمجة تطبيقات جديدة للسماح للمطورين باستيراد الرموز حسب حاجتك ، ويمكنك تتبع # 12011 لمزيد من التقدم.
قبل ذلك ، يمكنك استخدام المكون الإضافي webpack من المجتمع

الجزء الأخير رائع ، تقسيم الكود وتحميل الرموز بشكل غير متزامن ، أو في حالتي ، تقسيم الكود وعدم استخدام الرموز على الإطلاق.

هل تخلى المسؤول عن هذا؟ منذ متى ولم يتم حلها بعد

هل تخلى المسؤول عن هذا؟ منذ متى ولم يتم حلها بعد

@ zhe- هي

لا يوجد حل واضح!

هل هذا المسؤول حقاً لن يحل هذه المشكلة؟مثل هذه الحزمة الكبيرة غير الضرورية مقتنعة حقًا بالمغادرة

تضمين التغريدة

tibotiber شكرًا للرابط إلى أداة تحميل الرموز ، لا يزال يتم إدراج

@ jasan-s أعتقد أن ذلك سيعتمد على كيفية إنشاء الحزم ومكان استخدام الرموز. على سبيل المثال ، أنا أستخدم أحدث تطبيق create-رد فعل ، والذي يقوم بتهيئة تقسيم الكود بالنسبة لي ، وأتأكد من عدم استخدام رموز import في أي مكان في شجرة المكونات للحزمة الرئيسية (لا أستخدم الرموز مطلقًا) .

الحل البديل من tobiaslins لا يعمل بالنسبة لي ، فهو يقول Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' يمكن لأي شخص أن يرشدني إلى كيفية إصلاحه؟ شكر

marcosfede أستخدم cra ، هل هناك طريقة لعدم الإخراج؟ لا يزال لدي هذا الخطأ

./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.

تضمين التغريدة خطأي. حصلت عليها الان.

لدي فكرة 💡 @ afc163

يمكننا استخدام رمز svg ، ثم الاحتفاظ بالاستخدام السابق:

<Icon type='search' />

ثم من خلال المكون الإضافي بابل إلى:

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

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

ثم يمكنك استخدام اهتزاز الشجرة لحزم الرموز المستخدمة فقط.

بالنسبة للنوع الديناميكي ، فقط استخدمه إذا لم يكن مدعومًا. يمكن استخدامه لتلبية الاحتياجات الديناميكية:

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

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

في الواقع ، تتم إزالة الوظيفة الفعلية للنوع الأصلي ، ويتم تحويل جميع استخدامات النوع إلى استخدام المكون.

لدي فكرة 💡 @ afc163

يمكننا استخدام رمز svg ، ثم الاحتفاظ بالاستخدام السابق:

<Icon type='search' />

ثم من خلال المكون الإضافي بابل إلى:

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

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

ثم يمكنك استخدام اهتزاز الشجرة لحزم الرموز المستخدمة فقط.

بالنسبة للنوع الديناميكي ، فقط استخدمه إذا لم يكن مدعومًا. يمكن استخدامه لتلبية الاحتياجات الديناميكية:

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

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

في الواقع ، تتم إزالة الوظيفة الفعلية للنوع الأصلي ، ويتم تحويل جميع استخدامات النوع إلى استخدام المكون.

الفكرة هي نفس التحول 4.0 ، ولكن من الواضح أن استخدام babel escaping يقلل من عبء العمل ، ولا يلزم التعامل إلا مع التغييرات الديناميكية يدويًا.

لقد كتبت مؤقتًا مكونًا إضافيًا من Babel بعد نشر التعليقات الليلة الماضية. لقد جربته محليًا وكان ممكنًا تمامًا @ 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)
          }
        })
      },
    }
  };
}

يجب تحسين الوظيفة الفعلية لقواعد التحويل السفلي ونوع الإخصاء.

أي تقدم ؟

راجع الحل المجمّع في رمز مصدر الرمز الرسمي ، وقم بتعبئة الرمز في ملف js بشكل منفصل
https://github.com/Beven91/webpack-ant-icon-loader

ARKKYN antd v4 قيد التقدم # 16911

يمكنك تجربة الإصدار ألفا من antd 4 الآن

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

سحب أيقونة لدعم اهتزاز الشجرة.

هل هذا المسؤول حقاً لن يحل هذه المشكلة؟مثل هذه الحزمة الكبيرة غير الضرورية مقتنعة حقًا بالمغادرة

في الواقع ، هذا الشيء له نفس النغمة مثل ما فعله afc163 في عيد الميلاد. النص الفرعي هو "أعجبني ، هل يعجبك ذلك أم لا"

@ lizy0329 4.0.0-alpha.2 تم تغييره ، بما في ذلك ترتيبات الطاقة والوقت ، إذا كنت في عجلة من أمرك ، فورك يغيرها بنفسك ...

@ lizy0329 انظر https://github.com/ant-design/ant-design/pull/18217

ليس رائعًا حقًا.

@ lizy0329 انظر # 18217

ليس رائعًا حقًا.

إنه ليس رائعًا حقًا. ولكن عندما يتغير هذا الشيء ، يجب تخيل العواقب. لا يمكن مقارنة نفس الدرجة اللونية مثل HO! HO! بدون مقارنة.

ههههههههههه

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

لماذا استخدم SVG بدلاً من الخط؟
استخدم مكونات React SVG للأيقونات بدلاً من خط الرمز

هل قامت شركة بهذا من قبل؟
تسليم Octicons مع SVG

ما هي المشكلة الأن؟
تستخدم الأيقونة السابقة الخط الذي تم تحميله بواسطة cdn ، ولن ينعكس الحجم على البائع. لا يوجد cdn افتراضي (لا يزال بإمكانك وضع جميع الرموز في قطعة واستخدام cdn الخاص بك للاستضافة) لاستضافة رمز svg ، وسينعكس هذا الجزء في البائع.
ما تمت مناقشته في هذه المسألة هو كيفية القيام بهز الشجرة ، وكيفية تحميل أيقونة عند الطلب.

إذا كنت لا تستطيع تحمل ذلك ، فقم بتحميل جميع الرموز مرة واحدة ، فهناك (في المشكلة) ثلاث طرق على الأقل لتجنبها.

@ afc163
أعتقد أن سجل التغيير 3.9 غير ودي للغاية. لم يشرح سبب التغيير إلى SVG. ما هي عيوب الخط وما فائدته؟

راجع للشغل أنا أعارض استخدام svg (مثل هذا ، viewBox حتى 1024 * 1024) ، مما يتسبب في زيادة مستهلكة للوقت في عمليات الطبقة المركبة.

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

@ afc163 هذا قصير جدًا ولا يكفي لشرح سبب الحاجة إلى التغيير إلى SVG. لم يقدم المسؤول تفسيرًا واضحًا بدرجة كافية لشرح سبب استخدام svg وكيفية تحميل الرمز عند الطلب ، وأعتقد أن هذا هو أحد أسباب العديد من المشاعر السلبية في هذه القضية.

muzea شكرا على الاقتراح
viewBox تأثير svg على أداء جعل من svg其子path مسار الرسم رأسها. حقا تسبب الزيادة في تشغيل طبقة التركيب ، وهذا الأخير هو الرأس الكبير.
إذا كان ذلك يعني أن رمز svg نفسه (العرض والارتفاع) كبير جدًا ، فإن الرمز الكبير سيؤدي بالفعل إلى تعقيد الرسم ، لكن معامل الارتباط منخفض نسبيًا. ما يمكن ضمانه هو أنه في عملية معالجة الرمز الذي تم الحصول عليه من المصمم ، سيتم تحسين التجربة المعرفية للمستخدم قدر الإمكان (الرمز غير مشوه بشكل كبير) ، وسيتم تنفيذ ضغط المسار والتحسين ذي الصلة بأقصى دقة تقريبية. في الواقع ، إذا كنت تريد التأكد من أن المتصفح يتم عرضه في مرحلة طبقة التكوين ، فسيتم النظر في مخطط svg sprite ، ولكن هذا عادةً ما يضيف آثارًا جانبية إلى الصفحة (أضف التعريفات ذات الصلة في الرأس أو المواضع الأخرى) ، وهو أمر مهم لقابلية الصيانة و بالنسبة للمكتبات ذات المتطلبات متعددة الاستخدامات ، قد لا يتم أخذها في الاعتبار.

ما هي السيناريوهات التي يكره فيها الأشخاص svg كحل رمز تطبيق ويب يستحق التقدير؟

• مستخدمي IE8
• كانت حالة شبكة المستخدم جيدة
• طالما يمكن رؤية الرمز (لا تهتم بالوضوح)
• تعد الرموز أحادية اللون كافية دائمًا الآن وفي المستقبل

إن النقص الرسمي في متابعة هذه المسألة ، في الواقع ، الشخص المقابل للمهمة لم يحل المشكلة ، لكنها لن تكون كذلك.

@ lizy0329 كيف يكون الشخص ضارًا على استعداد للتكهن بسلوك الآخرين ، لا يحق للآخرين التدخل. لكن هذا الشخص لا يزال موضع ترحيب لذكر العلاقات العامة

تضمين التغريدة
أداء جزء الرمز في المستند منخفض جدًا على المستعرض الخاص بي.

في الواقع ، الكروم على OSX ، عندما تحتوي الصفحة على الكثير من أيقونة antd ، سيكون الأداء سيئًا للغاية.

ربما يمكن أن يساعدنا babel-plugin-macros حل هذه المشكلة؟

@ lizy0329 كيف يكون الشخص ضارًا على استعداد للتكهن بسلوك الآخرين ، لا يحق للآخرين التدخل. لكن هذا الشخص لا يزال موضع ترحيب لذكر العلاقات العامة

هذه ليست تكهنات خبيثة ، إنها تسمى "البحث عن القواسم المشتركة". لم يحدث الحادث عن طريق الصدفة ، بل يجب أن يكون تراكمًا طويل المدى. لم أقصد الافتراء ، أريد فقط أن يتطور بشكل أفضل ، وأن أفكر في العواقب والحلول لكل تحديث.

إذن متى يمكنني استخدام هذا؟ لقد استخدمت antd في المشروع ولم أفعل شيئًا ، لذلك قمت باستيراد زر ، وتغيرت الحزمة المعبأة من 177k إلى 1.1m ... نظر المحلل إليه وكان رموزًا أيضًا. كبير

هل توجد طريقة لإزالة الرموز من الحزمة عند عدم استخدامها؟

أنا أستخدم تجاوز مع إنشاء تطبيق. مثل ذلك:

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

يجب أن الرجال تحقق من @ qaiser110 الصورة حل ل antd@3 .

حجم الحزمة ضخم لأن المصدر antd يقوم باستيراد أحرف البدل لجميع الرموز . الحل في المنشور المرتبط أعلاه هو استخدام webpack resolve.alias لإعادة توجيه استيراد @ant-design/icons/lib/dist إلى ملف مخصص يحتوي على رموز منتقاة من @ant-design/icons .

إنه أفضل من امتلاك حزمة كبيرة ، لكنه لا يزال غير مثالي لأنه يتعين عليك اختيار الرموز يدويًا. على الرغم من أنك عادة ما تختار الكرز فقط حسب الضرورة (عندما تكون أيقونة مفقودة). لمعرفة ما يجب اختياره ، يمكنك البحث من خلال antd وكود المصدر الخاص بك عن الرموز المستخدمة.

سيكون من المفيد إذا كان لدينا ملف مشترك أو حزمة من الرموز المنتقاة من مصدر antd . بهذه الطريقة ، علينا فقط أن نقلق بشأن قطف الكرز لمصدرنا الخاص. هنا جوهر الفكرة . يمكننا تجميع الرموز التي يصدرها مكون antd وبدلاً من النظر إلى مصدر antd لاختيار الكرز يدويًا ، يمكنك فقط export * from 'antd-cherry-pick-icons/icon' في ملف الرمز المخصص الخاص بك. يمكن القيام بذلك بجهد مجتمعي لإبقائه محدثًا بمصدر antd قدر الإمكان.

LucasBassetti ، هل أنت متأكد أنك لست بحاجة إلى أيقونات؟ حتى إذا كنت لا تستخدم <Icon /> مباشرة ، فإن بعض مكونات antd تستخدم ` . على سبيل المثال ، <Alert /> .

لاحظ أن antd 4.0 (في ألفا) يصلح هذه المشكلة عن طريق عدم استخدام استيراد حرف بدل . وبدلاً من ذلك ، فإنهم يختارون الواردات لكل مكون .

الحل المؤقت الذي نجح معي حتى يتم إصلاحه (antd> = 3.9)

1. تكييف حزمة الويب لحل الرموز بشكل مختلف. في تهيئة حزمة الويب الخاصة بك:

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

1. أنشئ icons.js في المجلد src/ أو أينما تريد. تأكد من أنه يطابق مسار الاسم المستعار!
   في هذا الملف تحدد الرموز التي يجب أن تتضمنها antd! أنا فقط بحاجة إلى أيقونة أسفل لمكون التحديد من antd.

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

من الممكن أيضًا إجراء ذلك باستخدام react-app-rewire (تعديلات إنشاء التطبيق التفاعلي) ضمن config-overwrites.js

إذا كان أي شخص يبحث عن 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
);

تم تغيير مسار رموز @ant-design/icons/lib/outline/DownOutline

يهتم مارك بهذه المشكلة. حاليًا ، يتم استخدام antd 3. تم إدخال زر. فقط قم بربط اللحظة والرمز. حجم ملف الرمز أكثر من 500 كيلو.

يمكن الانتباه إلى مشكلات لحظة https://github.com/ant-design/babel-plugin-import/issues/352

للأشخاص الذين يستخدمون إنشاء تطبيق تفاعل عبر إعادة تطبيق رد فعل .

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

لست متأكدًا من السبب ولكن بعد استخدام icon.js الخاص بك ، زادت مجموعتي بمقدار 600 كيلوبايت.

ربما لأنني يجب أن أستخدم هذه الحزمة في الكود الخاص بي https://www.npmjs.com/package/html-webpack-inline-source-plugin

لقد قللت حجم الحزمة الخاصة بي بمقدار config-override.js كيلو بايت عن طريق تحرير

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

قبل

بعد

لقد قللت حجم الحزمة الخاصة بي بمقدار config-override.js كيلو بايت عن طريق تحرير

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

قبل

بعد

شكرا لك! لقد ساعدني!

تم تغيير مسار رموز @ant-design/icons/lib/outline/DownOutline

مرحبًا ، هل أنت قادر على إيجاد أي عمل في الجوار. أنا أيضا حصلت على نفس الخطأ

كيفية إزالة @ ant-design إذا كنت لا تستخدم الأيقونة المدمجة ؟

من ما أراه هنا هناك فقط الحلول المقدمة. ألن يكون من الأسهل والأكثر نظافة أن تقوم المكونات باستيراد الأيقونة التي تستخدمها؟ هذا من شأنه أن يحل السبب الجذري وأتوقع ألا يكون هذا صعبًا إذا استخدمنا عمليات استيراد مسماة بدلاً من ذلك ، أليس كذلك؟

Nomeasmo ، يجب إصلاحه في الإصدار 4 ، وفقًا لخريطة الطريق .

سيكون من الرائع لو تم إصلاح 3.X. لا أخطط للترقية إلى 4 إن أمكن.

على أمل الانتقال من Ant تمامًا يومًا ما لأن CSS لأشياء بسيطة مثل الأزرار معقدة للغاية ، وتفتقر المكتبة إلى ميزات إمكانية الوصول ، وحتى تحديثات التصحيح مليئة بما يقرب من 1000 التزام. هذا مجرد طريقة أكثر من اللازم لتذوقي.

علامة

للأشخاص الذين يستخدمون إنشاء تطبيق تفاعل عبر إعادة تطبيق رد فعل .

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 جوهر

لا يعمل لا يزال حجم حزمة الرموز مرتفعًا

يبدو أن اهتزاز الشجرة للرموز لا يعمل خارج منطقة الجزاء في الإصدار 4.0.0-beta.0.
هل نجح أي شخص في تقليص حزمة الرموز؟ هل يمكنك مشاركة التكوين الخاص بك من فضلك؟

جربت لاحقًا الإصدار 4.0.0-beta.1 وأزلت الحزمة @ant-design/compatible ، ولا تزال جميع الرموز مضمنة في الحزمة.

للأشخاص الذين يستخدمون إنشاء تطبيق تفاعل عبر إعادة تطبيق رد فعل .
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 جوهر

لا يعمل لا يزال حجم حزمة الرموز مرتفعًا

تحتاج إلى ملف icons.js لتضمين الرموز التي تحتاج إلى استيرادها ، مثل https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531

الحل المؤقت الذي نجح معي حتى يتم إصلاحه (antd> = 3.9)

1. تكييف حزمة الويب لحل الرموز بشكل مختلف. في تهيئة حزمة الويب الخاصة بك:

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

1. أنشئ icons.js في المجلد src/ أو أينما تريد. تأكد من أنه يطابق مسار الاسم المستعار!
   في هذا الملف تحدد الرموز التي يجب أن تتضمنها antd! أنا فقط بحاجة إلى أيقونة أسفل لمكون التحديد من antd.

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

من الممكن أيضًا إجراء ذلك باستخدام react-app-rewire (تعديلات إنشاء التطبيق التفاعلي) ضمن config-overwrites.js

إذا كان أي شخص يبحث عن 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
);

خفضت مجموعتي من 700 كيلوبايت إلى 200 كيلوبايت ، شكرًا

يبدو أن اهتزاز الشجرة للرموز لا يعمل خارج منطقة الجزاء في الإصدار 4.0.0-beta.0.
هل نجح أي شخص في تقليص حزمة الرموز؟ هل يمكنك مشاركة التكوين الخاص بك من فضلك؟

جربت لاحقًا الإصدار 4.0.0-beta.1 وأزلت الحزمة @ant-design/compatible ، ولا تزال جميع الرموز مضمنة في الحزمة.

أواجه نفس المشكلة في 4.0.0-rc.0 على الرغم من استيراد الأيقونة المحدّث

jhockett كان لدي نفس المشكلة! اكتشفت أن بعض وارداتي كانت تكسر عملية هز الأشجار. على سبيل المثال: _استيراد نص من "antd / lib / typography / Text" ؛ _
لقد استبدلت به _import {Typography} من 'antd'؛ _ ، وتركت الرموز مجموعتي!

jhockett كان لدي نفس المشكلة! اكتشفت أن بعض وارداتي كانت تكسر عملية هز الأشجار. على سبيل المثال: _استيراد نص من "antd / lib / typography / Text" ؛ _
لقد استبدلت به _import {Typography} من 'antd'؛ _ ، وتركت الرموز مجموعتي!

تستخدم جميع واردات تصميم النمل الصيغة التي ذكرتها: _ استيراد {طباعة} من 'antd'؛ _
لذلك لا يبدو أن هذه هي مشكلتي ، ولكن ربما قد يتأثر الآخرون بها!

الحل المؤقت الذي نجح معي حتى يتم إصلاحه (antd> = 3.9)

1. تكييف حزمة الويب لحل الرموز بشكل مختلف. في تهيئة حزمة الويب الخاصة بك:

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

1. أنشئ icons.js في المجلد src/ أو أينما تريد. تأكد من أنه يطابق مسار الاسم المستعار!
   في هذا الملف تحدد الرموز التي يجب أن تتضمنها antd! أنا فقط بحاجة إلى أيقونة أسفل لمكون التحديد من antd.

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

من الممكن أيضًا إجراء ذلك باستخدام react-app-rewire (تعديلات إنشاء التطبيق التفاعلي) ضمن config-overwrites.js

إذا كان أي شخص يبحث عن 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
);

خفضت مجموعتي من 700 كيلوبايت إلى 200 كيلوبايت ، شكرًا

عندما أستخدم هذا ، لا يعمل ، فماذا أفعل بعد ذلك:

بالنسبة لأولئك الذين يستخدمون Parcel.js ، فإن القيام بما يلي قد نجح معي:

npm install purched-antd-icons

وأضف package.json :

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

يبدو أن اهتزاز الشجرة للرموز لا يعمل خارج منطقة الجزاء في الإصدار 4.0.0-beta.0.
هل نجح أي شخص في تقليص حزمة الرموز؟ هل يمكنك مشاركة التكوين الخاص بك من فضلك؟

جربت لاحقًا الإصدار 4.0.0-beta.1 وأزلت الحزمة @ant-design/compatible ، ولا تزال جميع الرموز مضمنة في الحزمة.

لقد قمت بحل مشكلتي عن طريق تغيير تكوين babel-plugin-import هذا النحو.

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

مستوحى من https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531 لقد عملت مع antd@4 (https://github.com/ant-design/ant - التصميم / القضايا / 20661).

أضف resolve.alias إلى التكوين webpack (يجب أن يعمل أيضًا مع customize-cra ):

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

يجب أن يبدو icons.tsx هكذا:

/**
 * 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";

على سبيل المثال ، مطلوب رمز LoadingOutlined أعلاه لمكون Button . أضف كل ما تبذلونه من الرموز المطلوبة في هذا الملف. ويمكنك أيضًا إعادة استخدام هذا الملف. ولكن هذا الأمر متروك لك لأنه يمكنك أيضًا استخدام الاستيراد المباشر من @ant-design/icons :

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

@ matzeeable الحل المقترح لم يعمل بالنسبة لي. أتساءل ما هي الطريقة الصحيحة لمعرفة الرموز التي يجب تضمينها في icons.tsx ؟ على سبيل المثال: لدي عناصر نموذج مثل InputNumber و Select القائمة المنسدلة. هل من تلميحات من فضلك؟

أتساءل ما هي الطريقة الصحيحة لمعرفة الرموز التي يجب تضمينها في icons.tsx ؟ على سبيل المثال: لدي عناصر نموذج مثل InputNumber و Select القائمة المنسدلة. هل من تلميحات من فضلك؟

@ pradeepb6 تخيل أنك تقوم بتضمين مكون جديد antd . سيحاول Webpack حل الرموز ولكن لا يمكنه العثور على تصدير مسمى لأنك لم تحدده مطلقًا في icons.tsx . سوف تحصل على تحذير مثل هذا:

بعد ذلك ، تعرف الرموز التي يجب تصديرها في icons.tsx حتى يعمل المكون كما هو متوقع. 🙂

@ matzeeable شكرا لك. حاولت ذلك. لكني أحصل على أخطاء كما هو موضح في لقطة الشاشة. يمكن العثور على الرمز هنا .

لقد كتبت بالفعل في برنامج babel-plugin-import github ، لكن ربما واجه شخص ما هذه المشكلة بسبب وجود المزيد من الأشخاص هنا. لقد انتقلت إلى الإصدار 4 وألاحظ حجم الحزمة الكبير.
عندما أضفت "libraryDirectory": "es" كما هو مكتوب في https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378 ألاحظ الخطأ التالي:

[ 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 

أنا أستخدم next.js بالمناسبة. العمق:

    "@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",

أي واحد؟

@ afc163 يكافأ 142.10 دولارًا إلى vagusx . شاهده على IssueHunt

• : حقيبة النقود: إجمالي الإيداع: 203.00 دولارًا
• : tada: مكافأة المستودع (20٪): 40.60 دولار
• : مفتاح الربط: رسوم الخدمة (10٪): 20.30 دولارًا

واجهت نفس المشكلة و chemicalkosek ، إنها [email protected] + next.js حلها حاليًا بواسطة 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"
}

آمل أن يساعد الآخرين :)

@ i-tengfei نجاح باهر ، إنه يعمل! شكرا جزيلا!

بالنسبة لـ antd @ 4 ، نستخدم الآن حزمة خاصة ، والتي تحل محل حزمة @ ant-design / icons وتستبدل أيقونات antd بأيقونات fontawesome.

يوفر فقط الرموز التي يتطلبها antd. وتم تقليل حجم الحزمة بالنسبة لنا بشكل كبير ، حيث لم نتمكن من تمكين اهتزاز الأشجار وبالتالي تم تضمين حزمة التصميم / الأيقونات بالكامل.

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

الرجاء الترقية إلى [email protected] ، لقد تم حل هذه المشكلة تمامًا.

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

بالنسبة لأولئك الذين يستخدمون Parcel.js ، فإن القيام بما يلي قد نجح معي:

npm install purched-antd-icons

وأضف package.json :

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

شكرا ، إنه يعمل!

@ afc163yesmeck يحدد رمز وفقا للبيانات التي تم إرجاعها بواسطة الخلفية، كيف الحمل الأمامية بشكل غير متزامن، على سبيل المثال، سلسلة رمز إرجاعها بواسطة الخلفية AppstoreOutlined ، كما يلي توجهي:

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

// render
<Icon />

لكن الآن من المستحيل التجميع مباشرة.لا يبدو أن التحميل الديناميكي يعمل

@ afc163

الرجاء الترقية إلى [email protected] ، لقد تم حل هذه المشكلة تمامًا.

20661

لست متأكدًا مما إذا كان قد تم حلها على الإطلاق. لا يزال يحتوي على جميع حزم الرموز في الحزمة:
لدي جميع الرموز المستوردة بهذه الطريقة.
أستخدم "@ ant-design / icons": "^ 4.0.6" و webpack 4.43.0
لديك هذا التكوين أيضا

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

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

@ afc163yesmeck يحدد رمز وفقا للبيانات التي تم إرجاعها بواسطة الخلفية، كيف الحمل الأمامية بشكل غير متزامن، على سبيل المثال، سلسلة رمز إرجاعها بواسطة الخلفية AppstoreOutlined ، كما يلي توجهي:

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

// render
<Icon />

لكن الآن من المستحيل التجميع مباشرة.لا يبدو أن التحميل الديناميكي يعمل

وأعتقد أنه ينبغي أن يكون التغيير إلى {Icon}.
إذا قمت بنشر رسالة الخطأ ، يمكنك الحكم على السبب بشكل أفضل.

باستخدام babel-plugin-import ، خفضت الحجم من 500 كيلوبايت +

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

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

تضمين التغريدة

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

  ],

@ mit123sukinwoeddie شكرا على اقتراحك حاولت على حد سواء ولكن لا يزال لا حظ. لست متأكدًا مما أخطأت في ملف التكوين. التكوين الكامل الخاص بي هو على النحو التالي:

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;

@ afc163yesmeck يحدد رمز وفقا للبيانات التي تم إرجاعها بواسطة الخلفية، كيف الحمل الأمامية بشكل غير متزامن، على سبيل المثال، سلسلة رمز إرجاعها بواسطة الخلفية AppstoreOutlined ، كما يلي توجهي:

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

// render
<Icon />

لكن الآن من المستحيل التجميع مباشرة.لا يبدو أن التحميل الديناميكي يعمل

أعتقد أنه يجب تغييره إلى {Icon}.
إذا قمت بنشر رسالة الخطأ ، يمكنك الحكم على السبب بشكل أفضل.

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 مباشرةً أن وحدة الرمز الأولى غير موجودة. حاولت إضافة تكوين babel-plugin-import ، لكنه ما زال لا يعمل.

تضمين التغريدة

  [
       "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"

مرحبًا ، nwoeddie ~ !، التكوين الخاص بي لا يعمل ، لقد قمت بتقسيم خيارات الاستيراد إلى واحد ، ولكنه غير مستخدم أيضًا هل يمكنني تعلم التكوين الكامل

قد تحل هذه المشكلة المشكلة: https://www.cnblogs.com/fulu/p/13255538.html

تضمين التغريدة

  [
       "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"

مرحبًا ، nwoeddie ~ !، التكوين الخاص بي لا يعمل ، لقد قمت بتقسيم خيارات الاستيراد إلى واحد ، ولكنه غير مستخدم أيضًا هل يمكنني تعلم التكوين الكامل

هذه ليست الصيغة الصحيحة لبابل 7. لا يدعم البرنامج المساعد للاستيراد مصفوفة. الطريق الصحيح:

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