Ant-design: Ikon SVG membuat ukuran bunlde terlalu besar

Dibuat pada 3 Sep 2018  ·  223Komentar  ·  Sumber: ant-design/ant-design


Issuehunt badges

  • [] Saya telah mencari masalah dari repositori ini dan yakin bahwa ini bukan duplikat.

Versi: kapan

3.9.0

Lingkungan Hidup

webpack4

Tautan reproduksi

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

Langkah-langkah untuk mereproduksi

webpack build

Apa yang diharapkan?

ikon 按需 打包, js 文件 拆分

Apa yang sebenarnya terjadi?

打包 到 penjual potongan 里去 了




Ringkasan IssueHunt

vagusx

Pendukung (Total: $ 203.00)

  • issuehunt
  • rororofff
  • ssprettychill

Permintaan penarikan yang dikirim

- # 18217 menggunakan ikon desain semut 4.0

Tips

IssueHunt telah didukung oleh sponsor berikut. Menjadi sponsor

Rewarded on Issuehunt Inactive IssueHuntFest ❓FAQ 🗣 Discussion

Komentar yang paling membantu

💢 Sakit kepala. . . . Paman. . .

Semua 223 komentar

Terjemahan dari masalah ini:


ukuran paket antd svg terlalu besar, disarankan paket @ ant-design / icons sesuai permintaan

  • [] Saya telah mencari masalah dari repositori ini dan yakin bahwa ini bukan duplikat.

Versi: kapan

3.9.0

Lingkungan Hidup

Webpack4

Tautan reproduksi

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

Langkah-langkah untuk mereproduksi

Pembuatan webpack

Apa yang diharapkan?

Paket Ikon sesuai kebutuhan, file js dibagi

Apa yang sebenarnya terjadi?

Dikemas ke dalam chunk-vendor

Saya hanya menggunakan beberapa ikon

image

<Icon /> memperkenalkan perpustakaan ikon secara penuh secara default. Karena saya tidak tahu jenis ikon apa yang akan Anda perkenalkan untuk runtime. Sebelumnya, ikon dihosting di iconfont.cn jadi itu dikemas tanpa persepsi.

Ini membutuhkan diskusi mendalam tentang paket sementara, lihat https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579

cc @ yaa

Diperlukan untuk menyediakan metode yang dapat dimuat sesuai permintaan, dan metode ini juga digunakan di dalam komponen antd.

import Star from 'antd/icons/star';

<Star />

Tetapi jika Anda melakukan ini, tulisan sebelumnya tidak kompatibel

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

Itu tidak dapat dikemas sesuai permintaan, dan pemuatan asinkron juga bagus,

Sebelum menggunakan iconfont, konten halaman akan keluar terlebih dahulu, dan ikon akan dimuat dengan lambat

<Icon.Star />

Tetapi jika Anda melakukan ini, tulisan sebelumnya tidak kompatibel

Tidak, selama Anda tidak membutuhkan <Icon /> tidak akan dapat mengemas semuanya.

Beberapa adegan tidak dapat dikemas sesuai permintaan, seperti pengaturan ikon menu, jika dapat dikonfigurasi di latar belakang, sehingga bagian depan tidak dapat memprediksi ikon apa yang akan disetel.
Pemuatan asinkron lebih cocok, cukup ketikkan @ ant-design / icons menjadi potongan

Faktanya, komponen bawaan yang menggunakan <Icon /> , seperti <DatePicker /> , <Select /> dll., Akan diperkenalkan sepenuhnya saat digunakan.

Jika dapat dikonfigurasi di latar belakang, bagian depan tidak dapat memprediksi ikon apa yang akan disetel. Pemuatan asinkron lebih cocok

Menu dari sistem back-end yang kami buat telah dikonfigurasi. Pemuatan ikon yang tidak sinkron sangat diperlukan. Paket lengkap terlalu besar.

Saya merasa asynchronous lebih baik.
Jika Anda ingin mengemasnya sesuai permintaan, Anda harus menulis plugin babel seperti babel-plugin-import .

analyzer

Faktanya, komponen bawaan yang menggunakan <Icon /> , seperti <DatePicker /> , <Select /> dll., Akan diperkenalkan sepenuhnya saat digunakan.

Tulisan internal diubah

Dalam proyek, tipe adalah variabel, dapatkah saya hanya memasukkan jumlah penuh?
<Icon type={icon} />
Bisakah ini diperkenalkan sebagian?

Lihat apakah Anda dapat menggunakan sprite simbol svg untuk mengurangi ukuran paket penuh sebanyak mungkin.

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

Selain itu, paket dist harus dibuat langsung di @ant-design/icons , dan tidak perlu secara langsung mengandalkan kode sumber yang dikompilasi ringan.

+1, paketnya memang berlipat ganda

💢 Sakit kepala. . . . Paman. . .

Hal yang paling memalukan adalah membawa banyak SourceMappingUrl

Itu membuat saya kembali ke versi 3.8.2

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

Berikut adalah solusi yang menggunakan resolve.alias di webpack untuk mengurangi ukuran bundel.
Kami berencana untuk merancang API baru yang memungkinkan impor ikon yang dibutuhkan di masa depan.
Perhatikan bahwa Anda juga harus mengimpor ikon yang digunakan dalam komponen antd , seperti loading , close-circle dan seterusnya.


https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (proyek umi)
Berikut ini solusi sementara: konfigurasikan bidang resolve.alias dari webpack.
Kedepannya, kita harus menemukan cara untuk mendesain API ikon baru untuk memfasilitasi penggunaan ikon pemuatan sesuai permintaan.
Perhatikan bahwa ikon sesuai permintaan juga harus menyertakan ikon yang digunakan oleh komponen lain dari antd , seperti loading , close-circle dan seterusnya.

@HeskeyBaozi Pertama-tama, terima kasih atas kerja keras Anda! Waktu saya saat ini adalah 9:29 , dan saya melihat bahwa waktu yang Anda kirimkan adalah 6 hours ago , saudara benar-benar cukup sulit! Suka: thumbsup :: thumbsup :: thumbsup:

Pemahaman saya adalah membuat daftar ikon yang digunakan oleh proyek secara terpisah, termasuk ikon yang digunakan oleh antd

Anda dapat mengimpor file @ ant-design / icons / lib / dist.js ke dalam file dll untuk cache jangka panjang

@ChiaJune antd Daftar ikon yang sepenuhnya digunakan di komponen, jika ada kelalaian, saya dapat menambahkan
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

Anda bisa mengacu pada pendekatan fontawsome

SEBUAH

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

Pertahankan penggunaan lama dan tambahkan pesan peringatan & migrasi di konsol.

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

Penyedia API baru seperti:

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

<Star />
<SettingIcon />

Dan juga bisa mengguncang pohon:

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

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

Berikut adalah solusi yang menggunakan resolve.alias di webpack untuk mengurangi ukuran bundel.
Kami berencana untuk merancang API baru yang memungkinkan impor ikon yang dibutuhkan di masa depan.
Perhatikan bahwa Anda juga harus mengimpor ikon yang digunakan dalam komponen antd , seperti loading , close-circle dan seterusnya.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (proyek umi)
Berikut ini solusi sementara: konfigurasikan bidang resolve.alias dari webpack.
Kedepannya, kita harus menemukan cara untuk mendesain API ikon baru untuk memfasilitasi penggunaan ikon pemuatan sesuai permintaan.
Perhatikan bahwa ikon sesuai permintaan juga harus menyertakan ikon yang digunakan oleh komponen lain dari antd , seperti loading , close-circle dan seterusnya.

@HeskeyBaozi Solusi hebat !! (hingga antd membersihkannya dan mengizinkan pengimporan ikon tunggal) Saya telah mencoba menggunakan resolusinya.alias untuk memperbaiki masalah ini, tetapi ini tepat sasaran. Terima kasih!

awasi ini, karena kami menggunakan versi ini juga.

cc @jameswhf @xcqwan

Sama untuk ku. Mengimpor secara terpisah tidak mencakup semua skenario penggunaan jadi perlu memperbaiki penguncian pohon. Silakan cek di sini

@bayu_joo
Saya menggunakan webpack.alias dan berfungsi untuk saya. Mungkin ini dapat membantu Anda :)
image
cabang antd-icon-tree-shaking repo saya (Webpack4 + Babel 7.0)

Ini juga menyebabkan masalah jika yang saya miliki hanyalah Button dalam satu bundel (mungkin karena ini mendukung ikon). Adakah solusi untuk mengurangi ukuran bundel jika semua yang saya gunakan adalah Button ?

image

(Di tangkapan layar - Saya hanya memiliki komponen Button tetapi ikonnya membengkak terutama bundelnya)

Solusi Sementara yang berhasil untuk saya sampai diperbaiki (antd> = 3.9)

  1. Sesuaikan webpack untuk menyelesaikan ikon secara berbeda. Dalam konfigurasi webpack Anda:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Buat icons.js di folder src/ atau di mana pun Anda menginginkannya. Pastikan itu cocok dengan jalur alias!
    Dalam file ini Anda menentukan ikon mana yang harus disertakan! Saya hanya membutuhkan Ikon Bawah untuk komponen Pilih antd.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Ini juga memungkinkan untuk melakukan ini dengan react-app-rewire (modifikasi create-react-app) dalam config-overwrites.js

Saya pikir api yang lebih baik adalah jika kita dapat mengatur ikon dengan melewatkan beberapa JSX sehingga saya dapat mengimpor ikon yang diperlukan saja dan meneruskannya ke tombol. Juga akan membuatnya mudah untuk bekerja dengan ikon pihak ketiga (atau svg).

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

Hanya preferensi pribadi saya :)

Untuk orang yang menggunakan create-react-app melalui 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 inti

Untuk orang yang menggunakan create-react-app melalui 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 inti

Melakukan metode ini menghapus kompatibilitas twoToneColor.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
menghasilkan:
image

Hai,
Penyebab masalah ini adalah kemampuan untuk menggunakan ikon seperti <Icon type="check-circle" . Api ini membutuhkan setiap ikon untuk disertakan sehingga dapat memberikan apa pun yang Anda berikan sebagai tipe.

Ini juga memberi kami kemampuan untuk memutuskan ikon saat runtime dan ini sangat berharga bagi saya. Jadi menurut saya API harus tetap sama tetapi komponen Ikon harus mendukung pemuatan ikon dengan jenis yang diberikan sesuai permintaan .

Mungkin menggunakan impor dinamis (bergantung pada # 12235 - meningkatkan ke Webpack 4) atau melalui pustaka Webpack 3 seperti react-loadable

Berdasarkan komentar ini lanjutkan solusi sementara:

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

paket buy-antd-icons menghapus semua ikon yang tidak digunakan oleh komponen resmi antd. Untuk kondisi saya, Icomoon adalah penyedia sistem ikon proyek.

Berikut ini analisis perbandingan create-react-app bundle yang dikeluarkan.

keluaran webpack
output

analisis bundel
comparing

Anda dapat mengimpor file @ ant-design / icons / lib / dist.js ke dalam file dll untuk cache jangka panjang

sebelum:

image

setelah:

image

solusi dari @tobiaslins tidak berfungsi untuk saya, dikatakan Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' adakah yang bisa menunjukkan cara memperbaikinya? Terima kasih

@marcosfede Saya memiliki masalah yang sama dengan Anda. Alias ​​tersebut tidak berfungsi dengan benar.

Periksa apakah Anda memiliki __dirname disetel di path.resolve(__dirname, "./src/icons.js")

Jika Anda menggunakan create-react-app melalui alternatif react-app-rewired, Anda dapat melakukan:

3.9 peningkatan meningkatkan paket 700kb kami (23%). Meskipun kami menyukai penerapan baru, peningkatan ukuran bundel merupakan kejutan besar. Kenaikan diimbangi karena tidak menyertakan 'iconfont'. Kami akan menerapkan solusi @Obooman yang masih akan melihat peningkatan jejak kami secara keseluruhan, namun tidak cukup untuk menjamin kami membekukan di 3.8.4.

Implementasi paket purchase-antd-icons membuat proyek kami kehilangan banyak ikon.

@michaelpeterlee purched-antd-icons hanya menyediakan ikon-ikon yang dibutuhkan komponen resmi, kami menggunakannya karena kami tidak menggunakan ikon lain di antd. untuk lebih banyak penyesuaian, Anda harus mengelola ikon Anda secara manual atau memilih generator ikon font seperti icomoon atau iconfont sebagai penyedia sistem ikon Anda.

@marcosfede Saya memiliki masalah yang sama dengan Anda. Alias ​​tersebut tidak berfungsi dengan benar.

Periksa apakah Anda memiliki __dirname disetel di path.resolve(__dirname, "./src/icons.js")

Jika Anda menggunakan create-react-app melalui alternatif react-app-rewired, Anda dapat melakukan:

ini berguna, terima kasih. Saya telah mengeluarkan proyek jadi saya memiliki __dirname poin ke folder config tempat file webpack berada alih-alih folder root

Mungkin tim AntDesign harus mempertimbangkan untuk kembali ke cara sebelumnya (sebelum 3.9). Apakah cara yang lebih baik, cara yang bijaksana.

@marcosfede Saya memiliki masalah yang sama dengan Anda. Alias ​​tersebut tidak berfungsi dengan benar.
Periksa apakah Anda memiliki __dirname disetel di path.resolve(__dirname, "./src/icons.js")
Jika Anda menggunakan create-react-app melalui alternatif react-app-rewired, Anda dapat melakukan:

ini berguna, terima kasih. Saya telah mengeluarkan proyek jadi saya memiliki __dirname poin ke folder config tempat file webpack berada alih-alih folder root

Ini berhasil untuk saya, terima kasih!

Berikut adalah perubahan yang akan kami buat di rilis berikutnya untuk menyelesaikan masalah ukuran bundel.

Buat komponen terpisah untuk setiap ikon

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

Hentikan referensi ikon sebagai string

Peringatan yang tidak berlaku lagi akan muncul saat Anda mereferensikan ikon sebagai string di komponen berikut:

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

Untuk kompatibilitas, kami akan memuat sprite SVG sesuai permintaan saat Anda mereferensikan ikon sebagai string.

Daripada mereferensikan ikon sebagai string, Anda harus meneruskan ReactNode secara eksplisit ke props ini:

import StarFilled from 'antd/icons/StarFilled';

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

@yesmeck Solusi bagus yang memperkenalkan goyangan pohon dan tidak ada metode addIcon pada saat yang sama!

Pertanyaan. Bagaimana jika kita memiliki gaya CSS pada ikon ini dan perlu mengubah jenis ikon secara dinamis? Apakah kita harus meneruskan gaya ke semua ikon substitusi?

@michaelpeterlee rc-calendar tidak bergantung pada antd dan @ant-design/icons , jadi tidak seharusnya "memuat seluruh pustaka ikon". Anda dapat membuat masalah di https://github.com/react-component/calendar/issues dengan mereproduksi demo.

Kesalahanku. Saya telah menghapus komentar saya yang tidak relevan. Pasti komponen DatePicker yang memperkenalkan ikon:
image

Maksud saya, saya tidak mengimpor ikon antd di mana pun dalam proyek saya, tetapi beberapa komponen antd mengimpor Icon dari antd . Akan lebih baik jika komponen tersebut hanya dapat mengimpor ikon yang mereka butuhkan, bukan seluruh pustaka ikon.

Berikut adalah perubahan yang akan kami buat di rilis berikutnya untuk menyelesaikan masalah ukuran bundel.

@yaelah

Apakah maksud Anda 3.11.x ? Tampaknya tidak termasuk dalam 3.10.4 .

@johnernaut # 12888

Kembali ke v3.8.4 untuk saat ini, versi 3.9.0+ terlalu besar setelah dikemas. Versi yang disebutkan oleh dewa di atas hanyalah solusi sementara. Saya berharap versi berikutnya memuat ikon secara asinkron

Terima kasih @yesmeck , saya menantikan versi berikutnya.

Saya juga ingin menyebutkan bahwa saya telah menerbitkan plugin Ant Design untuk create-react-app v2 dan craco . Berikut adalah plugin craco-antd di GitHub

Saya baru saja menambahkan Ukuran Bundel Besar dari bagian PR .) Terima kasih atas tip @sunel (dan lainnya). Saya telah menyertakan tautan ke komentar Anda tentang menyiapkan 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"
    }
  }
}

Saya membuat draf repositori reproduksi yang menampilkan masalah ini. Konfigurasi webpack dimodifikasi dari contoh integrasi ng-zorro-antd asli di sini dan tampaknya DllPlugin render pohon-gemetar di Modul ES yang diratakan tidak berguna.

Ini berfungsi seperti yang diharapkan jika DllPlugin tidak ada.

Berikut adalah beberapa latar belakang sejarah tentang webpack yang tidak mengguncang pohon pada modul es datar. Saya percaya apa yang mereka rujuk sebagian besar telah diperbaiki dalam rilis terbaru kecuali beberapa kasus edge DllPlugin .

Menariknya, baru pada bulan Mei webpack mendukung goyangan pohon di DllPlugin , saya telah mengiklankan entryOnly: true tetapi tidak berhasil. Saya akan menyusun contoh yang lebih terisolasi dan mengangkat masalah ke webpack.

Editan: Menambahkan repositori reproduksi dan masalah sejarah.

Akhir cerita: di sinilah tempat penyimpanan reproduksi menjadi salah. Webpack 3.5.6 terlalu tua tanpa dukungan entryOnly: true . Itulah mengapa fesm5 modul tidak goyah.

Bagi mereka yang ingin menggabungkan ng-zorro-antd ke vendor dll

  • Jika Anda memiliki webpack > = 4.9.0 , tambahkan entryOnly: true ke konfigurasi DllPlugin .
  • Jika tidak, tambahkan setelan ini ke konfigurasi webpack Anda
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 telah mendanai $ 200.00 untuk masalah ini. Lihat di IssueHunt

Bisakah file font tidak berpartisipasi dalam pengemasan dan mengimpornya secara lokal?terlalu besar

Apakah pihak resmi berencana untuk mengoptimalkan masalah ini? Dapatkah Anda memberikan solusi svg lokal yang mirip dengan versi sebelum 3.8?

Menantikan peningkatan

Apakah ada solusi resmi?

@fuhaiwei Hingga versi berikutnya, periksa komentar ini untuk solusi dengan mengekspor ikon secara langsung https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Saat ini saya menggunakan webpack.resolve.alias mengganti antd/es/icon dengan komponen kustom.
Perakitan akan menjadi <Icon /> a props.type dan props.theme dikirim ke API yang ditentukan.
Dengan cara ini, semua data Ikon yang digunakan dapat direkam selama pengujian halaman.
Kemudian berdasarkan data dan https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 otomatis menghasilkan icons.js .
Berharap untuk menemukan solusi yang lebih baik.


Saat ini saya menggunakan webpack.resolve.alias untuk mengganti antd/es/icon dengan komponen kustom.
Komponen itu akan mengirim props.type dan props.theme dari <Icon /> ke API yang ditentukan.
Ini memungkinkan Anda untuk merekam semua data Ikon yang digunakan selama pengujian halaman.
Kemudian hasilkan icons.js secara otomatis, berdasarkan data dan https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 .
Berharap untuk menemukan solusi yang lebih baik.

3 bulan telah berlalu, apakah petugas telah menemukan cara untuk memuat sesuai permintaan?

image

Rasanya paling baik untuk memulai dengan metode pendahuluan, dan sangat bagus bahwa semua komponen dikutip secara terpisah seperti materi. . Sekarang hanya komponen yang dapat menggunakan Ikon bawaan, semua ikon sudah dikemas. .

Jika komponen Icon tidak digunakan, paket @ ant-desigin / icons juga akan dimuat

Jika komponen Icon tidak digunakan, paket @ ant-desigin / icons juga akan dimuat

Datepicker juga digunakan, lihat apakah ada di kode. menu juga akan digunakan

Lebih dari 500 KB terlalu besar

Menantikannya, saya awalnya beralih ke versi terbaru. Ketika saya melihat bahwa paketnya sangat besar, itu membuat saya takut

Saya tidak ingin menggunakan format SVG, dapatkah saya mengonfigurasinya secara fleksibel? Konfigurasi untuk menggunakan atau tidak menggunakan svg

Anda dapat memberikan cara untuk mereferensikan hanya satu ikon, dan semua komponen internal antd diperbarui untuk menggunakan cara ini:

import Search from 'antd/icons/Search";

<Search />

Untuk kompatibilitas dengan proyek yang sudah ada, import { Icon } from 'antd'; masih dicadangkan, tetapi selama import { Icon } from 'antd'; digunakan, semua ikon akan diimpor.

Setuju di lantai atas

tandai menunggu solusi sempurna

Ikon 500k, apakah ada solusinya?

Dapatkah seseorang memperbarui saya tentang ini dalam bahasa Inggris? 500kb adalah seperempat dari paket saya. Saya menggunakan webpack dan mengimpor Ikon seperti ini:

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

Saya telah mencoba berbagai cara untuk mengimpornya dan bahkan menghapus impor ikon secara bersamaan, tetapi sepertinya apa pun yang saya lakukan, tetap 500kb. Saya menggunakan webpack, dan mampu mengguncang pohon dengan benar menggunakan fitur pengangkat lingkup eksperimental parcel, tetapi saya tidak dapat menggunakannya karena itu merusak aplikasi saya di 20 tempat lain.

Bagaimana orang menangani masalah ini? Apakah semua orang di sini hanya mengirimkan proyek mereka dengan tambahan 500kb atau apakah solusi mereka jelas saya abaikan?

Apakah mengimpor seperti itu berfungsi dengan build webpack standar?

import Star from 'antd/icons/star';
Jika ada yang bisa memperbarui saya, saya akan sangat menghargainya.

@ApolloGun Solusi telah direferensikan beberapa kali di utas ini, semuanya ada di komentar ini: https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Cara kerjanya adalah dengan memberi tahu Webpack untuk menyelesaikan ikon dari lokasi yang berbeda, khususnya file baru tempat Anda mengekspor persis ikon yang ingin Anda gunakan. Setelah melakukan itu ikon akan berfungsi seperti biasa, tidak ada lagi yang harus diubah dalam komponen.

Saya tidak menggunakan Ikon apa pun tetapi masih mendapatkan file sebesar itu. Mungkin komponen di antd menggunakannya secara internal. Bagaimana cara mengetahui ikon yang digunakan oleh komponen. Ini tampaknya merupakan metode yang baik untuk mengganti ikon Antd dengan ikon khusus untuk hal-hal seperti Select, Dropdown, dll.

Saya tidak menggunakan Ikon apa pun tetapi masih mendapatkan file sebesar itu. Mungkin komponen di antd menggunakannya secara internal. Bagaimana cara mengetahui ikon yang digunakan oleh komponen. Ini tampaknya merupakan metode yang baik untuk mengganti ikon Antd dengan ikon khusus untuk hal-hal seperti Select, Dropdown, dll.

@HeskeyBaozi membuat daftar ikon yang digunakan dalam komponen antd, menggunakan alias webpack:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
Silakan baca seluruh diskusi masalah untuk memahami metode ini.

@ApolloGun Saat ini belum ada solusi resmi.
Permintaan tarik: # 12888 masih bekerja dalam proses.

@yesmeck , @ afc163 Ada rencana untuk segera menutup ini?

@HeskeyBaozi @ afc163 , bagaimana cara saya menggunakan yang baru yang Anda tulis ini? ?

@HeskeyBaozi Bolehkah saya bertanya mengapa kalian tidak mengerjakan ini? Sudah lebih dari lima bulan. Apakah kalian menganggap ini sebagai prioritas rendah?

@HeskeyBaozi Bolehkah saya bertanya mengapa kalian tidak mengerjakan ini? Sudah lebih dari lima bulan. Apakah kalian menganggap ini sebagai prioritas rendah?

Setuju, itu sangat mengganggu = (

Setelah memeriksa kode antd , saya melihat bahwa komponen seperti Button impor Icon , yang pada gilirannya mengimpor (sesuai dengan kode yang dihasilkan)

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

yang menyebabkan penguncian pohon gagal, dan karenanya mengimpor semua ikon. Harap pertimbangkan untuk mengarahkan impor ke @ant-design/icons/lib/index.es.js dan tidak menjalankan operasi pada semua ikon hingga diperlukan. Juga, periksa riwayat baris ini: https://github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3 Baris ini telah berubah sedikit seiring waktu.

Ini secara langsung menyebabkan seluruh proyek tidak dapat digunakan

@septianjoko_

<Icon /> memperkenalkan perpustakaan ikon secara penuh secara default. Karena saya tidak tahu jenis ikon apa yang akan Anda perkenalkan untuk runtime. Sebelumnya, ikon dihosting di iconfont.cn jadi itu dikemas tanpa persepsi.

Ini membutuhkan diskusi mendalam tentang rencana sementara, lihat # 12011 (komentar)

Solusi ini masih dapat digunakan, saya mengujinya, tetapi Anda harus memilah-milah ikon mana yang ada di proyek Anda, ini sedikit merepotkan

Tetapi Anda harus memilah ikon mana yang ada dalam proyek Anda ...

Saya mencoba membacanya sebelumnya dan ternyata banyak referensi icon yang dibuat oleh komponen antd sendiri, dan jumlahnya tidak sedikit.Meski saya kutip langsung di bisnis sangat kecil, tapi mengingat komponen yang boleh dikutip, jumlahnya tidak mudah dihitung.

@chenyong Uh , telur itu sakit. . .

@aryzing Pendekatan Anda terdengar menarik. Apakah akan menghasilkan usaha yang lebih sedikit daripada # 12888? PR itu melibatkan terlalu banyak perubahan yang dapat merusak, mungkin itu bagian dari alasan mengapa itu masih belum selesai setelah berbulan-bulan.

@zachguo Saya

Ikon yang digunakan dalam beberapa komponen antd dirender secara dinamis (yaitu ditentukan saat runtime) berdasarkan prop. Misalnya, lihat api Button:

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

Agar komponen ini dirender dengan benar, komponen Tombol (atau komponen Ikon yang mendasari yang digunakan) harus memiliki akses ke (pada waktu proses) semua ikon , dan tidak mengizinkan goyangan pohon.

Solusinya adalah memiliki API seperti

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

Dalam skenario ini, Anda hanya mengimpor apa yang Anda butuhkan, dan goyangan pohon dapat menendang dan melepaskan semua ekspor yang tidak digunakan dari contoh @antd/some-icons-package .

Masalah ini sudah lebih dari setengah tahun, dan masih belum ada solusi resmi. Solusi yang saya gunakan saat ini adalah menggunakan import() untuk pemuatan asinkron.
Masalah ini telah terjadi lebih dari setengah tahun, dan masih belum ada solusi formal. Solusi yang saat ini saya gunakan adalah menggunakan import() untuk pemuatan asinkron.

Gunakan Komponen Dapat Dimuat yang direkomendasikan dalam dokumentasi resmi React .
Gunakan Komponen yang Dapat Dimuat yang direkomendasikan dalam dokumentasi resmi React .

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

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

image

image

  • Langkah pertama adalah menginstal dependensi: @loadable/component dan @babel/plugin-syntax-dynamic-import .
    Langkah pertama adalah menginstal dependensi: @loadable/component dan @babel/plugin-syntax-dynamic-import .
  • Langkah kedua adalah membuat folder icons di direktori root proyek, dan menggunakan skrip untuk mengekspor semua ikon di @ant-design/icons :
    Langkah kedua adalah membuat folder icons di root proyek dan mengekspor semua ikon di @ant-design/icon menggunakan skrip:

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

    Gunakan node untuk menjalankan skrip ini secara langsung di bawah proyek untuk menyimpan semua ikon yang diekspor ke @ant-design/icons di direktori icons .
    Jalankan skrip ini langsung di bawah proyek menggunakan node untuk menyimpan semua ikon yang diekspor dari @ ant-design/icons di folder icons .

  • Langkah ketiga adalah menyalin komponen / icon / index.tsx di repositori kode Antd ke direktori root proyek dan menamainya sebagai Icon.jsx atau Icon.js , dan kemudian hapus definisi tipe TypeScript dalam kode untuk mendapatkan murni Kode JavaScript. (Jika proyek Anda menggunakan TypeScript, Anda juga dapat langsung menamainya sebagai Icon.tsx atau Icon.ts , jadi tidak perlu menghapus definisi jenis)
    Pada langkah ketiga, salin komponen / icon / index.tsx di repositori kode Antd ke root proyek, dan beri nama Icon.jsx atau Icon.js , lalu hapus definisi tipe TypeScript di kode ke dapatkan kode JavaScript murni. (Jika proyek Anda menggunakan TypeScript, Anda juga dapat menamainya secara langsung sebagai Icon.tsx atau Icon.ts , jadi Anda tidak perlu menghapus definisi tipe)
    Kemudian ubah file kode ini dan gunakan import() dengan @loadable/component untuk memuat file ikon sesuai permintaan.
    Kemudian ubah file kode dan gunakan import() dengan @loadable/component untuk memuat file ikon sesuai kebutuhan.

    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',
    
  • Langkah terakhir adalah mengkonfigurasi Webpack:
    Langkah terakhir adalah mengkonfigurasi Webpack:
    `` beda
    diff - a / webpack.js b / webpack.js
    --- a / webpack.js
    +++ b / webpack.js
    @@ -1,4 +1,5 @@
    jalur const = membutuhkan ('jalur');
    + const webpack = membutuhkan ('webpack');
    const HtmlWebpackPlugin = membutuhkan ('html-webpack-plugin');
    const TerserPlugin = membutuhkan ('terser-webpack-plugin');

    @@ -33, +34,16 @@
    plugin: [
    HtmlWebpackPlugin baru ({
    judul: 'Halaman Luar Biasa',
    template: path.join (__ dirname, 'public / index.html'),
    meta: {
    viewport: 'width = device-width, initial-scale = 1',
    },
    hash: true,
    }),

    • webpack baru.NormalModuleReplacementPlugin (
    • /node_modules\/antd\/es\/icon\/index.js/,
    • path.resolve (__ dirname, 'Icon.jsx')
    • ),
      ],
      menyelesaikan: {
      modul: ['node_modules'],
      @@ -56,13 +61,14 @@
      gunakan: [{
      loader: 'babel-loader',
      pilihan: {
      preset: [
      ['@ babel / preset-env', {target: '> 2,486%, tidak mati'}],
      '@ babel / preset-react',
      ],
      plugin: [
    • ['@ babel / plugin-syntax-dynamic-import'],
      ['@ babel / plugin-proposal-class-properties'],
      ['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}],
      ],
      },
      }]

      ``

Keuntungan dari solusi ini adalah Anda dapat menyimpan semua ikon, dan Anda juga dapat memodifikasi ikon secara sewenang-wenang dalam sistem manajemen latar belakang yang dapat dikonfigurasi tanpa mengkhawatirkan kurangnya ikon; dan ikon dimuat sesuai permintaan, dan hanya akan dimuat ketika ikon halaman tertentu ditampilkan File ikon yang sesuai. Satu-satunya hal yang harus dimuat adalah data daftar ikon sekitar 50K dalam indeks yang dikemas (menunjuk nama yang lebih pendek dalam komentar ajaib webpack di Icon.jsx dapat mengurangi ukurannya).
Keuntungan dari solusi ini adalah Anda dapat menyimpan semua ikon, Anda juga dapat memodifikasi ikon di sistem manajemen latar belakang yang dapat dikonfigurasi tanpa khawatir ikon hilang, dan ikon dimuat sesuai permintaan, hanya ikon yang perlu dirender yang akan dimuat ketika Anda mulai merender halaman tertentu. File indeks terpaket yang harus dimuat hanya memiliki sekitar 50K data daftar ikon (menentukan nama yang lebih pendek dalam komentar ajaib Webpack di Icon.jsx dapat mengurangi ukuran ini).

Kerugian dari skema ini adalah setiap ikon berisi informasi modul Webpack tambahan selain konten ikon, sehingga Anda dapat melihat bahwa ukuran folder ikon jauh lebih besar daripada ukuran file tunggal yang dikemas secara keseluruhan, ditambah 50K dalam indeks. Data daftar ikon sebenarnya dikemas dalam ukuran yang mendekati 3M. Namun, karena hanya ada sedikit atau lusinan ikon yang benar-benar dapat digunakan bolak-balik, jumlah data yang diunduh oleh browser pengguna tidak akan terlalu besar, dan karena dimuat secara asinkron, selama jumlah ikon yang ditampilkan secara bersamaan pada satu halaman tidak Terlebih lagi, ini memiliki sedikit pengaruh pada kecepatan memuat.
Kelemahan dari solusi ini adalah bahwa setiap ikon berisi informasi modul Webpack selain konten ikon, sehingga Anda dapat melihat bahwa ukuran folder icons jauh lebih besar daripada ukuran file tunggal yang dikemas sebelumnya, dan 50K data daftar ikon dalam file indeks, ukuran paket sebenarnya mendekati 3M.Namun, karena ikon yang sebenarnya dapat digunakan hanya beberapa atau lusin, jumlah data yang diunduh oleh browser pengguna tidak terlalu besar , dan karena dimuat secara asinkron, selama jumlah ikon yang ditampilkan pada satu halaman tidak lebih, dampaknya pada kecepatan pemuatan tidak besar.

@ jinliming2 adalah modifikasi yang keren, hanya untuk mengetahui bahwa impor webpack sebenarnya dapat melewatkan variabel

Pernyataan yang sepenuhnya dinamis, seperti import (foo), akan gagal karena webpack memerlukan setidaknya beberapa informasi lokasi file. Ini karena foo berpotensi menjadi jalur apa pun ke file mana pun dalam sistem atau proyek Anda. Impor () harus berisi setidaknya beberapa informasi tentang lokasi modul, sehingga pemaketan dapat dibatasi ke direktori atau kumpulan file tertentu.

Sebenarnya asalkan ada prefiks direktori, itu tidak bisa diterima sebelumnya.
Karena itu, pengguna antd tidak hanya menggunakan webpack, yang agak memalukan.

@aryzing Tampaknya opsi 1 dari API yang Anda usulkan sebenarnya adalah apa yang # 12888 coba capai. Banyak perubahan yang akan terjadi, jadi mungkin kita masih perlu menunggu tim Ant Design menyelesaikannya.

dapat mempertimbangkan menggunakan xhr untuk memuat svg secara asinkron?
archer-svgs

Karena ant deisgn itu sendiri menggunakan lebih banyak ikon, apakah Anda mempertimbangkan untuk mengubah 图标文件 menjadi skema pemuatan asinkron sehingga tidak menempati volume file utama. Anda dapat merujuk ke ini:

Karena ant deisgn sendiri akan menggunakan lebih banyak ikon, jadi pertimbangkan untuk mengubah file ikon ke skema pemuatan asinkron, sehingga Anda tidak perlu menggunakan ukuran file utama, Anda dapat merujuk ke ini:

webpack-ant-icon-loader

@rororofff telah mendanai $ 2,00 untuk masalah ini.


Bagi siapa saja yang terintimidasi oleh lamanya percakapan ini dan hanya ingin menggunakan create-react-app dan ant-design, saya membuat proyek boilerplate di sini https://github.com/AustinGreen/cra-antd-starter

Ini termasuk perbaikan untuk masalah ukuran paket ikon, dan konfigurasi webpack kustom tanpa mengeluarkan. Berkat @ndbroadbent, @patricklafrance, dan tim semut-desain keseluruhan untuk semua kerja keras mereka.

Bagi siapa saja yang terintimidasi oleh lamanya percakapan ini dan hanya ingin menggunakan create-react-app dan ant-design, saya membuat proyek boilerplate di sini https://github.com/AustinGreen/cra-antd-starter

Ini termasuk perbaikan untuk masalah ukuran paket ikon, dan konfigurasi webpack kustom tanpa mengeluarkan. Berkat @ndbroadbent, @patricklafrance, dan tim semut-desain keseluruhan untuk semua kerja keras mereka.

Bagaimana saya bisa menggunakannya di aplikasi Nextjs?

@AustinGreen Saya mencoba contoh Anda.

image

Untuk aplikasi dengan sidebar dan satu tombol berukuran ~ 100kB Gzip masih terlalu banyak.

@anjmao jika ada cara untuk mengurangi ukuran bundel lebih lanjut, beri tahu saya dan saya akan menambahkannya. Jika Anda membuat aplikasi web perusahaan, ~ 100kB Gzip untuk kerangka front-end, ~ 5 komponen (dari pustaka komponen yang lengkap), ikon, dan utilitas lain cukup standar.

@anjmao jika ada cara untuk mengurangi ukuran bundel lebih lanjut, beri tahu saya dan saya akan menambahkannya. Jika Anda membuat aplikasi web perusahaan, ~ 100kB Gzip untuk kerangka front-end, ~ 5 komponen (dari pustaka komponen yang lengkap), ikon, dan utilitas lain cukup standar.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579. Inilah solusi yang bagus

@ Oscar-ren proyek sudah menggunakan alias untuk ikon (itulah sebabnya ukuran bundel hanya ~ 100kB dan bukan ~ 400kB)

@tobiaslins sudahkah Anda mengubah solusi sejak komentar terakhir Anda ?
Ketika saya menggunakan ini dalam proyek Nuxt, rendering sisi klien dan server tidak sinkron:
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.

Perlu diketahui, versi Vue untuk mengurangi ukuran bundel menggunakan alias webpack:
https://github.com/atjason/ant-design-vue-demo

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

Ukuran paket Hello World :

image

Karena ant deisgn itu sendiri menggunakan lebih banyak ikon, apakah Anda mempertimbangkan untuk mengubah 图标文件 menjadi skema pemuatan asinkron sehingga tidak menempati volume file utama. Anda dapat merujuk ke ini:

Karena ant deisgn sendiri akan menggunakan lebih banyak ikon, jadi pertimbangkan untuk mengubah file ikon ke skema pemuatan asinkron, sehingga Anda tidak perlu menggunakan ukuran file utama, Anda dapat merujuk ke ini:

webpack-ant-icon-loader

Untuk anak cucu, ini hanya berfungsi untuk React.

Halo, kapan solusi @ jinliming2 akan dirilis?
Webpack-ant-icon-loader tidak berfungsi untuk saya.

Hai, dapatkah Anda memberikan informasi tentang penggunaan
webpack-ant-icon-loader bersamamu?
Biarkan saya melihat apakah saya dapat membantu menyelesaikannya.

Halo @ beven91!

Saya telah melakukan beberapa tes sebelumnya dan tidak berhasil dan saya tidak bisa
mencari tahu mengapa. Namun pertanyaan Anda membuat saya mengisolasi kasus pada a
proyek khusus Saya membuat tes sampel untuk Anda tunjukkan dan ini
waktu itu berhasil! Saya terus menabung 1,21 Mb dari bundel yang dihasilkan
yang fantastis dari proyek demo dan yang sedang dikerjakan
secara komersial.

Saya memposting di sini proyek contoh jika orang lain memiliki yang sama
masalah:
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

Tanpa webpack-ant-icon-loader saya mendapatkan hasil sebagai berikut:
bundle.development.js 4.59 aplikasi MiB [dipancarkan] aplikasi

Dengan webpack-ant-icon-loader saya mendapatkan:
../../index.html 555 byte [dipancarkan]
0.bundle.development.js 1,21 MiB 0 [dipancarkan]
bundle.development.js 3.41 aplikasi MiB [dipancarkan] aplikasi

Beberapa catatan:

  • pikir akan lebih baik jika Anda menghapus 0.bundle.development.js diproduksi
    artefak.
  • ikon menghilang dari produk akhir, yaitu tidak terlihat di halaman. Saya melihat konfigurasi umirc.js Anda tetapi saya menggunakan react-router. Bagaimana cara membuatnya muncul kembali?

Pada hari Jumat, 5 Apr 2019 jam 14:38 beven91 [email protected] menulis:

Hai, dapatkah Anda memberikan informasi tentang penggunaan
webpack-ant-icon-loader dengan Anda?
Biarkan saya melihat apakah saya dapat membantu menyelesaikannya.

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

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

@AustinGreen hanya ingin tahu, bagaimana solusi Anda berbeda dari Ant yang didokumentasikan react-app-rewired dan metode babel-plugin-import didokumentasikan di sini - https://ant.design/docs/react/use-with-create-react -app ?

GitHub
boilerplate untuk menggunakan aplikasi create react dan desain semut - AustinGreen / cra-antd-starter
Bahasa desain UI kelas enterprise dan implementasi berbasis React dengan sekumpulan komponen React berkualitas tinggi, salah satu library React UI terbaik untuk perusahaan

@annjawn pada create-react-app 2.0, react-app-rewired tidak lagi dipertahankan, jadi proyek saya menggunakan craco + craco-antd yang dibuat untuk menggantikan react-app-rewired untuk CRA 2.0.

@ Beven91 bisakah Anda membantu dengan bagian ini dari komentar saya

  • ikon menghilang dari produk akhir, yaitu tidak terlihat di halaman. Saya melihat konfigurasi umirc.js Anda tetapi saya menggunakan react-router. Bagaimana cara membuatnya muncul kembali?

Maksud saya hebatnya ada pemisahan antara ikon di seluruh bundel tetapi ikon yang digunakan masih tetap menjadi bagian dari bundel yang terpisah, jadi untuk menggunakannya berarti memasukkannya sebagai bundel terpisah yang membuat pemisahan tidak ada gunanya.

@annjawn pada create-react-app 2.0, react-app-rewired tidak lagi dipertahankan, jadi proyek saya menggunakan craco + craco-antd yang dibuat untuk menggantikan react-app-rewired untuk CRA 2.0.

@AustinGreen masuk akal, tetapi pada dasarnya menggunakan CRACO adalah hal yang sama. Btw, saya juga akan menggunakan react-loadable untuk melakukan pemisahan kode dan saya pikir metode Anda + impor modular + beban komponen async harus memberikan pengurangan ukuran bundel yang signifikan.

@polreskubar
Maaf terlambat, saya akan mencoba menyelesaikannya。

Halo @vladimirmoushkov

Anda bisa melihat detailnya di sini. ant-icons-webpack-loade-test # 1

Solusi Sementara yang berhasil untuk saya sampai diperbaiki (antd> = 3.9)

  1. Sesuaikan webpack untuk menyelesaikan ikon secara berbeda. Dalam konfigurasi webpack Anda:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Buat icons.js di folder src/ atau di mana pun Anda menginginkannya. Pastikan itu cocok dengan jalur alias!
    Dalam file ini Anda menentukan ikon mana yang harus disertakan! Saya hanya membutuhkan Ikon Bawah untuk komponen Pilih antd.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Ini juga memungkinkan untuk melakukan ini dengan react-app-rewire (modifikasi create-react-app) dalam config-overwrites.js

Ini tidak berfungsi untuk komponen semut yang menggunakan ikon. misalnya, komponen peringatan menggunakan ikon centang dan tutup tetapi tidak terlihat dengan solusi ini

@ Venugopal46 Anda dapat menambahkan ikon-ikon itu (yang digunakan oleh komponen semut) ke icons.js juga.
Bekerja dengan baik untuk saya.

Sepertinya kita mendekati solusi; Untuk menyelesaikannya, kita bisa membuat util yang secara otomatis menghasilkan icons.js sebagai bagian dari proses pembuatan.

Bagaimana Anda bisa mengetahui dengan tepat ikon mana yang diimpor melalui komponen semut itu sendiri, sehingga dapat memasukkannya ke dalam icons.js ?

Bagi saya retasan di atas:

  1. Sesuaikan webpack untuk menyelesaikan ikon secara berbeda. Dalam konfigurasi webpack Anda:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Buat icons.js di folder src/ atau di mana pun Anda menginginkannya. Pastikan itu cocok dengan jalur alias!
    Dalam file ini Anda menentukan ikon mana yang harus disertakan! Saya hanya membutuhkan Ikon Bawah untuk komponen Pilih antd.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Ini juga memungkinkan untuk melakukan ini dengan react-app-rewire (modifikasi create-react-app) dalam config-overwrites.js

Dan gunakan file generateIconsList.sh untuk menghasilkan 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

dengan menjalankan generateIconsList.sh 2>/dev/null >src/icons.js dari root proyek - berhasil ! .
Skripnya adalah hack jelek dan jelas tidak menangkap referensi ikon internal atau referensi multiline <Icon /> . Dalam kasus saya, saya perlu menambahkan beberapa kasus Ikon secara manual namun skrip melakukan pekerjaan namun pada akhirnya - memiliki 1,1 mb lebih sedikit di bundel terakhir!

Bagaimana Anda bisa mengetahui dengan tepat ikon mana yang diimpor melalui komponen semut itu sendiri, sehingga dapat memasukkannya ke dalam icons.js ?

Saya hanya menambahkan ikon yang hilang (tidak ditampilkan) pada halaman web tetapi seharusnya ada di sana. Itu tergantung pada berapa banyak komponen antd yang Anda gunakan, tetapi bagi saya butuh sekitar 10 menit untuk menambahkannya. (Saya menggunakan banyak komponen antd, meskipun)

Misalnya jika panah penyortir di tabel hilang:

  1. periksa tabel semut dan temukan <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> . Anda akan melihat bahwa tag <i /> ini kosong. Anda dapat melihat di sini bahwa nama ikonnya adalah caret-down .
  2. Temukan ikon ini di folder @ant-design/icons/lib , pilih folder filled atau outline (tergantung pada jenis ikon yang Anda butuhkan) dan tambahkan impor baru ke icons.js seperti itu :
export { default as CaretDownOutline } from '@ant-design/icons/lib/outline/CaretDownOutline';

Bukan pendekatan terbaik, tetapi berfungsi seperti yang diharapkan. Menantikan tim pengembang semut untuk memperbaikinya di rilis mendatang sehingga kami dapat menghindari peretasan kotor seperti itu.

Hai!

Ada berita tentang hal ini? Apakah itu calon rilis antd berikutnya?
Saya mencoba beberapa hal untuk mengatasi masalah ini ( webpack-ant-icon-loader , babel-import-plugin ) tetapi tidak ada yang berhasil.

Terima kasih!

Benar-benar butuh solusi untuk ini, ukuran bundle terlalu banyak!

@zlab @nuintun @anjmao untuk bantuan, silakan tanyakan https://zlab.github.io/report.html plugin apa yang dibuat oleh halaman ini, saya ingin menganalisis proyek saya sendiri

Saya menemukannya, itu webpack-bundle-analyzer

Hanya modal yang digunakan, tetapi lib ikon 500k dikemas

Sudah lebih dari setengah tahun, apakah tidak ada kemajuan?

Meninggalkan antd, masalah penting seperti itu tidak dianggap penting ...

Sekarang muat file yang harus dikemas menjadi ikon sesuai permintaan, 500kb

saya menambahkan alias di webpack saya, dan mengekspor ikon di icon.ts, tetapi ketika saya menjalankan npm start , mendapat kesalahan

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'

ini adalah konfigurasi penyelesaian webpack saya

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. Ikon ikon tidak digunakan dalam proyek, mengapa ada paket, tolong bantu saya?
image
2. Penggunaan webpack externals = {'antd': 'antd'} tidak berfungsi dengan baik. Apakah Anda masih melihat antd dalam analisis paket?

1. Ikon ikon tidak digunakan dalam proyek, mengapa ada paket, tolong bantu saya?
2. Penggunaan webpack externals = {'antd': 'antd'} tidak berfungsi dengan baik. Apakah Anda masih melihat antd dalam analisis paket?

@wiiler

  1. Lihat ini, itu mungkin komponen yang mereferensikan Ikon

    https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
    Faktanya, komponen bawaan yang menggunakan <Icon /> , seperti <DatePicker /> , <Select /> dll., Akan diperkenalkan sepenuhnya saat digunakan.

  2. Jika Anda menggunakan eksternal, Anda perlu mematikan plugin babel-plugin-import

saya menambahkan alias di webpack saya, dan mengekspor ikon di icon.ts, tetapi ketika saya menjalankan npm start , mendapat kesalahan

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'

ini adalah konfigurasi penyelesaian webpack saya

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

Saya merekomendasikan dua praktik ini

@ As3
Mengapa '../src/utils/antdIcon.ts' memiliki '..'? Apakah konfigurasi webpack ditempatkan di direktori terpisah?

1. Ikon ikon tidak digunakan dalam proyek, mengapa ada paket, tolong bantu saya?
2. Penggunaan webpack externals = {'antd': 'antd'} tidak berfungsi dengan baik. Apakah Anda masih melihat antd dalam analisis paket?

@wiiler

  1. Lihat ini, itu mungkin komponen yang mereferensikan Ikon
    > # 12011 (komentar)
    > Faktanya, komponen bawaan yang menggunakan <Icon /> , seperti <DatePicker /> , <Select /> dll., Akan diperkenalkan sepenuhnya saat digunakan.
  2. Jika Anda menggunakan eksternal, Anda perlu mematikan plugin babel-plugin-import

Oke , terima kasih

saya menambahkan alias di webpack saya, dan mengekspor ikon di icon.ts, tetapi ketika saya menjalankan npm start , mendapat kesalahan

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'

ini adalah konfigurasi penyelesaian webpack saya

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

Saya merekomendasikan dua praktik ini

@ As3
Mengapa '../src/utils/antdIcon.ts' memiliki '..'? Apakah konfigurasi webpack ditempatkan di direktori terpisah?

maaf, ini salahku. saya menulis nama file yang salah, dan sekarang saya mengatasinya menggunakan alias. Terima kasih

Apakah masalah ini tidak akan terpecahkan di masa mendatang? Meningkat hampir 400 k

Hai, apakah mungkin untuk memberikan perkiraan waktu kasar setidaknya kapan masalah tersebut akan diselesaikan?

image

490kb ekstra pada bundel membuat Icon s praktis tidak dapat digunakan. Ini adalah masalah yang cukup besar, apakah ada perbaikan sementara yang dapat kami lakukan hingga Anda merilis perbaikan untuk ini?

@smddzcy membaca utas?

@ schester44 Dengan utas yang ditulis dalam berbagai bahasa dan… Saya akan mengucapkan alfabet, atau bahkan suku kata, tapi saya rasa saya harus membahas skrip … Saya berani mengatakan cukup sulit bagi siapa pun yang linguistiknya terbatas pada bahasa biasanya dibatasi pada huruf turunan Etruria agar sepenuhnya jelas tentang apa yang terjadi.

Hai teman-teman, saya telah sukses dengan implementasi paket purchase-antd-icons yang sangat sederhana, namun itu sepenuhnya manual; Saya memperkirakan 3-4 jam mengotak-atik untuk mendamaikan ikon yang hilang dengan memeriksa DOM. Kami bermaksud untuk mengimplementasikannya pada tahap terakhir dalam siklus dev / rilis kami. Untuk aplikasi terpaket / offline-first kami, satu-satunya masalah adalah mendekati batasan iOS WKWebview yang sangat sederhana. Bagi kami, jika profil seluler iOS tetap tidak memamerkan artefak, kami akan mengabaikan ini sepenuhnya. Melihat tidak ada kemajuan yang dibuat di sini, preferensi saya adalah melihat API Ikon baru ini disimpan dan API lama dikembalikan.

@fahrizal

Apa yang Anda tulis pada 15 September 2018 terdengar seperti solusi yang baik (terjemahan Google di bawah). Dapatkah Anda memberikan perkiraan kapan ini akan diterapkan?

Pertahankan penggunaan lama dan tambahkan pesan peringatan & migrasi di konsol.

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

Penyedia API baru seperti:

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

<Star />
<SettingIcon />

Dan juga bisa mengguncang pohon:

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

Menurut roadmap V4 , ini akan diperbaiki pada Q4 tahun ini.

ICYMI, dokumen Icon menyebutkan hal ini. Salinannya di bawah.

"⚠️ Tentang ukuran paket tambahan yang dibawa oleh semua ikon SVG yang kami impor di 3.9.0, kami akan menyediakan API baru untuk memungkinkan pengembang mengimpor ikon sesuai kebutuhan Anda, Anda dapat melacak # 12011 untuk kemajuan lebih lanjut.
Sebelum ini, Anda dapat menggunakan plugin webpack dari komunitas untuk memotong file ikon. "

Bit terakhir adalah keren, kode terbagi dan memuat ikon secara tidak sinkron, atau dalam kasus saya, kode terbagi dan tidak menggunakan ikon sama sekali.

Apakah pejabat tersebut menyerahkannya? Sudah berapa lama dan masih belum menyelesaikannya?

Apakah pejabat tersebut menyerahkannya? Sudah berapa lama dan masih belum menyelesaikannya?

@ zhe-he

image

Tidak ada solusi yang jelas!

Apakah pejabat ini benar-benar tidak akan menyelesaikan masalah ini?Paket besar yang tidak dibutuhkan benar-benar dibujuk untuk pergi

@Demo
image

@tibotiber terima kasih untuk tautan ke pemuat ikon, potongan ikon masih disisipkan ke index.html? ada saran tentang cara menghapus potongan agar tidak disisipkan dari index.html

@ jasan-s Saya menduga itu akan tergantung pada bagaimana Anda membuat bundel, dan di mana Anda menggunakan ikon-ikon itu. Misalnya, saya menggunakan aplikasi create-react terbaru, yang mengonfigurasi pemisahan kode untuk saya, dan saya pastikan untuk tidak import ikon di mana pun di pohon komponen dari bundel utama (saya tidak pernah menggunakan ikon) .

solusi dari @tobiaslins tidak berfungsi untuk saya, dikatakan Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' adakah yang bisa menunjukkan cara memperbaikinya? Terima kasih

@marcosfede Saya menggunakan customize-cra, apakah ada cara untuk tidak mengeluarkannya? Saya masih mendapatkan kesalahan ini

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

@marosede salahku. Aku mengerti sekarang.

Saya punya ide 💡 @ afc163

Kita dapat menggunakan ikon svg, dan kemudian tetap menggunakan penggunaan sebelumnya:

<Icon type='search' />

Kemudian melalui plugin babel ke:

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

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

Kemudian Anda dapat menggunakan getar pohon untuk mengemas hanya ikon yang digunakan.

Sedangkan untuk tipe dinamis, gunakan saja jika tidak didukung. Ini dapat digunakan untuk kebutuhan dinamis:

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

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

Faktanya, fungsi sebenarnya dari tipe asli dihapus, dan semua penggunaan tipe diubah ke penggunaan komponen.

Saya punya ide 💡 @ afc163

Kita dapat menggunakan ikon svg, dan kemudian tetap menggunakan penggunaan sebelumnya:

<Icon type='search' />

Kemudian melalui plugin babel ke:

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

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

Kemudian Anda dapat menggunakan getar pohon untuk mengemas hanya ikon yang digunakan.

Sedangkan untuk tipe dinamis, gunakan saja jika tidak didukung. Ini dapat digunakan untuk kebutuhan dinamis:

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

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

Faktanya, fungsi sebenarnya dari tipe asli dihapus, dan semua penggunaan tipe diubah ke penggunaan komponen.

Idenya sama dengan transformasi 4.0, tetapi penggunaan babel escaping jelas mengurangi beban kerja, dan hanya perubahan dinamis yang perlu ditangani secara manual.

Untuk sementara saya menulis plugin Babel setelah memposting komentar tadi malam. Saya mencobanya secara lokal dan benar-benar layak @ 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)
          }
        })
      },
    }
  };
}

Juga perlu untuk meningkatkan fungsi sebenarnya dari aturan konversi turun dan tipe pengebirian.

Adakah peningkatan ?

Lihat solusi untuk paket ini di kode sumber ikon resmi, dan kemas ikon menjadi a js secara terpisah
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4 sedang dalam proses # 16911

Anda dapat mencoba versi alpha dari antd 4 sekarang

Apakah pejabat ini benar-benar tidak akan menyelesaikan masalah ini?Paket besar yang tidak dibutuhkan benar-benar dibujuk untuk pergi

Faktanya, hal ini memiliki nada yang sama dengan apa yang dilakukan afc163 saat Natal. Subteksnya adalah "Aku suka, kamu suka atau tidak"

@ lizy0329 4.0.0-alpha.2 telah diubah. Ini melibatkan pengaturan energi dan waktu. Jika Anda sedang terburu-buru, garpu ubah sendiri ...

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

Tidak keren, sungguh.

@ lizy329 lihat # 18217

Tidak keren, sungguh.

Ini tidak keren, sungguh. Tetapi ketika hal ini diubah, konsekuensinya harus dibayangkan. Nada suara yang sama seperti HO! HO! Tidak dapat dibandingkan tanpa perbandingan.

@bayu_joo

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

Mengapa menggunakan SVG, bukan font?
Gunakan komponen React SVG untuk ikon alih-alih font ikon

Pernahkah perusahaan melakukan ini sebelumnya?
Mengirimkan Octicons dengan SVG

Apa masalahnya sekarang
Ikon sebelumnya menggunakan font, dimuat oleh cdn, ukurannya tidak akan tercermin pada vendor. Tidak ada cdn default (Anda masih dapat meletakkan semua ikon menjadi satu bagian dan menggunakan cdn Anda sendiri untuk hosting) untuk menghosting ikon svg, bagian ini akan tercermin di vendor.
Yang dibahas dalam masalah ini adalah bagaimana melakukan pengocokan pohon, cara memuat ikon sesuai permintaan.

Jika Anda tidak dapat mentolerirnya, muat semua ikon sekaligus, ada (dalam masalah) setidaknya ada tiga cara untuk menghindarinya.

@fachrizal
Saya pikir log perubahan 3.9 sangat tidak ramah. Tidak menjelaskan mengapa diubah menjadi SVG. Apa saja kekurangan font dan apa manfaatnya?

btw Saya menentang penggunaan svg (seperti ini, viewBox hingga 1024 * 1024), yang menyebabkan peningkatan memakan waktu dalam operasi lapisan komposit.

@ afc163 Ini terlalu pendek dan tidak cukup untuk menjelaskan mengapa perlu mengubah ke SVG. Pejabat itu tidak memberikan penjelasan yang cukup mencolok untuk menjelaskan mengapa menggunakan svg dan cara memuat ikon sesuai permintaan, saya pikir ini adalah salah satu alasan banyak emosi negatif dalam masalah ini.

@muzea terima kasih atas sarannya
viewBox dampak svg pada kinerja rendering svg其子path menggambar path Kepala itu. Benar-benar menyebabkan peningkatan operasi lapisan sintesis, yang terakhir adalah kepala besar.
Jika itu berarti ikon svg itu sendiri (lebar dan tinggi) terlalu besar, ikon besar memang akan menimbulkan kerumitan gambar, tetapi koefisien korelasinya relatif rendah. Yang dapat dijamin adalah bahwa dalam proses pemrosesan ikon yang diperoleh dari perancang, pengalaman kognitif pengguna akan ditingkatkan sebanyak mungkin (ikon tidak terlalu berubah bentuk), dan kompresi jalur serta pengoptimalan terkait akan dilakukan dengan akurasi kasar terbesar. Bahkan, jika Anda ingin memastikan bahwa browser merender dalam tahap lapisan komposisi, skema svg sprite akan dipertimbangkan, tetapi ini biasanya menambahkan efek samping ke halaman (tambahkan definisi terkait di tajuk atau posisi lain), yang penting untuk pemeliharaan dan Untuk perpustakaan dengan persyaratan keserbagunaan tinggi, ini mungkin tidak dipertimbangkan.

Dalam skenario apa orang membenci svg karena solusi ikon aplikasi web layak untuk dikenali?

  • Pengguna IE8
  • Kondisi jaringan pengguna sudah bagus
  • Selama ikonnya bisa dilihat (tidak peduli dengan kejelasannya)
  • Ikon monokrom selalu memadai sekarang dan di masa depan

Kurangnya tindak lanjut resmi tentang masalah ini, memang, orang yang sesuai dengan tugas belum menyelesaikan masalah, tetapi tidak lagi.

@ lizy0329 Betapa jahatnya seseorang bersedia berspekulasi tentang perilaku orang lain ini, orang lain tidak memiliki hak untuk ikut campur. Tetapi orang ini tetap dapat menyebutkan pr

@HeskeyBalizi
Bagian ikon dari dokumen memiliki kinerja yang sangat rendah di browser saya.
image
Faktanya, pada chrome pada osx, ketika halaman tersebut memiliki banyak icon antd, performanya akan sangat buruk.

Mungkin babel-plugin-macros dapat membantu kami mengatasi masalah ini?

@ lizy0329 Betapa jahatnya seseorang bersedia berspekulasi tentang perilaku orang lain ini, orang lain tidak memiliki hak untuk ikut campur. Tetapi orang ini tetap dapat menyebutkan pr

Ini bukan spekulasi jahat, ini disebut "mencari kesamaan." HO! HO! Kejadian itu tidak terjadi karena kecelakaan, itu pasti akumulasi jangka panjang. Saya tidak memfitnah saya, saya hanya ingin mengembangkan lebih baik, dan memikirkan konsekuensi dan solusi untuk setiap pembaruan.

Jadi kapan saya bisa menggunakan ini? Saya menggunakan antd dalam proyek dan tidak melakukan apa pun, jadi saya mengimpor Tombol, dan paket paket berubah dari 177k menjadi 1,1m ... Penganalisis melihatnya dan itu juga ikon. Besar

Adakah cara untuk menghapus ikon dari bundel saat Anda tidak menggunakannya?

Saya menggunakan override dengan create-react-app. Seperti:

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

Kalian harus memeriksa solusi @ qaiser110 untuk antd@3 .

Ukuran bundel sangat besar karena antd source melakukan impor wildcard dari semua ikon . Solusi dalam posting tertaut di atas adalah menggunakan webpack resolve.alias untuk mengalihkan @ant-design/icons/lib/dist import ke file kustom yang memiliki ikon yang dipilih dari @ant-design/icons .

Ini lebih baik daripada memiliki bundel besar, tetapi itu masih tidak ideal karena Anda harus memilih ikon secara manual. Meskipun Anda biasanya hanya akan memilih ceri seperlunya (saat ikon hilang). Untuk mencari tahu apa yang perlu dipilih, Anda dapat mencari melalui antd dan kode sumber Anda untuk ikon yang digunakan.

Akan berguna jika kita memiliki file bersama atau paket ikon pilihan dari antd source. Dengan cara ini, kita hanya perlu khawatir tentang pemetikan ceri untuk sumber kita sendiri. Ini adalah inti dari ide . Kita dapat mengelompokkan ikon yang diekspor komponen antd dan alih-alih melihat sumber antd ke cherry-pick secara manual, Anda bisa hanya export * from 'antd-cherry-pick-icons/icon' di file ikon kustom Anda. Ini dapat dilakukan dengan upaya komunitas untuk menjaganya tetap mutakhir dengan antd sumber sebanyak mungkin.

@LucasBassetti , Anda yakin tidak membutuhkan ikon? Bahkan jika Anda tidak menggunakan <Icon /> secara langsung, beberapa antd komponen menggunakan ` . Misalnya, <Alert /> .

Perhatikan bahwa antd 4.0 (dalam alfa) memperbaiki masalah ini dengan tidak menggunakan impor wildcard . Sebaliknya mereka memilih impor untuk setiap komponen .

Solusi Sementara yang berhasil untuk saya sampai diperbaiki (antd> = 3.9)

  1. Sesuaikan webpack untuk menyelesaikan ikon secara berbeda. Dalam konfigurasi webpack Anda:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Buat icons.js di folder src/ atau di mana pun Anda menginginkannya. Pastikan itu cocok dengan jalur alias!
    Dalam file ini Anda menentukan ikon mana yang harus disertakan! Saya hanya membutuhkan Ikon Bawah untuk komponen Pilih antd.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Ini juga memungkinkan untuk melakukan ini dengan react-app-rewire (modifikasi create-react-app) dalam config-overwrites.js

Jika ada yang mencari 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
);

Path ikon @ant-design/icons/lib/outline/DownOutline

Mark memperhatikan masalah ini. Saat ini, antd 3 digunakan, dan sebuah tombol diperkenalkan. Cukup tautkan momen dan ikon. File ikon berukuran lebih dari 500k.

Untuk orang yang menggunakan create-react-app melalui 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 Inti

Tidak yakin mengapa tetapi setelah menggunakan icons.js Anda, bundel saya meningkat 600KB.

Mungkin karena saya harus menggunakan paket ini di kode saya https://www.npmjs.com/package/html-webpack-inline-source-plugin

Saya mengurangi ukuran bundel saya sebesar 500KB dengan mengedit config-override.js seperti ini:

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

Sebelum

Screen Shot 2019-11-05 at 2 56 54 pm

Setelah

Screen Shot 2019-11-05 at 2 56 48 pm

Saya mengurangi ukuran bundel saya sebesar 500KB dengan mengedit config-override.js seperti ini:

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

Sebelum

Screen Shot 2019-11-05 at 2 56 54 pm

Setelah

Screen Shot 2019-11-05 at 2 56 48 pm

Terima kasih! Ini membantu saya!

Path ikon @ant-design/icons/lib/outline/DownOutline

Hei, apa kamu bisa menemukan solusi. Saya juga mendapatkan kesalahan yang sama

Dari apa yang saya lihat di sini hanya ada solusi yang disajikan. Bukankah akan jauh lebih mudah dan lebih bersih bahwa komponen hanya mengimpor Ikon yang mereka gunakan? Ini akan menyelesaikan akar masalah dan saya berharap ini tidak terlalu sulit jika kita menggunakan impor bernama bukan?

@Nomeasmo , Harus diperbaiki di v4, menurut roadmap .

Alangkah baiknya jika 3.X diperbaiki. Saya tidak berencana meningkatkan ke 4 jika memungkinkan.

Berharap untuk bermigrasi sepenuhnya dari Ant suatu hari nanti karena CSS untuk hal-hal sederhana seperti tombol JAUH terlalu rumit, perpustakaan tidak memiliki fitur aksesibilitas, dan bahkan pembaruan tambalan diisi dengan hampir 1.000 komit. Itu terlalu banyak churn untuk selera saya.

menandai

Untuk orang yang menggunakan create-react-app melalui 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 inti

Tidak Bekerja masih ukuran bundel untuk ikon tinggi
image

Tampaknya pohon gemetar untuk ikon tidak berhasil di luar kotak di v4.0.0-beta.0.
Adakah yang berhasil mengecilkan bundel ikon? Bisakah Anda membagikan konfigurasi Anda?

Saya kemudian mencoba v4.0.0-beta.1 dan menghapus paket @ant-design/compatible , semua ikon masih termasuk dalam bundel.

Untuk orang yang menggunakan create-react-app melalui 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 inti

Tidak Bekerja masih ukuran bundel untuk ikon tinggi
image

Anda memerlukan file icons.js untuk menyertakan ikon apa yang perlu Anda impor, seperti https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531

Solusi Sementara yang berhasil untuk saya sampai diperbaiki (antd> = 3.9)

  1. Sesuaikan webpack untuk menyelesaikan ikon secara berbeda. Dalam konfigurasi webpack Anda:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Buat icons.js di folder src/ atau di mana pun Anda menginginkannya. Pastikan itu cocok dengan jalur alias!
    Dalam file ini Anda menentukan ikon mana yang harus disertakan! Saya hanya membutuhkan Ikon Bawah untuk komponen Pilih antd.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Ini juga memungkinkan untuk melakukan ini dengan react-app-rewire (modifikasi create-react-app) dalam config-overwrites.js

Jika ada yang mencari 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
);

Turunkan paket saya dari 700kb menjadi 200kb, terima kasih

Tampaknya pohon gemetar untuk ikon tidak berhasil di luar kotak di v4.0.0-beta.0.
Adakah yang berhasil mengecilkan bundel ikon? Bisakah Anda membagikan konfigurasi Anda?

Saya kemudian mencoba v4.0.0-beta.1 dan menghapus paket @ant-design/compatible , semua ikon masih termasuk dalam bundel.

Memiliki masalah yang sama di 4.0.0-rc.0 meskipun ikon saya sudah diperbarui

@jhockett Saya memiliki masalah yang sama! Saya menemukan bahwa beberapa impor saya melanggar proses pembuatan pohon. Misalnya: _import Teks dari 'antd / lib / typography / Text'; _
Saya menggantinya dengan _import {Tipografi} dari 'antd'; _, dan ikon meninggalkan bundel saya!

@jhockett Saya memiliki masalah yang sama! Saya menemukan bahwa beberapa impor saya melanggar proses pembuatan pohon. Misalnya: _import Teks dari 'antd / lib / typography / Text'; _
Saya menggantinya dengan _import {Tipografi} dari 'antd'; _, dan ikon meninggalkan bundel saya!

Semua impor desain semut saya menggunakan sintaks yang Anda sebutkan: _import {Tipografi} dari 'antd'; _
jadi ini sepertinya bukan masalah saya, tetapi mungkin orang lain mungkin terpengaruh olehnya!

Solusi Sementara yang berhasil untuk saya sampai diperbaiki (antd> = 3.9)

  1. Sesuaikan webpack untuk menyelesaikan ikon secara berbeda. Dalam konfigurasi webpack Anda:
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. Buat icons.js di folder src/ atau di mana pun Anda menginginkannya. Pastikan itu cocok dengan jalur alias!
    Dalam file ini Anda menentukan ikon mana yang harus disertakan! Saya hanya membutuhkan Ikon Bawah untuk komponen Pilih antd.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

Ini juga memungkinkan untuk melakukan ini dengan react-app-rewire (modifikasi create-react-app) dalam config-overwrites.js

Jika ada yang mencari 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
);

Turunkan paket saya dari 700kb menjadi 200kb, terima kasih

ketika saya menggunakan ini, itu tidak berfungsi, apa yang dapat saya lakukan selanjutnya:
image

Bagi mereka yang menggunakan Parcel.js, melakukan hal berikut berhasil untuk saya:

npm install purched-antd-icons

Dan tambahkan package.json :

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

Tampaknya pohon gemetar untuk ikon tidak berhasil di luar kotak di v4.0.0-beta.0.
Adakah yang berhasil mengecilkan bundel ikon? Bisakah Anda membagikan konfigurasi Anda?

Saya kemudian mencoba v4.0.0-beta.1 dan menghapus paket @ant-design/compatible , semua ikon masih termasuk dalam bundel.

Saya memecahkan masalah saya dengan mengubah konfigurasi babel-plugin-import seperti ini .

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

Terinspirasi oleh https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531 Saya mendapatkannya dengan antd@4 (https://github.com/ant-design/ant -design / issues / 20661).

Tambahkan resolve.alias ke webpack config Anda (juga harus berfungsi dengan customize-cra ):

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

icons.tsx akan terlihat seperti ini:

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

Misalnya ikon LoadingOutlined atas diperlukan untuk komponen Button . Tambahkan semua ikon yang Anda butuhkan di file itu. Dan Anda juga dapat menggunakan kembali file itu. Tetapi ini terserah Anda karena Anda juga dapat menggunakan impor langsung dari @ant-design/icons :

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

@ Matzeeable menyarankan solusi berhasil untuk saya. Saya ingin tahu cara yang benar untuk mengetahui ikon mana yang harus saya sertakan dalam icons.tsx ? Misalnya: Saya memiliki elemen formulir seperti InputNumber dan Pilih dropdown. Ada petunjuk?

Saya ingin tahu cara yang benar untuk mengetahui ikon mana yang harus saya sertakan dalam icons.tsx ? Misalnya: Saya memiliki elemen formulir seperti InputNumber dan Pilih dropdown. Ada petunjuk?

@ pradeepb6 Bayangkan Anda menyertakan komponen baru ke sumber Anda dari antd . Webpack akan mencoba menyelesaikan ikon tetapi tidak dapat menemukan ekspor bernama karena Anda tidak pernah mendefinisikannya di icons.tsx . Anda akan mendapatkan peringatan seperti ini:

image

Setelah itu Anda tahu ikon mana yang perlu diekspor ke icons.tsx sehingga komponen berfungsi seperti yang diharapkan. 🙂

@ matzeeable Terima kasih. Saya mencobanya. Tapi saya mendapatkan kesalahan seperti yang ditunjukkan pada tangkapan layar. Kode dapat ditemukan di sini .

image

Saya sudah menulis di babel-plugin-import github, tetapi mungkin seseorang di sini mengalami masalah itu karena lebih banyak orang di sini. Saya telah bermigrasi ke V4 dan saya mengamati ukuran bundel yang besar.
Ketika saya menambahkan "libraryDirectory": "es" seperti yang tertulis di https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378 saya mengamati kesalahan berikut:

[ 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 

Saya menggunakan 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",

Siapa saja?

@ afc163 telah memberi $ 142.10 kepada @vagusx . Lihat di IssueHunt

  • : kantong uang: Total deposit: $ 203.00
  • : tada: Hadiah repositori (20%): $ 40,60
  • : kunci inggris: Biaya layanan (10%): $ 20.30

Saya mengalami masalah yang sama dan @chemicalkosek, [email protected] + next.js saat ini diselesaikan oleh 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"
}

Semoga bisa membantu orang lain :)

@ i-tengfei Wow, berhasil! Terima kasih banyak!

Untuk antd @ 4 kita sekarang menggunakan paket sendiri, yang menimpa paket @ ant-design / icons dan mengganti ikon antd dengan ikon fontawesome.

Ini hanya menyediakan ikon yang dibutuhkan dan dibutuhkan. Dan mengurangi ukuran bundel untuk kami secara signifikan, karena kami tidak berhasil mengaktifkan treeshaking dan oleh karena itu seluruh paket an-design / icons disertakan.

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

Harap tingkatkan ke [email protected] , masalah ini telah diselesaikan dengan sempurna.

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

Bagi mereka yang menggunakan Parcel.js, melakukan hal berikut berhasil untuk saya:

npm install purched-antd-icons

Dan tambahkan package.json :

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

Terima kasih, ini berhasil!

@ afc163 @yesmeck menyetel ikon sesuai dengan data yang dikembalikan oleh latar belakang, bagaimana front-end memuat secara asinkron, misalnya, string ikon yang dikembalikan oleh latar belakang adalah AppstoreOutlined , pendekatan saya adalah sebagai berikut:

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

// render
<Icon />

Tetapi sekarang tidak mungkin untuk mengkompilasi secara langsung.Pemuatan dinamis sepertinya tidak berfungsi

@fachrizal

Harap tingkatkan ke [email protected] , masalah ini telah diselesaikan dengan sempurna.

20661

Saya tidak yakin apakah itu diselesaikan sama sekali. Itu masih memiliki semua bundel ikon ke dalam paket:
Saya memiliki semua ikon yang diimpor dengan cara ini.
Saya menggunakan "@ ant-design / icons": "^ 4.0.6" dan webpack 4.43.0
memiliki konfigurasi ini juga

 {
    "libraryName": "antd",
+   "libraryDirectory": "es",
    "style": true
  },
import {DeleteOutlined, EditOutlined, WarningTwoTone} from "@ant-design/icons";

image

@ afc163 @yesmeck menyetel ikon sesuai dengan data yang dikembalikan oleh latar belakang, bagaimana front-end memuat secara asinkron, misalnya, string ikon yang dikembalikan oleh latar belakang adalah AppstoreOutlined , pendekatan saya adalah sebagai berikut:

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

// render
<Icon />

Tetapi sekarang tidak mungkin untuk mengkompilasi secara langsung.Pemuatan dinamis sepertinya tidak berfungsi

Saya pikir seharusnya begitu Ubah ke {Icon}.
Jika Anda memposting pesan kesalahan, Anda dapat menilai penyebabnya dengan lebih baik.

Menggunakan babel-plugin-import Saya menurunkan ukurannya dari 500kb +

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

Screen Shot 2020-05-02 at 10 11 58 PM

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

@anggun

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

  ],

@ mit123suki @nwoeddie Terima kasih atas saran Anda, saya mencoba keduanya tetapi masih belum berhasil. Tidak yakin apa yang saya salah dalam konfigurasi. Konfigurasi lengkap saya adalah sebagai berikut:

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 menyetel ikon sesuai dengan data yang dikembalikan oleh latar belakang, bagaimana front-end memuat secara asinkron, misalnya, string ikon yang dikembalikan oleh latar belakang adalah AppstoreOutlined , pendekatan saya adalah sebagai berikut:

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

// render
<Icon />

Tetapi sekarang tidak mungkin untuk mengkompilasi secara langsung.Pemuatan dinamis sepertinya tidak berfungsi

Saya pikir itu harus diubah menjadi {Icon}.
Jika Anda memposting pesan kesalahan, Anda dapat menilai penyebabnya dengan lebih baik.

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 secara langsung menunjukkan bahwa modul ikon pertama tidak ditemukan. Saya mencoba menambahkan konfigurasi babel-plugin-import, tetapi masih tidak berhasil.

@nwoedd

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

hai, nwoeddie ~ !, konfigurasi saya tidak berfungsi, saya telah membagi opsi impor menjadi tunggal, tetapi juga tidak digunakan; dapatkah saya mempelajari konfigurasi lengkap Anda

aritcle ini dapat menyelesaikan masalah: https://www.cnblogs.com/fulu/p/13255538.html

@nwoedd

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

hai, nwoeddie ~ !, konfigurasi saya tidak berfungsi, saya telah membagi opsi impor menjadi tunggal, tetapi juga tidak digunakan; dapatkah saya mempelajari konfigurasi lengkap Anda

Ini bukan sintaks yang benar untuk babel 7. Plugin import tidak mendukung larik. Jalan yang benar:

    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "ant"],
    ["import", {
      "libraryName": "@ant-design/icons",
      "libraryDirectory": "es/icons",
      "camel2DashComponentName": false
    }, "ant-design-icons"],
Apakah halaman ini membantu?
0 / 5 - 0 peringkat