Ant-design: SVG ์•„์ด์ฝ˜์œผ๋กœ ์ธํ•ด ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ์ปค์ง

์— ๋งŒ๋“  2018๋…„ 09์›” 03์ผ  ยท  223์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ant-design/ant-design


Issuehunt badges

  • []์ด ์ €์žฅ์†Œ์˜ ๋ฌธ์ œ ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์œผ๋ฉฐ ์ด๊ฒƒ์ด ์ค‘๋ณต์ด ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ฒ„์ „

3.9.0

ํ™˜๊ฒฝ

webpack4

๋ณต์ œ ๋งํฌ

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

์žฌํ˜„ ๋‹จ๊ณ„

์›นํŒฉ ๋นŒ๋“œ

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

icon ๆŒ‰้œ€ ๆ‰“ๅŒ…, js ๆ–‡ไปถ ๆ‹†ๅˆ†

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

ๆ‰“ๅŒ… ๅˆฐ ์ฒญํฌ ๋ฒค๋” ้‡ŒๅŽป ไบ†




IssueHunt ์š”์•ฝ

vagusx

ํ›„์›์ž (์ด์•ก : $ 203.00)

  • issuehunt
  • rororofff
  • ssprettychill

์ œ์ถœ ๋œ pull ์š”์ฒญ

- # 18217 ๊ฐœ๋ฏธ ๋””์ž์ธ ์•„์ด์ฝ˜ ์‚ฌ์šฉ 4.0

ํŒ

  • ๋” ๋งŽ์€ ์ž๊ธˆ ์ง€์› ๋ฌธ์ œ๋ฅผ ์ฐพ์œผ ๋ ค๋ฉด

    -๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์˜ ๋„์›€์ด ํ•„์š”ํ•˜์‹ญ๋‹ˆ๊นŒ? ์ž๊ธˆ์„ ์กฐ๋‹ฌํ•˜๋ ค๋ฉด IssueHunt์— ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋ฅผ

IssueHunt๋Š” ๋‹ค์Œ ์Šคํฐ์„œ์˜ ์ง€์›์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ์Šคํฐ์„œ๋˜๊ธฐ

Rewarded on Issuehunt Inactive IssueHuntFest โ“FAQ ๐Ÿ—ฃ Discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๐Ÿ’ข ๋‘ํ†ต. . . . ์‚ผ์ดŒ. . .

๋ชจ๋“  223 ๋Œ“๊ธ€

์ด ๋ฌธ์ œ์˜ ๋ฒˆ์—ญ :


antd svg ํŒจํ‚ค์ง€ ํฌ๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ํฝ๋‹ˆ๋‹ค. ์š”์ฒญ์‹œ @ ant-design / icons ํŒจํ‚ค์ง€๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

  • []์ด ์ €์žฅ์†Œ์˜ ๋ฌธ์ œ ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์œผ๋ฉฐ ์ด๊ฒƒ์ด ์ค‘๋ณต์ด ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ฒ„์ „

3.9.0

ํ™˜๊ฒฝ

Webpack4

๋ณต์ œ ๋งํฌ

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

์žฌํ˜„ ๋‹จ๊ณ„

Webpack ๋นŒ๋“œ

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

ํ•„์š”์— ๋”ฐ๋ผ ์•„์ด์ฝ˜ ํŒฉ, js ํŒŒ์ผ ๋ถ„ํ• 

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์ฒญํฌ ๋ฒค๋”๋กœ ํฌ์žฅ

๋ช‡ ๊ฐœ์˜ ์•„์ด์ฝ˜ ๋งŒ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค

image

<Icon /> ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ „์ฒด ์•„์ด์ฝ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•ฉ๋‹ˆ๋‹ค. ๋Ÿฐํƒ€์ž„์— ์–ด๋–ค ์ข…๋ฅ˜์˜ ์•„์ด์ฝ˜์„ ๋„์ž…ํ• ์ง€ ๋ชจ๋ฅด๊ฒ  ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด์ „์—๋Š” ์•„์ด์ฝ˜์ด iconfont.cn ํ˜ธ์ŠคํŒ…๋˜์—ˆ์œผ๋ฏ€๋กœ ํฌ์žฅ์— ๋Œ€ํ•œ ์ธ์‹์ด ์—†์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์ž„์‹œ ๊ณ„ํš์— ๋Œ€ํ•œ ์‹ฌ์ธต์  ์ธ ๋…ผ์˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579 ์ฐธ์กฐ

cc @yesmeck

์š”์ฒญ์‹œ๋กœ๋“œ ํ•  ์ˆ˜์žˆ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ์ œ๊ณตํ•ด์•ผํ•˜๋ฉฐ์ด ๋ฉ”์†Œ๋“œ๋Š” antd ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

import Star from 'antd/icons/star';

<Star />

ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒํ•˜๋ฉด ์ด์ „ ๊ธ€์ด ํ˜ธํ™˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

ํ•„์š”์— ๋”ฐ๋ผ ํŒจํ‚ค์ง• ํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์Šต๋‹ˆ๋‹ค.

iconfont๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ํŽ˜์ด์ง€ ์ฝ˜ํ…์ธ ๊ฐ€ ๋จผ์ € ๋‚˜์˜ค๊ณ  ์•„์ด์ฝ˜์ด ๋Š๋ฆฌ๊ฒŒ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

<Icon.Star />

ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒํ•˜๋ฉด ์ด์ „ ๊ธ€์ด ํ˜ธํ™˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์•„๋‹ˆ์š”, <Icon /> ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์€ ํ•œ ๋ชจ๋“  ๊ฒƒ์„ ํฌ์žฅ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋ฉ”๋‰ด ์•„์ด์ฝ˜ ์„ค์ •๊ณผ ๊ฐ™์€ ์ผ๋ถ€ ์žฅ๋ฉด์€ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๊ตฌ์„ฑ ํ•  ์ˆ˜์žˆ๋Š” ๊ฒฝ์šฐ ํ•„์š”์— ๋”ฐ๋ผ ํŒจํ‚ค์ง€ํ™” ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” ์–ด๋–ค ์•„์ด์ฝ˜์ด ์„ค์ • ๋ ์ง€ ์˜ˆ์ธกํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
๋น„๋™๊ธฐ ๋กœ๋”ฉ์ด ๋” ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. @ ant-design / icons๋ฅผ ๋ฉ์–ด๋ฆฌ์— ๋„ฃ์œผ์‹ญ์‹œ์˜ค.

์‹ค์ œ๋กœ <DatePicker /> , <Select /> ๋“ฑ๊ณผ ๊ฐ™์ด <Icon /> ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ์ œ๊ณต ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์‚ฌ์šฉ์‹œ ์™„์ „ํžˆ ๋„์ž…๋ฉ๋‹ˆ๋‹ค.

๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๊ตฌ์„ฑ ํ•  ์ˆ˜์žˆ๋Š” ๊ฒฝ์šฐ ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” ์„ค์ • ๋  ์•„์ด์ฝ˜์„ ์˜ˆ์ธกํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ๋กœ๋“œ๊ฐ€ ๋” ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  ๋ฐฑ์—”๋“œ ์‹œ์Šคํ…œ์˜ ๋ฉ”๋‰ด๊ฐ€ ๊ตฌ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•„์ด์ฝ˜์˜ ๋น„๋™๊ธฐ ๋กœ๋”ฉ์ด ์ •๋ง ํ•„์š”ํ•˜๊ณ  ์ „์ฒด ํŒจํ‚ค์ง€๊ฐ€ ๋„ˆ๋ฌด ํฝ๋‹ˆ๋‹ค.

๋น„๋™๊ธฐ๊ฐ€ ๋” ๋‚ซ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
์ฃผ๋ฌธํ˜•์œผ๋กœ ํŒจํ‚ค์ง•ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ babel-plugin-import ์™€ ๊ฐ™์€ babel ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ž‘์„ฑํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

analyzer

์‹ค์ œ๋กœ <DatePicker /> , <Select /> ๋“ฑ๊ณผ ๊ฐ™์ด <Icon /> ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ์ œ๊ณต ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์‚ฌ์šฉ์‹œ ์™„์ „ํžˆ ๋„์ž…๋ฉ๋‹ˆ๋‹ค.

๋‚ด๋ถ€ ์“ฐ๊ธฐ๊ฐ€ ๋ณ€๊ฒฝ๋จ

ํ”„๋กœ์ ํŠธ์—์„œ ํƒ€์ž…์€ ๋ณ€์ˆ˜์ธ๋ฐ ์ „์•ก ๋งŒ ์†Œ๊ฐœํ•ด๋„ ๋˜๋‚˜์š”?
<Icon type={icon} />
๋ถ€๋ถ„์ ์œผ๋กœ ๋„์ž… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

svg ์‹ฌ๋ณผ ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ€๋Šฅํ•œ ํ•œ ์ „์ฒด ํŒจํ‚ค์ง€์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.

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

๋˜ํ•œ dist ํŒจํ‚ค์ง€๋Š” @ant-design/icons ์—์„œ ์ง์ ‘ ๋นŒ๋“œํ•ด์•ผํ•˜๋ฉฐ ๊ฐ€๋ณ๊ฒŒ ์ปดํŒŒ์ผ ๋œ ์†Œ์Šค ์ฝ”๋“œ์— ์ง์ ‘ ์˜์กด ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

+1, ํŒจํ‚ค์ง€๋Š” ์‹ค์ œ๋กœ ๋‘ ๋ฐฐ์ž…๋‹ˆ๋‹ค

๐Ÿ’ข ๋‘ํ†ต. . . . ์‚ผ์ดŒ. . .

๊ฐ€์žฅ ์ฐฝํ”ผํ•œ ๊ฒƒ์€ SourceMappingUrl์„ ๋งŽ์ด ๊ฐ€์ ธ ์˜ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

3.8.2 ๋ฒ„์ „์œผ๋กœ ๋Œ์•„ ๊ฐ€๊ฒŒ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo(umi ํ”„๋กœ์ ํŠธ)

๋‹ค์Œ์€ webpack์—์„œ resolve.alias ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ์†”๋ฃจ์…˜์ž…๋‹ˆ๋‹ค.
์•ž์œผ๋กœ ํ•„์š”ํ•œ ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜์žˆ๋Š” ์ƒˆ๋กœ์šด API๋ฅผ ์„ค๊ณ„ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.
loading , close-circle ๋“ฑ๊ณผ ๊ฐ™์ด loading antd ๊ตฌ์„ฑ ์š”์†Œ์— ์‚ฌ์šฉ ๋œ ์•„์ด์ฝ˜๋„ ๊ฐ€์ ธ์™€์•ผํ•ฉ๋‹ˆ๋‹ค.


https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo(umi ํ”„๋กœ์ ํŠธ)
์ž„์‹œ ํ•ด๊ฒฐ์ฑ…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. webpack์˜ resolve.alias ํ•„๋“œ๋ฅผ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.
์•ž์œผ๋กœ๋Š” ํ•„์š”์— ๋”ฐ๋ผ ๋กœ๋”ฉ ์•„์ด์ฝ˜์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ƒˆ๋กœ์šด ์•„์ด์ฝ˜ API๋ฅผ ๋””์ž์ธํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„์•ผํ•ฉ๋‹ˆ๋‹ค.
์š”์ฒญ์‹œ ์•„์ด์ฝ˜์—๋Š” loading , close-circle ๋“ฑ๊ณผ ๊ฐ™์€ antd ์˜ ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด์ฝ˜๋„ ํฌํ•จ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

@HeskeyBaozi ์šฐ์„  ์—ด์‹ฌํžˆ ๋…ธ๋ ฅํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๋‚ด ํ˜„์žฌ ์‹œ๊ฐ„์€ 9:29 ์ด๊ณ  ์ œ์ถœ ํ•œ ์‹œ๊ฐ„์€ 6 hours ago . ํ˜•์ œ๋“ค์€ ์ •๋ง ์—ด์‹ฌํžˆํ•ฉ๋‹ˆ๋‹ค! ์ข‹์•„์š” : thumbsup :: thumbsup :: thumbsup :

๋‚ด ์ดํ•ด๋Š” antd์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด์ฝ˜์„ ํฌํ•จํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด์ฝ˜์„ ๋ณ„๋„๋กœ ๋‚˜์—ดํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@ ant-design / icons / lib / dist.js ํŒŒ์ผ์€ .

@ChiaJune antd ๊ตฌ์„ฑ ์š”์†Œ์— ์‚ฌ์šฉ ๋œ ์ „์ฒด ์•„์ด์ฝ˜ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ๋ˆ„๋ฝ ๋œ ๋ถ€๋ถ„์ด ์žˆ์œผ๋ฉด ์ถ”๊ฐ€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

fontawsome์˜ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ฐธ์กฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ใ…

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

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

...

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

๋น„

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

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

์ด์ „ ์‚ฌ์šฉ๋Ÿ‰์„ ์œ ์ง€ํ•˜๊ณ  ์ฝ˜์†”์— ๊ฒฝ๊ณ  ๋ฐ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ฉ”์‹œ์ง€๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

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

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณต๊ธ‰์ž ์ƒˆ API :

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

<Star />
<SettingIcon />

ํŠธ๋ฆฌ ์‰์ดํ‚น๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

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

<Star />
<SettingIcon />

ํŠธ์œ— ๋‹ด์•„ ๊ฐ€๊ธฐ

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo(umi ํ”„๋กœ์ ํŠธ)

๋‹ค์Œ์€ webpack์—์„œ resolve.alias ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ์†”๋ฃจ์…˜์ž…๋‹ˆ๋‹ค.
์•ž์œผ๋กœ ํ•„์š”ํ•œ ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜์žˆ๋Š” ์ƒˆ๋กœ์šด API๋ฅผ ์„ค๊ณ„ ํ•  ๊ณ„ํš์ž…๋‹ˆ๋‹ค.
loading , close-circle ๋“ฑ๊ณผ ๊ฐ™์ด loading antd ๊ตฌ์„ฑ ์š”์†Œ์— ์‚ฌ์šฉ ๋œ ์•„์ด์ฝ˜๋„ ๊ฐ€์ ธ์™€์•ผํ•ฉ๋‹ˆ๋‹ค.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo(umi ํ”„๋กœ์ ํŠธ)
์ž„์‹œ ํ•ด๊ฒฐ์ฑ…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. webpack์˜ resolve.alias ํ•„๋“œ๋ฅผ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.
์•ž์œผ๋กœ๋Š” ํ•„์š”์— ๋”ฐ๋ผ ๋กœ๋”ฉ ์•„์ด์ฝ˜์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ƒˆ๋กœ์šด ์•„์ด์ฝ˜ API๋ฅผ ๋””์ž์ธํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„์•ผํ•ฉ๋‹ˆ๋‹ค.
์š”์ฒญ์‹œ ์•„์ด์ฝ˜์—๋Š” loading , close-circle ๋“ฑ๊ณผ ๊ฐ™์€ antd ์˜ ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด์ฝ˜๋„ ํฌํ•จ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

@HeskeyBaozi ํ›Œ๋ฅญํ•œ ์†”๋ฃจ์…˜ !! (antd๊ฐ€์ด ๋ฌธ์ œ๋ฅผ ์ •๋ฆฌํ•˜๊ณ  ์•„์ด์ฝ˜์˜ ๋‹จ์ผ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ํ—ˆ์šฉ ํ•  ๋•Œ๊นŒ์ง€) ์ €๋Š” resolve.alias๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ์‹œ๋„ํ•ด ์™”์ง€๋งŒ ์ด๋กœ ์ธํ•ด ๋จธ๋ฆฌ๊ฐ€ ๊ณค๋‘๋ฐ•์งˆ ์ณค์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ด ๋ฒ„์ „๋„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ณ„์† ์ฃผ์‹œํ•˜์‹ญ์‹œ์˜ค.

cc @jameswhf @xcqwan

์ €๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค. ๋ณ„๋„๋กœ ๊ฐ€์ ธ ์˜ค๊ธฐ๋Š” ๋ชจ๋“  ์‚ฌ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์ˆ˜์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ํ™•์ธ

๋ฟก ๋นต๋€จ
๋‚˜๋Š” webpack.alias๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ทธ๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๋‹น์‹ ์„ ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :)
image
๋‚ด repo์˜ antd-icon-tree-shaking ๋ธŒ๋žœ์น˜ (Webpack4 + Babel 7.0)

์ด๊ฒƒ์€ ๋˜ํ•œ ๋‚ด๊ฐ€ ๊ฐ€์ง„ ๋ชจ๋“  ๊ฒƒ์ด ๋ฒˆ๋“ค์˜ Button ๊ฒฝ์šฐ ๋ฌธ์ œ๋ฅผ ์ผ์œผ ํ‚ต๋‹ˆ๋‹ค (์•„๋งˆ ์•„์ด์ฝ˜์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์—). ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์ด Button ๊ฒฝ์šฐ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

image

(์Šคํฌ๋ฆฐ ์ƒท์—๋Š” Button ๊ตฌ์„ฑ ์š”์†Œ ๋งŒ ์žˆ์ง€๋งŒ ์•„์ด์ฝ˜์€ ์ฃผ๋กœ ๋ฒˆ๋“ค์„ ๋ถ€ํ’€๋ฆฝ๋‹ˆ๋‹ค.)

์ˆ˜์ • ๋  ๋•Œ๊นŒ์ง€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ•œ ์ž„์‹œ ์†”๋ฃจ์…˜ (antd> = 3.9)

  1. ์•„์ด์ฝ˜์„ ๋‹ค๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์›นํŒฉ์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค. ์›นํŒฉ ๊ตฌ์„ฑ์—์„œ :
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. ๋งŒ๋“ค๊ธฐ icons.js ํด๋”์— src/ ์–ด๋””๋“ ์ง€ ์›ํ•˜๋Š”. ๋ณ„์นญ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค!
    ์ด ํŒŒ์ผ์—์„œ antd๊ฐ€ ํฌํ•จํ•ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค! antd์˜ Select ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์•„๋ž˜๋กœ ์•„์ด์ฝ˜ ๋งŒ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

config-overwrites.js ๋‚ด์—์„œ react-app-rewire (create-react-app ์ˆ˜์ •)์œผ๋กœ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•„์š”ํ•œ ์•„์ด์ฝ˜ ๋งŒ ๊ฐ€์ ธ ์™€์„œ ๋ฒ„ํŠผ์— ์ „๋‹ฌํ•  ์ˆ˜์žˆ๋Š” ๋ฐฉ์‹์œผ๋กœ JSX๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ์•„์ด์ฝ˜์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋” ๋‚˜์€ API๊ฐ€ ๋  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ํƒ€์‚ฌ ์•„์ด์ฝ˜ (๋˜๋Š” ๋ชจ๋“  svg)์œผ๋กœ ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

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

๋‚ด ๊ฐœ์ธ์ ์ธ ์ทจํ–ฅ :)

react-app-rewired ๋ฅผ ํ†ตํ•ด create-react-app ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„

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 ์š”์ 

react-app-rewired ๋ฅผ ํ†ตํ•ด create-react-app ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„

config-overrides.js

const path = require('path');

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

  config.resolve.alias = alias;

  return config;
}

icons.js ์š”์ 

์ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด twoToneColor์˜ ํ˜ธํ™˜์„ฑ์ด ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
๊ฒฐ๊ณผ :
image

์•ˆ๋…•ํ•˜์„ธ์š”,
์ด ๋ฌธ์ œ์˜ ์›์ธ์€ <Icon type="check-circle" ์™€ ๊ฐ™์€ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด API๋Š” ๋ชจ๋“  ์•„์ด์ฝ˜์ด ํฌํ•จ๋˜์–ด์•ผํ•˜๋ฏ€๋กœ ์œ ํ˜•์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋˜ํ•œ ์šฐ๋ฆฌ์—๊ฒŒ ๋Ÿฐํƒ€์ž„์— ์•„์ด์ฝ˜์„ ๊ฒฐ์ •ํ•  ์ˆ˜์žˆ๋Š” ๋Šฅ๋ ฅ์„ ์ œ๊ณตํ•˜๋ฉฐ ์ €์—๊ฒŒ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋‚˜์— ๋”ฐ๋ฅด๋ฉด API๋Š” ๋™์ผํ•˜๊ฒŒ ์œ ์ง€๋˜์–ด์•ผํ•˜์ง€๋งŒ ์•„์ด์ฝ˜ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์š”์ฒญ์‹œ ์ง€์ •๋œ ์œ ํ˜• ์œผ๋กœ ์•„์ด์ฝ˜์„๋กœ๋“œํ•˜๋Š” ๊ฒƒ์„ ์ง€์›ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋™์  ๊ฐ€์ ธ ์˜ค๊ธฐ (# 12235-Webpack 4๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ์— ๋”ฐ๋ผ ๋‹ค๋ฆ„)๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ react-loadable ๊ณผ ๊ฐ™์€ Webpack 3 ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ†ตํ•ด

์ด ์˜๊ฒฌ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ถ”๊ฐ€ ์ž„์‹œ ์†”๋ฃจ์…˜์œผ๋กœ ์ด๋™ํ•˜์‹ญ์‹œ์˜ค.

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

purched-antd-icons ํŒจํ‚ค์ง€๋Š” antd์˜ ๊ณต์‹ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉ๋˜์ง€ ์•Š์€ ๋ชจ๋“  ์•„์ด์ฝ˜์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ๋‚ด ์ƒํƒœ์— ๋”ฐ๋ผ Icomoon ์€ ํ”„๋กœ์ ํŠธ ์•„์ด์ฝ˜ ์‹œ์Šคํ…œ ๊ณต๊ธ‰์ž์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๋ฐฐ์ถœ ๋œ ์ƒ์„ฑ-๋ฐ˜์‘-์•ฑ ๋ฒˆ๋“ค ๋ถ„์„ ๋น„๊ต์ž…๋‹ˆ๋‹ค.

์›นํŒฉ ์ถœ๋ ฅ
output

๋ฒˆ๋“ค ๋ถ„์„
comparing

@ ant-design / icons / lib / dist.js ํŒŒ์ผ์€ .

์ „์—:

image

ํ›„:

image

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• @tobiaslins์—์„œ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค, ๊ทธ๊ฒƒ์€ ๋งํ•œ๋‹ค Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' ์บ” ๋ˆ„๊ตฌ ํฌ์ธํŠธ ๋‚˜ ๊ทธ๊ฒƒ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•? ๊ฐ์‚ฌ

@marcosfede ๋‚˜๋Š”

path.resolve(__dirname, "./src/icons.js") __dirname ์„ค์ •๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธ

react-app-rewired ๋Œ€์•ˆ์„ ํ†ตํ•ด create-react-app์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3.9 ์—…๊ทธ๋ ˆ์ด๋“œ๋กœ ๋ฒˆ๋“ค 700kb ์ฆ๊ฐ€ (23 %). ์ƒˆ๋กœ์šด ๊ตฌํ˜„์ด ๋งˆ์Œ์— ๋“ค์ง€๋งŒ ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋Š˜์–ด๋‚œ ๊ฒƒ์€ ๋†€๋ผ์šด ์ผ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ฆ๊ฐ€๋Š” 'iconfont'๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์‡„๋ฉ๋‹ˆ๋‹ค. @Obooman ์†”๋ฃจ์…˜์„ ๊ตฌํ˜„ํ•  ๋ถ™์„ ๋งŒํผ ์ถฉ๋ถ„ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

purched-antd-icons ํŒจํ‚ค์ง€ ๊ตฌํ˜„์œผ๋กœ ์ธํ•ด ํ”„๋กœ์ ํŠธ์— ๋งŽ์€ ๋ˆ„๋ฝ ๋œ ์•„์ด์ฝ˜์ด ๋‚จ์Šต๋‹ˆ๋‹ค.

@michaelpeterlee purched-antd-icons ๋Š” ๊ณต์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ํ•„์š”ํ•œ ์•„์ด์ฝ˜ ๋งŒ ์ œ๊ณตํ•˜๋ฉฐ antd์—์„œ ๋‹ค๋ฅธ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋” ๋งŽ์€ ์‚ฌ์šฉ์ž ์ •์˜๋ฅผ ์œ„ํ•ด ์•„์ด์ฝ˜์„ ์ˆ˜๋™์œผ๋กœ ๊ด€๋ฆฌ ํ•˜๊ฑฐ๋‚˜ ์•„์ด์ฝ˜ ์‹œ์Šคํ…œ ๊ณต๊ธ‰์ž๋กœ icomoon ๋˜๋Š” iconfont ์™€ ๊ฐ™์€ ๊ธ€๊ผด ์•„์ด์ฝ˜ ์ƒ์„ฑ๊ธฐ๋ฅผ ์„ ํƒํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

@marcosfede ๋‚˜๋Š”

path.resolve(__dirname, "./src/icons.js") __dirname ์„ค์ •๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธ

react-app-rewired ๋Œ€์•ˆ์„ ํ†ตํ•ด create-react-app์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ๊บผ๋ƒˆ์œผ๋ฏ€๋กœ ๋ฃจํŠธ ํด๋” ๋Œ€์‹  ์›นํŒฉ ํŒŒ์ผ์ด์žˆ๋Š” ๊ตฌ์„ฑ ํด๋”๋ฅผ __dirname ๊ฐ€๋ฆฌ ์ผฐ์Šต๋‹ˆ๋‹ค.

AntDesign ํŒ€์€ ์ด์ „ ๋ฐฉ์‹ (3.9 ์ด์ „)์œผ๋กœ ๋Œ์•„๊ฐ€๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•, ํ˜„๋ช…ํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

์™ธํ˜•์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. https://github.com/ant-design/ant-design-icons/issues/14

@marcosfede ๋‚˜๋Š”
path.resolve(__dirname, "./src/icons.js") __dirname ์„ค์ •๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธ
react-app-rewired ๋Œ€์•ˆ์„ ํ†ตํ•ด create-react-app์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ๊บผ๋ƒˆ์œผ๋ฏ€๋กœ ๋ฃจํŠธ ํด๋” ๋Œ€์‹  ์›นํŒฉ ํŒŒ์ผ์ด์žˆ๋Š” ๊ตฌ์„ฑ ํด๋”๋ฅผ __dirname ๊ฐ€๋ฆฌ ์ผฐ์Šต๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๋‹ค์Œ์€ ๋ฒˆ๋“ค ํฌ๊ธฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค์—์„œ ๋ณ€๊ฒฝํ•  ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  ๋‹จ์ผ ์•„์ด์ฝ˜์— ๋Œ€ํ•ด ๋ณ„๋„์˜ ๊ตฌ์„ฑ ์š”์†Œ ๋งŒ๋“ค๊ธฐ

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

์•„์ด์ฝ˜ ์ฐธ์กฐ๋ฅผ ๋ฌธ์ž์—ด๋กœ ์‚ฌ์šฉ ์ค‘๋‹จ

๋‹ค์Œ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์•„์ด์ฝ˜์„ ๋ฌธ์ž์—ด๋กœ ์ฐธ์กฐํ•˜๋ฉด ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

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

ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด ์•„์ด์ฝ˜์„ ๋ฌธ์ž์—ด๋กœ ์ฐธ์กฐ ํ•  ๋•Œ ์š”์ฒญ์‹œ SVG ์Šคํ”„๋ผ์ดํŠธ๋ฅผ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

์•„์ด์ฝ˜์„ ๋ฌธ์ž์—ด๋กœ ์ฐธ์กฐํ•˜๋Š” ๋Œ€์‹  ๋‹ค์Œ props์— ReactNode๋ฅผ ๋ช…์‹œ ์ ์œผ๋กœ ์ „๋‹ฌํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

import StarFilled from 'antd/icons/StarFilled';

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

@yesmeck ํŠธ๋ฆฌ ์‰์ดํฌ์™€ addIcon ๋ฉ”์†Œ๋“œ๋ฅผ ๋™์‹œ์— ๋„์ž…ํ•˜์ง€ ์•Š๋Š” ์ข‹์€ ์†”๋ฃจ์…˜์ž…๋‹ˆ๋‹ค!

์งˆ๋ฌธ. ์ด๋Ÿฌํ•œ ์•„์ด์ฝ˜์— CSS ์Šคํƒ€์ผ์ด ์žˆ๊ณ  ์•„์ด์ฝ˜ ์œ ํ˜•์„ ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ ์–ด๋–ป๊ฒŒํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ? ๋ชจ๋“  ๋Œ€์ฒด ์•„์ด์ฝ˜์— ์Šคํƒ€์ผ์„ ์ „๋‹ฌํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

@michaelpeterlee rc-calendar ๋Š” antd ๋ฐ @ant-design/icons ์— ์˜์กดํ•˜์ง€ ์•Š์•˜์œผ๋ฏ€๋กœ "์ „์ฒด ์•„์ด์ฝ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ๋กœ๋“œ"ํ•˜์ง€ ์•Š์•„์•ผํ•ฉ๋‹ˆ๋‹ค. ์žฌํ˜„ ๋ฐ๋ชจ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ https://github.com/react-component/calendar/issues ์—์„œ ๋ฌธ์ œ๋ฅผ ์ƒ์„ฑ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ์‹ค์ˆ˜. ๊ด€๋ จ์—†๋Š” ๋Œ“๊ธ€์„ ์‚ญ์ œํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„์ด์ฝ˜์„ ์†Œ๊ฐœํ•˜๋Š” ๊ฒƒ์€ DatePicker ๊ตฌ์„ฑ ์š”์†Œ ์—ฌ์•ผํ•ฉ๋‹ˆ๋‹ค.
image

๋‚ด ์š”์ ์€ ๋‚ด ํ”„๋กœ์ ํŠธ์˜ ์–ด๋””์—์„œ๋‚˜ antd ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ ์˜ค์ง€ ์•Š์ง€๋งŒ ์ผ๋ถ€ antd ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ Icon ์—์„œ antd Icon ์„ (๋ฅผ) ๊ฐ€์ ธ ์˜ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ „์ฒด ์•„์ด์ฝ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋Œ€์‹  ํ•„์š”ํ•œ ์•„์ด์ฝ˜ ๋งŒ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๋ฒˆ๋“ค ํฌ๊ธฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค์—์„œ ๋ณ€๊ฒฝํ•  ์‚ฌํ•ญ์ž…๋‹ˆ๋‹ค.

ํ—‰

3.11.x ๋ฅผ) ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ? 3.10.4 ํฌํ•จ๋˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@johnernaut # 12888

๋‹น๋ถ„๊ฐ„ v3.8.4๋กœ ๋Œ์•„๊ฐ€์„œ 3.9.0+ ๋ฒ„์ „์€ ํŒจํ‚ค์ง• ํ›„ ๋„ˆ๋ฌด ํฝ๋‹ˆ๋‹ค. ์œ„ ์‹ ๋“ค์ด ์–ธ๊ธ‰ ํ•œ ๋ฒ„์ „์€ ์ผ์‹œ์ ์ธ ํ•ด๊ฒฐ์ฑ… ์ผ๋ฟ์ž…๋‹ˆ๋‹ค. ์•„์ด์ฝ˜์„๋กœ๋“œ ํ•  ์ˆ˜์žˆ๋Š” ๋‹ค์Œ ๋ฒ„์ „์ด ๊ธฐ๋Œ€๋ฉ๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ ์ ์œผ๋กœ.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @yesmeck , ๋‹ค์Œ ๋ฒ„์ „์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ create-react-app v2 ๋ฐ craco ๋Œ€ํ•œ Ant Design ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊ฒŒ์‹œํ–ˆ์Œ์„ ์–ธ๊ธ‰ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ GitHub์˜ craco-antd ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค.

Ant Design Icons ์„น์…˜์˜ ํ–ˆ์œผ๋ฉฐ์ด ๋ฌธ์ œ (๋ฐ PR )๋ฅผ ๊ณ„์† ์ฃผ์‹œํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. @sunel (๋ฐ ๊ธฐํƒ€) ํŒ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋ณ„์นญ ์„ค์ •์— ๋Œ€ํ•œ ๊ท€ํ•˜์˜ ์˜๊ฒฌ์— ๋Œ€ํ•œ ๋งํฌ๋ฅผ ํฌํ•จํ–ˆ์Šต๋‹ˆ๋‹ค.


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

์ด ๋ฌธ์ œ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋ณต์ œ ์ €์žฅ์†Œ์˜ ์ดˆ์•ˆ์„ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ์›นํŒฉ ๊ตฌ์„ฑ์€ ์—ฌ๊ธฐ์— ์žˆ๋Š” ์›๋ž˜ ng-zorro-antd ํ†ตํ•ฉ ์˜ˆ์ œ์—์„œ ์ˆ˜์ •๋˜์—ˆ์œผ๋ฉฐ DllPlugin ๋Š” ํ”Œ๋žซ ํ™” ๋œ ES ๋ชจ๋“ˆ์—์„œ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์“ธ๋ชจ์—†๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.

DllPlugin ๊ฐ€ ์—†์œผ๋ฉด ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ์›นํŒฉ์ด flatten es ๋ชจ๋“ˆ์—์„œ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์—ญ์‚ฌ์  ๋ฐฐ๊ฒฝ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๋“ค์ด ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์ด DllPlugin ์˜ ์ผ๋ถ€ ์—ฃ์ง€ ์ผ€์ด์Šค๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ์ตœ๊ทผ ๋ฆด๋ฆฌ์Šค์—์„œ ๋Œ€๋ถ€๋ถ„ ์ˆ˜์ •๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํฅ๋ฏธ๋กญ๊ฒŒ๋„ ์›นํŒฉ์ด DllPlugin์—์„œ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์ง€์› ํ•˜๋Š” ๊ฒƒ์€ 5 ์›”์ด ๋˜์–ด์„œ์•ผ entryOnly: true ํ–ˆ์ง€๋งŒ ์šด์ด ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ์ข€ ๋” ๊ณ ๋ฆฝ ๋œ ์˜ˆ์ œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  webpack์— ๋ฌธ์ œ๋ฅผ ์ œ๊ธฐ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํŽธ์ง‘ : ์žฌ์ƒ์‚ฐ ์ €์žฅ์†Œ ๋ฐ ์—ญ์‚ฌ์  ๋ฌธ์ œ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด์•ผ๊ธฐ์˜ ๋ : ๋ณต์ œ ์ €์žฅ์†Œ๋ฅผ ํ—ˆ์œ„๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ์—ฌ๊ธฐ์— ์žˆ์Šต๋‹ˆ๋‹ค . ์›นํŒฉ 3.5.6์€ entryOnly: true ์ง€์›์—†์ด ๋„ˆ๋ฌด ์˜ค๋ž˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด fesm5 ๋ชจ๋“ˆ์ด ํŠธ๋ฆฌ ํ”๋“ค๋ฆฌ์ง€ ์•Š๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

ng-zorro-antd ๋ฅผ dll ๊ณต๊ธ‰ ์—…์ฒด์— ๋ฌถ๊ณ  ์‹ถ์€ ๋ถ„๋“ค์„ ์œ„ํ•ด

  • webpack > = 4.9.0 ์ด์žˆ๋Š” ๊ฒฝ์šฐ entryOnly: true ์„ DllPlugin ๊ตฌ์„ฑ์— ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค.
  • ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด์ด ์„ค์ •์„ ์›นํŒฉ ๊ตฌ์„ฑ์— ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค.
module.exports = {
  resolve: {
    alias: {
      "@ant-design/icons-angular/icons": "/path/to/node_modules/@ant-design/icons-angular/esm2015/icons/ant-design-icons-angular-icons.js"
    }
  }
}

@issuehuntfest ๋Š”์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด $ 200.00๋ฅผ ์ง€์›ํ–ˆ์Šต๋‹ˆ๋‹ค. IssueHunt์—์„œ๋ณด๊ธฐ

๊ธ€๊ผด ํŒŒ์ผ์ด ํŒจํ‚ค์ง•์— ์ฐธ์—ฌํ•˜์ง€ ์•Š๊ณ  ๋กœ์ปฌ๋กœ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?๋„ˆ๋ฌด ํฐ

๊ณต์‹์ ์œผ๋กœ์ด ๋ฌธ์ œ๋ฅผ ์ตœ์ ํ™” ํ•  ๊ณ„ํš์ž…๋‹ˆ๊นŒ? 3.8 ์ด์ „ ๋ฒ„์ „๊ณผ ์œ ์‚ฌํ•œ ๋กœ์ปฌ svg ์†”๋ฃจ์…˜์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐœ์„ ์„ ๊ธฐ๋Œ€

๊ณต์‹์ ์ธ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@fuhaiwei ๋‹ค์Œ ๋ฒ„์ „๊นŒ์ง€ ์•„์ด์ฝ˜์„ ์ง์ ‘ ๋‚ด๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ์ด ์ฃผ์„์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

ํ˜„์žฌ webpack.resolve.alias ํ•˜์—ฌ antd/es/icon ๋ฅผ ์‚ฌ์šฉ์ž ์ง€์ • ๊ตฌ์„ฑ ์š”์†Œ webpack.resolve.alias ๋Œ€์ฒดํ•ฉ๋‹ˆ๋‹ค.
์–ด์…ˆ๋ธ”๋ฆฌ๋Š” <Icon /> a props.type ๋ฐ props.theme ๊ฐ€ ์ง€์ •๋œ API๋กœ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉ ๋œ ๋ชจ๋“  ์•„์ด์ฝ˜ ๋ฐ์ดํ„ฐ๋Š” ํŽ˜์ด์ง€ ํ…Œ์ŠคํŠธ ์ค‘์— ๊ธฐ๋ก ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ฐ์ดํ„ฐ ๋ฐ https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž๋™์œผ๋กœ icons.js ํ•ฉ๋‹ˆ๋‹ค.
๋” ๋‚˜์€ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.


ํ˜„์žฌ webpack.resolve.alias ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ antd/es/icon ๋ฅผ ์‚ฌ์šฉ์ž ์ง€์ • ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๋Œ€์ฒดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋ณด๋‚ด๋“œ๋ฆฝ๋‹ˆ๋‹ค props.type ๋ฐ props.theme ์˜ <Icon /> ์ง€์ •๋œ API์—.
์ด๋ฅผ ํ†ตํ•ด ํŽ˜์ด์ง€ ํ…Œ์ŠคํŠธ ์ค‘์— ์‚ฌ์šฉ ๋œ ๋ชจ๋“  ์•„์ด์ฝ˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ฐ์ดํ„ฐ ๋ฐ https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228์„ ๊ธฐ๋ฐ˜์œผ๋กœ icons.js ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
๋” ๋‚˜์€ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

3 ๊ฐœ์›”์ด ์ง€๋‚ฌ๋Š”๋ฐ, ๊ณต๋ฌด์›์ด ์ฃผ๋ฌธํ˜•๋กœ๋“œ ๋ฐฉ๋ฒ•์„ ์ฐพ์•˜์Šต๋‹ˆ๊นŒ?

image

๋„์ž… ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ๊ธฐ๋ถ„์ด ์ข‹์œผ๋ฉฐ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žฌ๋ฃŒ์ฒ˜๋Ÿผ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ธ์šฉ๋˜๋Š” ๊ฒƒ์ด ๋„ˆ๋ฌด ์ข‹์Šต๋‹ˆ๋‹ค. . ์ด์ œ ๊ธฐ๋ณธ ์ œ๊ณต ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ๊ตฌ์„ฑ ์š”์†Œ ๋งŒ ๋ชจ๋“  ์•„์ด์ฝ˜์ด ํŒจํ‚ค์ง€ํ™”๋ฉ๋‹ˆ๋‹ค. .

Icon ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด @ ant-desigin / icons ํŒจํ‚ค์ง€๋„๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

Icon ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด @ ant-desigin / icons ํŒจํ‚ค์ง€๋„๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

Datepicker๋„ ์‚ฌ์šฉ๋˜๋ฉฐ ์ฝ”๋“œ์— ๊ทธ๋Ÿฌํ•œ ํ•ญ๋ชฉ์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. ๋ฉ”๋‰ด๋„ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

500KB ์ด์ƒ์€ ๋„ˆ๋ฌด ํฝ๋‹ˆ๋‹ค.

ing์„ ๊ธฐ๋Œ€ํ•˜๋ฉด์„œ ์›๋ž˜๋Š” ์ตœ์‹  ๋ฒ„์ „์œผ๋กœ ๋ฐ”๊ฟจ๋Š”๋ฐ ํŒจํ‚ค์ง€๊ฐ€ ๋„ˆ๋ฌด ํฐ ๊ฑธ๋ณด๊ณ  ๋‹ค์‹œ ๋Œ์•„๊ฐ€๋Š” ๊ฒŒ ๋ฌด์„œ์› ์–ด์š”.

SVG ํ˜•์‹์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์œ ์—ฐํ•˜๊ฒŒ ๊ตฌ์„ฑ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? SVG๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ๊ตฌ์„ฑ

๋‹จ์ผ ์•„์ด์ฝ˜ ๋งŒ ์ฐธ์กฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ antd์˜ ๋ชจ๋“  ๋‚ด๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฉ๋‹ˆ๋‹ค.

import Search from 'antd/icons/Search";

<Search />

๊ธฐ์กด ํ”„๋กœ์ ํŠธ์™€์˜ ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด import { Icon } from 'antd'; ์—ฌ์ „ํžˆ ์˜ˆ์•ฝ๋˜์–ด ์žˆ์ง€๋งŒ import { Icon } from 'antd'; ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ•œ ์ „์ฒด ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

์œ„์ธต์— ๋™์˜

์™„๋ฒฝํ•œ ์†”๋ฃจ์…˜์„ ๊ธฐ๋‹ค๋ฆฌ๋Š” ํ‘œ์‹œ

500k ์•„์ด์ฝ˜, ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๊นŒ?

์˜์–ด๋กœ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? 500kb๋Š” ๋‚ด ๋ฒˆ๋“ค์˜ 1/4์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” webpack์„ ์‚ฌ์šฉํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

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

์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์‹œ๋„ํ•˜๊ณ  ์•„์ด์ฝ˜ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ๋ชจ๋‘ ์ œ๊ฑฐํ–ˆ์ง€๋งŒ 500kb๋ฅผ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ , Parcel์˜ ์‹คํ—˜์  ๋ฒ”์œ„ ํ˜ธ์ด ์ŠคํŒ… ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์•„์ด์ฝ˜์„ ์ ์ ˆํžˆ ํŠธ๋ฆฌ ์‰์ดํ‚น ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ ๋‹ค๋ฅธ 20 ๊ณณ์—์„œ ๋‚ด ์•ฑ์ด ๊นจ์ ธ์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์€์ด ๋ฌธ์ œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์—ฌ๊ธฐ์—์žˆ๋Š” ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด ์ถ”๊ฐ€ 500kb๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐ์†กํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ์ œ๊ฐ€ ๋ฌด์‹œํ•˜๊ณ ์žˆ๋Š” ํ™•์‹คํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์ ธ ์˜ค๊ธฐ๊ฐ€ ํ‘œ์ค€ ์›นํŒฉ ๋นŒ๋“œ์—์„œ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ?

import Star from 'antd/icons/star';
๋ˆ„๊ตฐ๊ฐ€ ๋‚˜๋ฅผ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

@ApolloGun ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€์ด ์Šค๋ ˆ๋“œ์—์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ์ฐธ์กฐ๋˜์—ˆ์œผ๋ฉฐ ๋ชจ๋“  ๋‚ด์šฉ์€์ด ์ฃผ์„์— ์žˆ์Šต๋‹ˆ๋‹ค : https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

์ž‘๋™ ๋ฐฉ์‹์€ Webpack์— ๋‹ค๋ฅธ ์œ„์น˜, ํŠนํžˆ ์‚ฌ์šฉํ•˜๋ ค๋Š” ์•„์ด์ฝ˜์„ ์ •ํ™•ํžˆ ๋‚ด๋ณด๋‚ด๋Š” ์ƒˆ ํŒŒ์ผ์—์„œ ์•„์ด์ฝ˜์„ ํ™•์ธํ•˜๋„๋ก ์ง€์‹œํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด ์•„์ด์ฝ˜์ด ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋ฉฐ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๋‹ค๋ฅธ ๊ฒƒ์€ ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์ง€๋งŒ ์—ฌ์ „ํžˆ ๊ฑฐ๋Œ€ํ•œ ํŒŒ์ผ์„ ์–ป์Šต๋‹ˆ๋‹ค. ์•„๋งˆ๋„ antd์˜ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์•„์ด์ฝ˜์„ ์–ด๋–ป๊ฒŒ ํŒŒ์•…ํ•ฉ๋‹ˆ๊นŒ? ์ด๊ฒƒ์€ Antd ์•„์ด์ฝ˜์„ Select, Dropdown ๋“ฑ๊ณผ ๊ฐ™์€ ์‚ฌ์šฉ์ž ์ •์˜ ์•„์ด์ฝ˜์œผ๋กœ ๋Œ€์ฒดํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ• ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์ง€๋งŒ ์—ฌ์ „ํžˆ ๊ฑฐ๋Œ€ํ•œ ํŒŒ์ผ์„ ์–ป์Šต๋‹ˆ๋‹ค. ์•„๋งˆ๋„ antd์˜ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์•„์ด์ฝ˜์„ ์–ด๋–ป๊ฒŒ ํŒŒ์•…ํ•ฉ๋‹ˆ๊นŒ? ์ด๊ฒƒ์€ Antd ์•„์ด์ฝ˜์„ Select, Dropdown ๋“ฑ๊ณผ ๊ฐ™์€ ์‚ฌ์šฉ์ž ์ •์˜ ์•„์ด์ฝ˜์œผ๋กœ ๋Œ€์ฒดํ•˜๋Š” ์ข‹์€ ๋ฐฉ๋ฒ• ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

@HeskeyBaozi ๋Š” webpack ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜์—ฌ antd ๊ตฌ์„ฑ ์š”์†Œ์— ์‚ฌ์šฉ๋˜๋Š” ์•„์ด์ฝ˜ ๋ชฉ๋ก์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
์ด ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜๋ ค๋ฉด ์ „์ฒด ๋ฌธ์ œ ํ† ๋ก ์„ ์ฝ์œผ์‹ญ์‹œ์˜ค.

@ApolloGun ํ˜„์žฌ ๊ณต์‹์ ์ธ ํ•ด๊ฒฐ์ฑ…์ด ์—†์Šต๋‹ˆ๋‹ค.
ํ’€ ์š”์ฒญ : # 12888์ด ์•„์ง ์ง„ํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค.

@yesmeck , @ afc163 ๊ณง ์ข…๋ฃŒ ํ•  ๊ณ„ํš์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@HeskeyBaozi @ afc163 , ๋‹น์‹ ์ด ์ž‘์„ฑํ•œ์ด ์ƒˆ๋กœ์šด ๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•ฉ๋‹ˆ๊นŒ? ?

@HeskeyBaozi ์™œ ๋„ˆํฌ๋“ค์ด์ด ์ž‘์—…์„ํ•˜์ง€ ์•Š๋Š”์ง€ ๋ฌผ์–ด๋ด๋„ ๋ ๊นŒ์š”? 5 ๊ฐœ์›”์ด ๋„˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒŒ ๋‚ฎ์€ ์šฐ์„  ์ˆœ์œ„๋ผ๊ณ  ์ƒ๊ฐํ•˜์„ธ์š”?

@HeskeyBaozi ์™œ ๋„ˆํฌ๋“ค์ด์ด ์ž‘์—…์„ํ•˜์ง€ ์•Š๋Š”์ง€ ๋ฌผ์–ด๋ด๋„ ๋ ๊นŒ์š”? 5 ๊ฐœ์›”์ด ๋„˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒŒ ๋‚ฎ์€ ์šฐ์„  ์ˆœ์œ„๋ผ๊ณ  ์ƒ๊ฐํ•˜์„ธ์š”?

๋™์˜ํ•ฉ๋‹ˆ๋‹ค, ์ •๋ง ์งœ์ฆ๋‚ฉ๋‹ˆ๋‹ค = (

antd ์˜ ์ฝ”๋“œ๋ฅผ ๊ฒ€์‚ฌ ํ•œ ํ›„ Button ์™€ ๊ฐ™์€ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ Icon ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ํ™•์ธํ•˜๊ณ  ์ƒ์„ฑ ๋œ ์ฝ”๋“œ์— ๋”ฐ๋ผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

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

//...

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

ํŠธ๋ฆฌ ์…ฐ์ด ํ‚น์ด ์‹คํŒจํ•˜์—ฌ ๋ชจ๋“  ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ @ant-design/icons/lib/index.es.js ํ•˜๊ณ  ํ•„์š”ํ•  ๋•Œ๊นŒ์ง€ ๋ชจ๋“  ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ์ด ๋ผ์ธ์˜ ์—ญ์‚ฌ๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค : https://github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3 ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ์•ฝ๊ฐ„ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋กœ ์ธํ•ด ์ „์ฒด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ๋ฉ๋‹ˆ๋‹ค.

@poorel ,

<Icon /> ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ „์ฒด ์•„์ด์ฝ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋„์ž…ํ•ฉ๋‹ˆ๋‹ค. ๋Ÿฐํƒ€์ž„์— ์–ด๋–ค ์ข…๋ฅ˜์˜ ์•„์ด์ฝ˜์„ ๋„์ž…ํ• ์ง€ ๋ชจ๋ฅด๊ฒ  ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด์ „์—๋Š” ์•„์ด์ฝ˜์ด iconfont.cn ํ˜ธ์ŠคํŒ…๋˜์—ˆ์œผ๋ฏ€๋กœ ํฌ์žฅ์— ๋Œ€ํ•œ ์ธ์‹์ด ์—†์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์ค‘๊ฐ„ ๊ณ„ํš์— ๋Œ€ํ•œ ์‹ฌ์ธต์  ์ธ ๋…ผ์˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. # 12011 (์ฃผ์„)์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค

์ด ์†”๋ฃจ์…˜์€ ๊ณ„์† ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํ…Œ์ŠคํŠธํ–ˆ์ง€๋งŒ ํ”„๋กœ์ ํŠธ์— ์–ด๋–ค ์•„์ด์ฝ˜์ด ์žˆ๋Š”์ง€ ๋ถ„๋ฅ˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ํ”„๋กœ์ ํŠธ์— ์–ด๋–ค ์•„์ด์ฝ˜์ด ์žˆ๋Š”์ง€ ๋ถ„๋ฅ˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค ...

์ „์— ์ฝ์–ด ๋ณด์•˜๋Š”๋ฐ ์•„์ด์ฝ˜ ์ฐธ์กฐ ์ค‘ ์ƒ๋‹น์ˆ˜๊ฐ€ antd์˜ ์ž์ฒด ๊ตฌ์„ฑ ์š”์†Œ์— ์˜ํ•ด ๋งŒ๋“ค์–ด์กŒ๊ณ  ๊ทธ ์ˆ˜๊ฐ€ ์ ์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ง์ ‘ ์‚ฌ์—…์—์„œ ์ธ์šฉ ํ•œ ๊ฒƒ์€ ๋งค์šฐ ์ ์ง€ ๋งŒ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ฐธ์กฐ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ๊ณ ๋ คํ•˜๋ฉด ์ˆซ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ณ„์‚ฐํ•˜๊ธฐ ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@chenyong ์–ด , ๊ณ„๋ž€์ด ์•„ํŒŒ์š”. . .

@aryzing ์ ‘๊ทผ ๋ฐฉ์‹์ด ๋งค๋ ฅ์ ์œผ๋กœ ๋“ค๋ฆฝ๋‹ˆ๋‹ค. # 12888๋ณด๋‹ค ๋…ธ๋ ฅ์ด ๋œ ๋“ญ๋‹ˆ๊นŒ? ๊ทธ PR์—๋Š” ๋„ˆ๋ฌด ๋งŽ์€ ์ฃผ์š” ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉฐ ์•„๋งˆ๋„ ๋ช‡ ๋‹ฌ ํ›„์—๋„ ์—ฌ์ „ํžˆ ์™„๋ฃŒ๋˜์ง€ ์•Š๋Š” ์ด์œ  ์ค‘ ์ผ๋ถ€์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@zachguo # 12888์„ ์‚ดํŽด ๋ดค๋Š”๋ฐ ๋ฌด์Šจ ์ผ์ด ๋ฒŒ์–ด์ง€๊ณ  ์žˆ๋Š”์ง€ ์ •๋ง ์ดํ•ดํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ์— ๋Œ€ํ•ด ์ƒ๊ฐํ•œ ํ›„ ์•„์ด์ฝ˜์„ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋™์  API๊ฐ€ ํŠธ๋ฆฌ ์‰์ดํ‚น์— ์‚ฌ์šฉ๋˜๋Š” ES ๊ฐ€์ ธ ์˜ค๊ธฐ์˜ ์ •์  ํŠน์„ฑ๊ณผ ์ถฉ๋Œํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๊ณต์ ์œผ๋กœ ์•„์ด์ฝ˜์„ ํŠธ๋ฆฌ ์‰์ดํ‚น ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์‹  ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ผ๋ถ€ antd ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์•„์ด์ฝ˜์€ prop์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค (์ฆ‰, ๋Ÿฐํƒ€์ž„์— ๊ฒฐ์ •๋จ). ์˜ˆ๋ฅผ ๋“ค์–ด, Button์˜ API๋ฅผ ์‚ดํŽด๋ณด์‹ญ์‹œ์˜ค.

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

์ด ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ Œ๋”๋ง ๋˜๋ ค๋ฉด Button ๊ตฌ์„ฑ ์š”์†Œ (๋˜๋Š” ์‚ฌ์šฉ ๋œ ๊ธฐ๋ณธ Icon ๊ตฌ์„ฑ ์š”์†Œ)๊ฐ€ (๋Ÿฐํƒ€์ž„์—) ๋ชจ๋“  ์•„์ด์ฝ˜์— ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•˜๋ฉฐ ํŠธ๋ฆฌ ํ”๋“ค๋ฆผ์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ์ฑ…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ API๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

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

์ด ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ๋Š” ํ•„์š”ํ•œ ๊ฒƒ๋งŒ ๊ฐ€์ ธ์˜ค๊ณ  ํŠธ๋ฆฌ ์‰์ดํ‚น์€ @antd/some-icons-package ์˜ˆ์ œ์—์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๋ชจ๋“  ๋‚ด๋ณด๋‚ด๊ธฐ๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ๋ฐ˜๋…„์ด ๋„˜์—ˆ์œผ๋ฉฐ ๊ณต์‹์ ์ธ ํ•ด๊ฒฐ์ฑ…์€ ์•„์ง ์—†์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ์‚ฌ์šฉํ•˜๋Š” ์†”๋ฃจ์…˜์€ ๋น„๋™๊ธฐ๋กœ๋“œ์— import() ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ๋ฌธ์ œ๋Š” ๋ฐ˜๋…„์ด ๋„˜์—ˆ๊ณ  ์•„์ง ๊ณต์‹์ ์ธ ํ•ด๊ฒฐ์ฑ…์ด ์—†์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ ์ œ๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ ์žˆ๋Š” ํ•ด๊ฒฐ์ฑ…์€ ๋น„๋™๊ธฐ ๋กœ๋”ฉ์— import() ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ณต์‹ React ๋ฌธ์„œ ์—์„œ ๊ถŒ์žฅํ•˜๋Š” Loadable Components ๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.
๊ณต์‹ React ๋ฌธ์„œ ์—์„œ ๊ถŒ์žฅํ•˜๋Š” Loadable Components๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

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

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

image

image

  • ์ฒซ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค : @loadable/component ๋ฐ @babel/plugin-syntax-dynamic-import .
    ์ฒซ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค : @loadable/component ๋ฐ @babel/plugin-syntax-dynamic-import .
  • ๋‘ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ ๋””๋ ‰ํ„ฐ๋ฆฌ์— icons ํด๋”๋ฅผ ๋งŒ๋“ค๊ณ  ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ @ant-design/icons ๋ชจ๋“  ์•„์ด์ฝ˜์„ ๋‚ด๋ณด๋‚ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
    ๋‘ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ์— icons ํด๋”๋ฅผ ๋งŒ๋“ค๊ณ  ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ @ant-design/icon ์žˆ๋Š” ๋ชจ๋“  ์•„์ด์ฝ˜์„ ๋‚ด๋ณด๋‚ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

    ๋…ธ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ๋ฐ”๋กœ ์•„๋ž˜์—์„œ์ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ @ant-design/icons ์—์„œ ๋‚ด ๋ณด๋‚ธ ๋ชจ๋“  ์•„์ด์ฝ˜์„ icons ๋””๋ ‰ํ„ฐ๋ฆฌ์— ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.
    ๋…ธ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ๋ฐ”๋กœ ์•„๋ž˜์—์„œ์ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ @ ant-design/icons ์—์„œ ๋‚ด ๋ณด๋‚ธ ๋ชจ๋“  ์•„์ด์ฝ˜์„ icons ํด๋”์— ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.

  • ์„ธ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” Antd ์ฝ”๋“œ ์ €์žฅ์†Œ์˜ components / icon / index.tsx ๋ฅผ ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์— ๋ณต์‚ฌํ•˜๊ณ  ์ด๋ฆ„์„ Icon.jsx ๋˜๋Š” Icon.js ๋กœ ์ง€์ •ํ•œ ๋‹ค์Œ, ๋‹ค์Œ์—์„œ TypeScript ์œ ํ˜• ์ •์˜๋ฅผ ์‚ญ์ œํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ˆœ์ˆ˜ํ•œ JavaScript ์ฝ”๋“œ๋ฅผ ์–ป๊ธฐ์œ„ํ•œ ์ฝ”๋“œ. (ํ”„๋กœ์ ํŠธ์—์„œ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ Icon.tsx ๋˜๋Š” Icon.ts ๋กœ ์ง์ ‘ ์ด๋ฆ„์„ ์ง€์ •ํ•  ์ˆ˜๋„ ์žˆ์œผ๋ฏ€๋กœ ์œ ํ˜• ์ •์˜๋ฅผ ์‚ญ์ œํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.)
    ์„ธ ๋ฒˆ์งธ ๋‹จ๊ณ„์—์„œ Antd ์ฝ”๋“œ ์ €์žฅ์†Œ์˜ components / icon / index.tsx ๋ฅผ ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ์— ๋ณต์‚ฌํ•˜๊ณ  ์ด๋ฆ„์„ Icon.jsx ๋˜๋Š” Icon.js ๋กœ ์ง€์ •ํ•œ ๋‹ค์Œ ์ฝ”๋“œ์—์„œ TypeScript ์œ ํ˜• ์ •์˜๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ์ˆœ์ˆ˜ํ•œ JavaScript ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. (ํ”„๋กœ์ ํŠธ์—์„œ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ Icon.tsx ๋˜๋Š” Icon.ts ๋กœ ์ง์ ‘ ์ด๋ฆ„์„ ์ง€์ •ํ•  ์ˆ˜๋„ ์žˆ์œผ๋ฏ€๋กœ ์œ ํ˜• ์ •์˜๋ฅผ ์‚ญ์ œํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.)
    ๊ทธ๋Ÿฐ ๋‹ค์Œ ์‚ฌ์šฉ์ด ์ฝ”๋“œ ํŒŒ์ผ์„ ์ˆ˜์ • import() ๊ฐ€์ง„ @loadable/component ์ˆ˜์š”์— ๋ถ€ํ•˜ ์•„์ด์ฝ˜ ํŒŒ์ผ์—.
    ๊ทธ๋Ÿฐ ๋‹ค์Œ ์ฝ”๋“œ ํŒŒ์ผ์„ ์ˆ˜์ •ํ•˜๊ณ  import() ์™€ ํ•จ๊ป˜ @loadable/component ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•„์š”์— ๋”ฐ๋ผ ์•„์ด์ฝ˜ ํŒŒ์ผ์„๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

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

    @@ -33,12 +34,16 @@
    ํ”Œ๋Ÿฌ๊ทธ์ธ : [
    new HtmlWebpackPlugin ({
    title : 'Awesome Page',
    ํ…œํ”Œ๋ฆฟ : path.join (__ dirname, 'public / index.html'),
    ๋ฉ”ํƒ€ : {
    ๋ทฐํฌํŠธ : 'width = device-width, initial-scale = 1',
    },
    ํ•ด์‹œ : ์ฐธ,
    }),

    • ์ƒˆ๋กœ์šด webpack.NormalModuleReplacementPlugin (
    • /node_modules/antd/es/icon/index.js/,
    • path.resolve (__ dirname, 'Icon.jsx')
    • ),
      ],
      ํ•ด๊ฒฐ : {
      ๋ชจ๋“ˆ : [ 'node_modules'],
      @@ -56,13 +61,14 @@
      ์‚ฌ์šฉํ•˜๋‹ค: [{
      ๋กœ๋” : 'babel-loader',
      ์˜ต์…˜ : {
      ์‚ฌ์ „ ์„ค์ • : [
      [ '@ babel / preset-env', {targets : '> 2.486 %, not dead'}],
      '@ babel / preset-react',
      ],
      ํ”Œ๋Ÿฌ๊ทธ์ธ : [
    • [ '@ babel / plugin-syntax-dynamic-import'],
      [ '@ babel / plugin-proposal-class-properties'],
      [ 'import', {libraryName : 'antd', libraryDirectory : 'es', ์Šคํƒ€์ผ : true}],
      ],
      },
      }]

      ```

์ด ์†”๋ฃจ์…˜์˜ ์žฅ์ ์€ ๋ชจ๋“  ์•„์ด์ฝ˜์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ณ  ์•„์ด์ฝ˜ ๋ถ€์กฑ์— ๋Œ€ํ•œ ๊ฑฑ์ •์—†์ด ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์—์„œ ์•„์ด์ฝ˜์„ ์ž„์˜๋กœ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์•„์ด์ฝ˜์€ ์š”์ฒญ์‹œ๋กœ๋“œ๋˜๋ฉฐ ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•  ๋•Œ๋งŒ๋กœ๋“œ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŠน์ • ํŽ˜์ด์ง€์˜ ์•„์ด์ฝ˜ ๋ Œ๋”๋ง ์‹œ์ž‘ ํ•ด๋‹น ์•„์ด์ฝ˜ ํŒŒ์ผ. ๋กœ๋“œํ•ด์•ผํ•˜๋Š” ์œ ์ผํ•œ ๊ฒƒ์€ ํŒจํ‚ค์ง€ ์ƒ‰์ธ์—์žˆ๋Š” ์•ฝ 50K์˜ ์•„์ด์ฝ˜ ๋ชฉ๋ก ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค ( Icon.jsx ์˜ ์›นํŒฉ ๋งค์ง ์ฃผ์„์— ๋” ์งง์€ ์ด๋ฆ„์„ ์ง€์ •ํ•˜๋ฉด ํฌ๊ธฐ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Œ).
์ด ์†”๋ฃจ์…˜์˜ ์žฅ์ ์€ ๋ชจ๋“  ์•„์ด์ฝ˜์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ณ , ๋ˆ„๋ฝ ๋œ ์•„์ด์ฝ˜์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•˜์ง€ ์•Š๊ณ  ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ๋ฐฐ๊ฒฝ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์—์„œ ์•„์ด์ฝ˜์„ ์ˆ˜์ •ํ•  ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, ์•„์ด์ฝ˜์ด ์š”์ฒญ์‹œ๋กœ๋“œ๋˜๋ฉฐ ๋ Œ๋”๋ง์— ํ•„์š”ํ•œ ์•„์ด์ฝ˜ ๋งŒ๋กœ๋“œ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŠน์ • ํŽ˜์ด์ง€ ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ•  ๋•Œ๋กœ๋“œํ•ด์•ผํ•˜๋Š” ํŒจํ‚ค์ง€ ์ƒ‰์ธ ํŒŒ์ผ์—๋Š” ์•ฝ 50K์˜ ์•„์ด์ฝ˜ ๋ชฉ๋ก ๋ฐ์ดํ„ฐ ๋งŒ ์žˆ์Šต๋‹ˆ๋‹ค ( Icon.jsx ์˜ Webpack ๋งค์ง ์ฃผ์„์— ๋” ์งง์€ ์ด๋ฆ„์„ ์ง€์ •ํ•˜๋ฉด์ด ํฌ๊ธฐ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Œ).

์ด ์†”๋ฃจ์…˜์˜ ๋‹จ์ ์€ ๊ฐ ์•„์ด์ฝ˜์— ์•„์ด์ฝ˜ ์ฝ˜ํ…์ธ  ์™ธ์— ์ถ”๊ฐ€ Webpack ๋ชจ๋“ˆ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ์•„์ด์ฝ˜ ํด๋”์˜ ํฌ๊ธฐ๊ฐ€ ์ „์ฒด์ ์œผ๋กœ ํŒจํ‚ค์ง€ ๋œ ๋‹จ์ผ ํŒŒ์ผ์˜ ํฌ๊ธฐ์— 50K๋ฅผ ๋”ํ•œ ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ๋” ํฌ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ‰์ธ์—์„œ ์•„์ด์ฝ˜ ๋ชฉ๋ก ๋ฐ์ดํ„ฐ๋Š” ์‹ค์ œ๋กœ 3M์— ๊ฐ€๊นŒ์šด ํฌ๊ธฐ๋กœ ํŒจํ‚ค์ง•๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์‹ค์ œ๋กœ ์•ž๋’ค๋กœ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ์•„์ด์ฝ˜์ด ๋ช‡ ๊ฐœ ๋˜๋Š” ์ˆ˜์‹ญ ๊ฐœ์— ๋ถˆ๊ณผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋‹ค์šด๋กœ๋“œํ•˜๋Š” ๋ฐ์ดํ„ฐ์˜ ์–‘์ด ๋„ˆ๋ฌด ํฌ์ง€ ์•Š๊ณ  ์•„์ด์ฝ˜ ์ˆ˜๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ํ•œ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋™์‹œ์— ํ•œ ํŽ˜์ด์ง€์—์„œ ๋” ๋งŽ์œผ๋ฉด ๋กœ๋”ฉ ์†๋„์— ๊ฑฐ์˜ ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์ด ์†”๋ฃจ์…˜์˜ ๋‹จ์ ์€ ๊ฐ ์•„์ด์ฝ˜์— ์•„์ด์ฝ˜ ์ฝ˜ํ…์ธ  ์™ธ์— Webpack ๋ชจ๋“ˆ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ icons ํด๋”์˜ ํฌ๊ธฐ๊ฐ€ ์ด์ „์— ํŒจํ‚ค์ง€ ๋œ ๋‹จ์ผ ํŒŒ์ผ์˜ ํฌ๊ธฐ๋ณด๋‹ค ํ›จ์”ฌ ๋” ํฌ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ธ๋ฑ์Šค ํŒŒ์ผ์— 50K์˜ ์•„์ด์ฝ˜ ๋ชฉ๋ก ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์žˆ์–ด ์‹ค์ œ ํŒจํ‚ค์ง€ ํฌ๊ธฐ๋Š” 3M์— ๊ฐ€๊น์ง€๋งŒ, ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” ์•„์ด์ฝ˜์ด ์ˆ˜์‹ญ ๊ฐœ์— ๋ถˆ๊ณผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋‹ค์šด๋กœ๋“œํ•˜๋Š” ๋ฐ์ดํ„ฐ์˜ ์–‘์€ ๊ทธ๋ฆฌ ํฌ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. , ๋น„๋™๊ธฐ์‹์œผ๋กœ๋กœ๋“œ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜๋Š” ์•„์ด์ฝ˜ ์ˆ˜๊ฐ€ ๋งŽ์ง€ ์•Š์œผ๋ฉด ๋กœ๋”ฉ ์†๋„์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ์€ ํฌ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@ jinliming2 ๋Š” ์›นํŒฉ์˜ ๊ฐ€์ ธ ์˜ค๊ธฐ๊ฐ€ ์‹ค์ œ๋กœ ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ธฐ์œ„ํ•œ ๋ฉ‹์ง„ ์ˆ˜์ •์ž…๋‹ˆ๋‹ค.

webpack์— ์ตœ์†Œํ•œ ์ผ๋ถ€ ํŒŒ์ผ ์œ„์น˜ ์ •๋ณด๊ฐ€ ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— import (foo)์™€ ๊ฐ™์€ ์™„์ „ ๋™์  ๋ฌธ์€ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค. foo๋Š” ์ž ์žฌ์ ์œผ๋กœ ์‹œ์Šคํ…œ ๋˜๋Š” ํ”„๋กœ์ ํŠธ์˜ ๋ชจ๋“  ํŒŒ์ผ์— ๋Œ€ํ•œ ๊ฒฝ๋กœ ์ผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. import ()์—๋Š” ์ตœ์†Œํ•œ ์ผ๋ถ€ ๋ชจ๋“ˆ์ด์žˆ๋Š” ์œ„์น˜์— ๋Œ€ํ•œ ์ •๋ณด์ด๋ฏ€๋กœ ๋ฒˆ๋“ค๋ง์€ ํŠน์ • ๋””๋ ‰ํ† ๋ฆฌ ๋˜๋Š” ํŒŒ์ผ ์„ธํŠธ๋กœ ์ œํ•œ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋””๋ ‰ํ† ๋ฆฌ์˜ ์ ‘๋‘์‚ฌ๊ฐ€์žˆ๋Š” ํ•œ ์ด์ „์—๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ ‡๊ธดํ•ด๋„ antd ์‚ฌ์šฉ์ž๋Š” ์›นํŒฉ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋งŒ์ด ์•„๋‹ˆ๋ผ ์กฐ๊ธˆ ๋‹นํ™ฉ ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.

@aryzing ์ œ์•ˆ ๋œ API์˜ ์˜ต์…˜ 1์ด ์‹ค์ œ๋กœ # 12888์ด ๋‹ฌ์„ฑํ•˜๋ ค๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ์ฃผ์š” ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๊ด€๋ จ๋˜๋ฏ€๋กœ Ant Design ํŒ€์ด ์™„๋ฃŒ ํ•  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ค์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

xhr์„ ์‚ฌ์šฉํ•˜์—ฌ svg๋ฅผ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
์•„์ฒ˜ -svgs

ant deisgn ์ž์ฒด๋Š” ๋” ๋งŽ์€ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ๅ›พๆ ‡ๆ–‡ไปถ ๋ฅผ ๊ธฐ๋ณธ ํŒŒ์ผ ๋ณผ๋ฅจ์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š๋„๋ก ๋น„๋™๊ธฐ๋กœ๋“œ ์ฒด๊ณ„๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•ด๋ณด์‹ญ์‹œ์˜ค. ๋‹ค์Œ์„ ์ฐธ์กฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ant deisgn ์ž์ฒด๋Š” ๋” ๋งŽ์€ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ์•„์ด์ฝ˜ ํŒŒ์ผ์„ ๋น„๋™๊ธฐ ๋กœ๋”ฉ ๋ฐฉ์‹์œผ๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ๊ธฐ๋ณธ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ์ฐจ์ง€ํ•  ํ•„์š”๊ฐ€ ์—†๋„๋ก ๋‹ค์Œ์„ ์ฐธ์กฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

webpack-ant-icon-loader

@rororofff ๋Š”์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด $ 2.00๋ฅผ ํˆฌ์žํ–ˆ์Šต๋‹ˆ๋‹ค.


  • ์ด ๋ณด์ƒ์„ ๋ฐ›์œผ๋ ค๋ฉด IssueHunt ๋ฅผ ํ†ตํ•ด ํ’€ ์š”์ฒญ์„ ์ œ์ถœํ•˜์‹ญ์‹œ์˜ค.
  • ๊ธฐ์—ฌํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๊นŒ? IssueHunt ๋ฅผ ํ•˜์„ธ์š” .
  • ๋” ๋งŽ์€ ์ž๊ธˆ ์ง€์› ๋ฌธ์ œ๋ฅผ ๋ณด๋ ค๋ฉด IssueHunt ๋ฌธ์ œ ํƒ์ƒ‰๊ธฐ ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.
  • ๊ฐœ๋ฐœ์ž์˜ ๋„์›€์ด ํ•„์š”ํ•˜์‹ญ๋‹ˆ๊นŒ? ์ž๊ธˆ์„ ๋ชจ์œผ๋ ค๋ฉด IssueHunt์— ์ €์žฅ์†Œ ๋ฅผ

์ด ๋Œ€ํ™”์˜ ๊ธธ์ด์— ๊ฒ์„ ๋จน๊ณ  create-react-app ๋ฐ ant-design์„ ์‚ฌ์šฉํ•˜๋ ค๋Š” ์‚ฌ๋žŒ์„ ์œ„ํ•ด ์—ฌ๊ธฐ์— ์ƒ์šฉ๊ตฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. https://github.com/AustinGreen/cra-antd-starter

์—ฌ๊ธฐ์—๋Š” ์•„์ด์ฝ˜ ๋ฒˆ๋“ค ํฌ๊ธฐ ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ˆ˜์ •๊ณผ ๊บผ๋‚ด์ง€ ์•Š๊ณ  ์‚ฌ์šฉ์ž ์ •์˜ ์›นํŒฉ ๊ตฌ์„ฑ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. @ndbroadbent , @patricklafrance ๋ฐ ๋ชจ๋“  ๋…ธ๋ ฅ์— ๋Œ€ํ•ด ๊ฐœ๋ฏธ ๋””์ž์ธ ํŒ€ ์ „์ฒด์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ด ๋Œ€ํ™”์˜ ๊ธธ์ด์— ๊ฒ์„ ๋จน๊ณ  create-react-app ๋ฐ ant-design์„ ์‚ฌ์šฉํ•˜๋ ค๋Š” ์‚ฌ๋žŒ์„ ์œ„ํ•ด ์—ฌ๊ธฐ์— ์ƒ์šฉ๊ตฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. https://github.com/AustinGreen/cra-antd-starter

์—ฌ๊ธฐ์—๋Š” ์•„์ด์ฝ˜ ๋ฒˆ๋“ค ํฌ๊ธฐ ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ˆ˜์ •๊ณผ ๊บผ๋‚ด์ง€ ์•Š๊ณ  ์‚ฌ์šฉ์ž ์ •์˜ ์›นํŒฉ ๊ตฌ์„ฑ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. @ndbroadbent , @patricklafrance ๋ฐ ๋ชจ๋“  ๋…ธ๋ ฅ์— ๋Œ€ํ•ด ๊ฐœ๋ฏธ ๋””์ž์ธ ํŒ€ ์ „์ฒด์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Nextjs ์•ฑ์—์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@AustinGreen ๋‚˜๋Š” ๋‹น์‹ ์˜ ์˜ˆ๋ฅผ ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค.

image

์‚ฌ์ด๋“œ ๋ฐ”์™€ ํ•˜๋‚˜์˜ ๋ฒ„ํŠผ์ด์žˆ๋Š” ์•ฑ์˜ ๊ฒฝ์šฐ ํฌ๊ธฐ๊ฐ€ ~ 100kB Gzipped ์ธ ๊ฒƒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋„ˆ๋ฌด ๋งŽ์Šต๋‹ˆ๋‹ค.

@anjmao ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ๋” ์ค„์ผ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค ์ฃผ์‹œ๋ฉด ์ถ”๊ฐ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋นŒ๋“œํ•˜๋Š” ๊ฒฝ์šฐ ํ”„๋ŸฐํŠธ ์—”๋“œ ํ”„๋ ˆ์ž„ ์›Œํฌ ์šฉ์œผ๋กœ ~ 100kB Gzipped, ~ 5 ๊ฐœ์˜ ๊ตฌ์„ฑ ์š”์†Œ (์—์„œ ํฌ๊ด„์  ์ธ ๊ตฌ์„ฑ ์š”์†Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ), ์•„์ด์ฝ˜ ๋ฐ ๊ธฐํƒ€ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋Š” ๊ฝค ํ‘œ์ค€์ž…๋‹ˆ๋‹ค.

@anjmao ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ๋” ์ค„์ผ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค ์ฃผ์‹œ๋ฉด ์ถ”๊ฐ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋นŒ๋“œํ•˜๋Š” ๊ฒฝ์šฐ ํ”„๋ŸฐํŠธ ์—”๋“œ ํ”„๋ ˆ์ž„ ์›Œํฌ ์šฉ์œผ๋กœ ~ 100kB Gzipped, ~ 5 ๊ฐœ์˜ ๊ตฌ์„ฑ ์š”์†Œ (์—์„œ ํฌ๊ด„์  ์ธ ๊ตฌ์„ฑ ์š”์†Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ), ์•„์ด์ฝ˜ ๋ฐ ๊ธฐํƒ€ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋Š” ๊ฝค ํ‘œ์ค€์ž…๋‹ˆ๋‹ค.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579 ์—ฌ๊ธฐ์— ์ข‹์€ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๋‹ค

@ Oscar-ren ํ”„๋กœ์ ํŠธ๋Š” ์ด๋ฏธ ์•„์ด์ฝ˜ ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค (์ด๊ฒƒ์ด ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ~ 400kB๊ฐ€ ์•„๋‹Œ ~ 100kB ์ธ ์ด์œ ์ž…๋‹ˆ๋‹ค).

@tobiaslins ๋งˆ์ง€๋ง‰ ์˜๊ฒฌ ์ดํ›„ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ๋ณ€๊ฒฝ ํ–ˆ์Šต๋‹ˆ๊นŒ?
Nuxt ํ”„๋กœ์ ํŠธ์—์„œ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์ด ๋™๊ธฐํ™”๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

์›นํŒฉ ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” Vue์˜ ๋ฒ„์ „ ์ธ ์ฐธ๊ณ ๋กœ :
https://github.com/atjason/ant-design-vue-demo

๋ณด๋‚ด๋‹ค:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Hello World ์˜ ํŒจํ‚ค์ง€ ํฌ๊ธฐ :

image

ant deisgn ์ž์ฒด๋Š” ๋” ๋งŽ์€ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ๅ›พๆ ‡ๆ–‡ไปถ ๋ฅผ ๊ธฐ๋ณธ ํŒŒ์ผ ๋ณผ๋ฅจ์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š๋„๋ก ๋น„๋™๊ธฐ๋กœ๋“œ ์ฒด๊ณ„๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•ด๋ณด์‹ญ์‹œ์˜ค. ๋‹ค์Œ์„ ์ฐธ์กฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ant deisgn ์ž์ฒด๋Š” ๋” ๋งŽ์€ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ์•„์ด์ฝ˜ ํŒŒ์ผ์„ ๋น„๋™๊ธฐ ๋กœ๋”ฉ ๋ฐฉ์‹์œผ๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ๊ธฐ๋ณธ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ์ฐจ์ง€ํ•  ํ•„์š”๊ฐ€ ์—†๋„๋ก ๋‹ค์Œ์„ ์ฐธ์กฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

webpack-ant-icon-loader

ํ›„์†์„ ์œ„ํ•ด ์ด๊ฒƒ์€ React์—์„œ๋งŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, @ jinliming2 ์†”๋ฃจ์…˜์€ ์–ธ์ œ ์ถœ์‹œ ๋˜๋‚˜์š”?
webpack-ant-icon-loader ๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
๋‹น์‹ ๊ณผ webpack-ant-icon-loader ?
๋‚ด๊ฐ€์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋Š”์ง€ ๋ณด๋„๋กํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” @ beven91!

์ด์ „์— ๋ช‡ ๊ฐ€์ง€ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ์ง€๋งŒ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜๊ณ 
์ด์œ ๋ฅผ ํŒŒ์•…ํ•˜์‹ญ์‹œ์˜ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ท€ํ•˜์˜ ์งˆ๋ฌธ์œผ๋กœ ์ธํ•ด ์‚ฌ๊ฑด์„
์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ๋ณด์—ฌ์ค„ ์ƒ˜ํ”Œ ํ…Œ์ŠคํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
์ž‘๋™ ์‹œ๊ฐ„! ๊ฒฐ๊ณผ ๋ฒˆ๋“ค์—์„œ 1.21 Mb๋ฅผ ์ง€์†์ ์œผ๋กœ ์ ˆ์•ฝํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฐ๋ชจ ํ”„๋กœ์ ํŠธ์™€ ์ž‘์—…์ค‘์ธ
์ƒ์—…์ ์œผ๋กœ.

๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ๊ฐ™์€ ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ ์—ฌ๊ธฐ์— ์˜ˆ์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฒŒ์‹œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฌธ์ œ :
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

webpack-ant-icon-loader๊ฐ€ ์—†์œผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์–ป์Šต๋‹ˆ๋‹ค.
bundle.development.js 4.59 MiB ์•ฑ [๋ฐฉ์ถœ ๋จ] ์•ฑ

webpack-ant-icon-loader๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์Œ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
../../index.html 555 ๋ฐ”์ดํŠธ [๋ฐฉ์ถœ ๋จ]
0.bundle.development.js 1.21 MiB 0 [๋ฐฉ์ถœ ๋จ]
bundle.development.js 3.41 MiB ์•ฑ [๋ฐฉ์ถœ ๋จ] ์•ฑ

๋ช‡ ๊ฐ€์ง€ ์ฐธ๊ณ  ์‚ฌํ•ญ :

  • 0.bundle.development.js ์ƒ์„ฑ์„ ์‚ญ์ œํ•˜๋ฉด ๋” ๋‚˜์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
    ์ธ๊ณต๋ฌผ.
  • ์•„์ด์ฝ˜์€ ์ตœ์ข… ์ œํ’ˆ์—์„œ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค. ์ฆ‰, ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. umirc.js ๊ตฌ์„ฑ์„ ๋ณด์•˜์ง€๋งŒ react-router๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ํ‘œ์‹œํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

2019 ๋…„ 4 ์›” 5 ์ผ ๊ธˆ์š”์ผ ์˜คํ›„ 2:38 beven91 [email protected] ์ž‘์„ฑ :

์•ˆ๋…•ํ•˜์„ธ์š”, ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
๋‹น์‹ ๊ณผ ํ•จ๊ป˜ webpack-ant-icon-loader?
๋‚ด๊ฐ€์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋Š”์ง€ ๋ณด๋„๋กํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

โ€”
๋Œ“๊ธ€์„ ๋‹ฌ์•˜ ๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜์‹  ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ณ  GitHub์—์„œ ํ™•์ธํ•˜์„ธ์š”.
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ,
๋˜๋Š” ์Šค๋ ˆ๋“œ ์Œ์†Œ๊ฑฐ
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

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

๊ทธ๋ƒฅ ๊ถ๊ธˆ @AustinGreen ์–ด๋–ป๊ฒŒ ๊ฐœ๋ฏธ๊ฐ€ ๋ฌธ์„œํ™”๋ณด๋‹ค ์†”๋ฃจ์…˜์˜ ๋‹ค๋ฅธ react-app-rewired ๋ฐ babel-plugin-import ๋ฐฉ๋ฒ•์€ ์—ฌ๊ธฐ ๋ฌธ์„œํ™” - https://ant.design/docs/react/use-with-create-react -app ?

GitHub
Create react ์•ฑ ๋ฐ ant ๋””์ž์ธ ์‚ฌ์šฉ์„์œ„ํ•œ ์ƒ์šฉ๊ตฌ-AustinGreen / cra-antd-starter
๊ธฐ์—…์„์œ„ํ•œ ์ตœ๊ณ ์˜ React UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜ ์ธ ๊ณ ํ’ˆ์งˆ React ๊ตฌ์„ฑ ์š”์†Œ ์„ธํŠธ๋ฅผ ์‚ฌ์šฉํ•œ ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ๊ธ‰ UI ๋””์ž์ธ ์–ธ์–ด ๋ฐ React ๊ธฐ๋ฐ˜ ๊ตฌํ˜„

@annjawn ์€ create-react-app 2.0๋ถ€ํ„ฐ react-app-rewired๊ฐ€ ๋” ์ด์ƒ ์œ ์ง€๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋‚ด ํ”„๋กœ์ ํŠธ๋Š” CRA 2.0 ์šฉ react-app-rewired๋ฅผ ๋Œ€์ฒดํ•˜๊ธฐ ์œ„ํ•ด ์ƒ์„ฑ ๋œ craco + craco-antd๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

@ Beven91 ์ด ์ด์ „ ์˜๊ฒฌ ์˜์ด ๋ถ€๋ถ„์„ ๋„์™€ ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

  • ์•„์ด์ฝ˜์€ ์ตœ์ข… ์ œํ’ˆ์—์„œ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค. ์ฆ‰, ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. umirc.js ๊ตฌ์„ฑ์„ ๋ณด์•˜์ง€๋งŒ react-router๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ ํ‘œ์‹œํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

์ „์ฒด ๋ฒˆ๋“ค์—์„œ ์•„์ด์ฝ˜ ์‚ฌ์ด์— ๋ถ„๋ฆฌ๊ฐ€ ์žˆ์ง€๋งŒ ์‚ฌ์šฉ ๋œ ์•„์ด์ฝ˜์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋ถ„๋ฆฌ ๋œ ๋ฒˆ๋“ค์˜ ์ผ๋ถ€๋กœ ๋‚จ์•„ ์žˆ์œผ๋ฏ€๋กœ์ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ถ„๋ฆฌ๊ฐ€ ๋ฌด์˜๋ฏธํ•œ ๋ถ„๋ฆฌ ๋ฒˆ๋“ค๋กœ ํฌํ•จ๋œ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

@annjawn ์€ create-react-app 2.0๋ถ€ํ„ฐ react-app-rewired๊ฐ€ ๋” ์ด์ƒ ์œ ์ง€๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋‚ด ํ”„๋กœ์ ํŠธ๋Š” CRA 2.0 ์šฉ react-app-rewired๋ฅผ ๋Œ€์ฒดํ•˜๊ธฐ ์œ„ํ•ด ์ƒ์„ฑ ๋œ craco + craco-antd๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

@AustinGreen ์€ ์˜๋ฏธ๊ฐ€ ์žˆ์ง€๋งŒ CRACO๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๊ทผ๋ณธ์ ์œผ๋กœ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. Btw, ๋˜ํ•œ react-loadable์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ ๋ถ„ํ• ์„ ์ˆ˜ํ–‰ ํ•  ์˜ˆ์ •์ด๋ฉฐ ๋ฉ”์„œ๋“œ + ๋ชจ๋“ˆ ์‹ ๊ฐ€์ ธ ์˜ค๊ธฐ + ๋น„๋™๊ธฐ ๊ตฌ์„ฑ ์š”์†Œ๋กœ๋“œ๊ฐ€ ์ƒ๋‹นํ•œ ๋ฒˆ๋“ค ํฌ๊ธฐ ๊ฐ์†Œ๋ฅผ ์ œ๊ณตํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”.
๋Šฆ์–ด์„œ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ฒ ์Šต๋‹ˆ๋‹คใ€‚

์•ˆ๋…•ํ•˜์„ธ์š” @vladimirmoushkov

์—ฌ๊ธฐ์—์„œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ant-icons-webpack-loade-test # 1

์ˆ˜์ • ๋  ๋•Œ๊นŒ์ง€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ•œ ์ž„์‹œ ์†”๋ฃจ์…˜ (antd> = 3.9)

  1. ์•„์ด์ฝ˜์„ ๋‹ค๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์›นํŒฉ์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค. ์›นํŒฉ ๊ตฌ์„ฑ์—์„œ :
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. ๋งŒ๋“ค๊ธฐ icons.js ํด๋”์— src/ ์–ด๋””๋“ ์ง€ ์›ํ•˜๋Š”. ๋ณ„์นญ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค!
    ์ด ํŒŒ์ผ์—์„œ antd๊ฐ€ ํฌํ•จํ•ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค! antd์˜ Select ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์•„๋ž˜๋กœ ์•„์ด์ฝ˜ ๋งŒ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

config-overwrites.js ๋‚ด์—์„œ react-app-rewire (create-react-app ์ˆ˜์ •)์œผ๋กœ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฏธ ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒฝ๊ณ  ๊ตฌ์„ฑ ์š”์†Œ๋Š” ํ™•์ธ ๋ฐ ๋‹ซ๊ธฐ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ์ด ์†”๋ฃจ์…˜์—์„œ๋Š” ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@ Venugopal46์—์„œ๋Š” icons.js ์—๋„ ์ด๋Ÿฌํ•œ ์•„์ด์ฝ˜ (๊ฐœ๋ฏธ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‚ฌ์šฉ๋จ)์„ ์ถ”๊ฐ€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‚˜๋ฅผ ์œ„ํ•ด ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ์ฑ…์— ๊ทผ์ ‘ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์™„๋ฃŒํ•˜๋ ค๋ฉด ๋นŒ๋“œ ํ”„๋กœ์„ธ์Šค์˜ ์ผ๋ถ€๋กœ icons.js๋ฅผ ์ž๋™ ์ƒ์„ฑํ•˜๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

icons.js ์— ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฏธ์˜ ์ž์ฒด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜จ ์•„์ด์ฝ˜์„ ์ •ํ™•ํžˆ ์•Œ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๋‚˜๋ฅผ ์œ„ํ•ด ์œ„์˜ ํ•ดํ‚น :

  1. ์•„์ด์ฝ˜์„ ๋‹ค๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์›นํŒฉ์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค. ์›นํŒฉ ๊ตฌ์„ฑ์—์„œ :
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. ๋งŒ๋“ค๊ธฐ icons.js ํด๋”์— src/ ์–ด๋””๋“ ์ง€ ์›ํ•˜๋Š”. ๋ณ„์นญ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค!
    ์ด ํŒŒ์ผ์—์„œ antd๊ฐ€ ํฌํ•จํ•ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค! antd์˜ Select ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์•„๋ž˜๋กœ ์•„์ด์ฝ˜ ๋งŒ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

config-overwrites.js ๋‚ด์—์„œ react-app-rewire (create-react-app ์ˆ˜์ •)์œผ๋กœ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‹ค์Œ generateIconsList.sh ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜์—ฌ src/icons.js :

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

ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ์—์„œ generateIconsList.sh 2>/dev/null >src/icons.js ๋ฅผ ์‹คํ–‰ ํ•˜์—ฌ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค! .
์Šคํฌ๋ฆฝํŠธ๋Š” ์ถ”์•…ํ•œ ํ•ดํ‚น์ด๋ฉฐ ๋ถ„๋ช…ํžˆ ๋‚ด๋ถ€ ์•„์ด์ฝ˜ ์ฐธ์กฐ ๋˜๋Š” ์—ฌ๋Ÿฌ ์ค„๋กœ ๋œ <Icon /> ์ฐธ์กฐ๋ฅผ ํฌ์ฐฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” ๋ช‡ ๊ฐ€์ง€ ์•„์ด์ฝ˜ ์ผ€์ด์Šค๋ฅผ ์ˆ˜๋™์œผ๋กœ ์ถ”๊ฐ€ํ•ด์•ผํ–ˆ์ง€๋งŒ ์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฒฐ๊ตญ ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•ฉ๋‹ˆ๋‹ค. ์ตœ์ข… ๋ฒˆ๋“ค์—์„œ 1.1MB๊ฐ€ ๋” ์ ์Šต๋‹ˆ๋‹ค!

icons.js ์— ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฏธ์˜ ์ž์ฒด ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ†ตํ•ด ๊ฐ€์ ธ์˜จ ์•„์ด์ฝ˜์„ ์ •ํ™•ํžˆ ์•Œ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์›น ํŽ˜์ด์ง€์—์„œ ๋ˆ„๋ฝ ๋œ (ํ‘œ์‹œ๋˜์ง€ ์•Š์Œ) ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์žˆ์ง€๋งŒ ๊ฑฐ๊ธฐ์— ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์–ผ๋งˆ๋‚˜ ๋งŽ์€ antd์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ ์ €์—๊ฒŒ๋Š” ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ ์•ฝ 10 ๋ถ„์ด ๊ฑธ๋ ธ์Šต๋‹ˆ๋‹ค. (๋‚˜๋Š” ๋งŽ์€ ๊ฐœ๋ฏธ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ)

์˜ˆ๋ฅผ ๋“ค์–ด ํ…Œ์ด๋ธ”์— ์ •๋ ฌ ํ™”์‚ดํ‘œ๊ฐ€์—†๋Š” ๊ฒฝ์šฐ :

  1. ๊ฐœ๋ฏธ ํ…Œ์ด๋ธ”์„ ๊ฒ€์‚ฌํ•˜๊ณ  <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> ์ฐพ์Šต๋‹ˆ๋‹ค. ์ด <i /> ํƒœ๊ทธ๊ฐ€ ๋น„์–ด ์žˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ์•„์ด์ฝ˜ ์ด๋ฆ„์ด caret-down ์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. @ant-design/icons/lib ํด๋”์—์„œ์ด ์•„์ด์ฝ˜์„ ์ฐพ๊ณ  filled ๋˜๋Š” outline ํด๋” (ํ•„์š”ํ•œ ์•„์ด์ฝ˜ ์œ ํ˜•์— ๋”ฐ๋ผ ๋‹ค๋ฆ„)๋ฅผ ์„ ํƒํ•œ ๋‹ค์Œ icons.js ์— ์ƒˆ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. :
export { default as CaretDownOutline } from '@ant-design/icons/lib/outline/CaretDownOutline';

์ตœ์„ ์˜ ๋ฐฉ๋ฒ•์€ ์•„๋‹ˆ์ง€๋งŒ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฏธ ๊ฐœ๋ฐœ ํŒ€์ด ํ–ฅํ›„ ๋ฆด๋ฆฌ์Šค์—์„œ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์—ฌ ์ด๋Ÿฌํ•œ ๋”๋Ÿฌ์šด ํ•ดํ‚น์„ ํ”ผํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” !

์ด ์ฃผ์ œ์— ๋Œ€ํ•œ ์†Œ์‹์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋‹ค์Œ antd์˜ ์ถœ์‹œ ํ›„๋ณด์ž…๋‹ˆ๊นŒ?
์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋ช‡ ๊ฐ€์ง€ ์‹œ๋„๋ฅผํ–ˆ์ง€๋งŒ ( webpack-ant-icon-loader , babel-import-plugin ) ์•„๋ฌด ๊ฒƒ๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌ!

์ด๊ฒƒ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์ •๋ง๋กœ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์Šต๋‹ˆ๋‹ค!

@zlab @nuintun @anjmao ์— ๋„์›€์ด ํ•„์š”ํ•˜๋ฉด https://zlab.github.io/report.html ์ด ํŽ˜์ด์ง€์—์„œ ์ƒ์„ฑ ๋œ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ๋ฌด์—‡์ธ์ง€ ๋ฌผ์–ด๋ณด์‹ญ์‹œ์˜ค. ๋‚ด ํ”„๋กœ์ ํŠธ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ฐพ์•˜์Šต๋‹ˆ๋‹ค. webpack-bundle-analyzer์ž…๋‹ˆ๋‹ค.

๋ชจ๋‹ฌ ๋งŒ ์‚ฌ์šฉ๋˜์ง€๋งŒ 500k ์•„์ด์ฝ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํŒจํ‚ค์ง•๋ฉ๋‹ˆ๋‹ค.

๋ฐ˜๋…„์ด ๋„˜์—ˆ๋Š”๋ฐ ์ง„์ „์ด ์—†๋‚˜์š”?

antd๋ฅผ ๋ฒ„๋ฆฌ๊ณ , ๊ทธ๋Ÿฐ ์ค‘์š”ํ•œ ๋ฌธ์ œ๋Š” ์ค‘์š”ํ•˜์ง€ ์•Š๋‹ค ...

์ด์ œ ํ•„์š”์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์œผ๋กœ ํŒจํ‚ค์ง•ํ•ด์•ผํ•˜๋Š” ํŒŒ์ผ์„๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. 500kb

๋‚ด ์›นํŒฉ์— ๋ณ„์นญ์„ ์ถ”๊ฐ€ํ•˜๊ณ  icon.ts์— ์•„์ด์ฝ˜์„ ๋‚ด๋ณด๋ƒˆ์ง€๋งŒ npm start ์‹คํ–‰ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์€ ๋‚ด webpack ํ•ด๊ฒฐ ๊ตฌ์„ฑ์ž…๋‹ˆ๋‹ค.

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

1. ํ”„๋กœ์ ํŠธ์—์„œ ์•„์ด์ฝ˜ ์•„์ด์ฝ˜์ด ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€๊ฐ€์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋„์™€์ฃผ์„ธ์š”.
image
2. webpack externals = { 'antd': 'antd'} ์‚ฌ์šฉ์ด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€ ๋ถ„์„์—์„œ antd๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

1. ํ”„๋กœ์ ํŠธ์—์„œ ์•„์ด์ฝ˜ ์•„์ด์ฝ˜์ด ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€๊ฐ€์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋„์™€์ฃผ์„ธ์š”.
2. webpack externals = { 'antd': 'antd'} ์‚ฌ์šฉ์ด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€ ๋ถ„์„์—์„œ antd๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@wiiler

  1. ์ฐธ๊ณ ๋กœ Icon์„ ์ฐธ์กฐํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
    ์‹ค์ œ๋กœ <DatePicker /> , <Select /> ๋“ฑ๊ณผ ๊ฐ™์ด <Icon /> ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ์ œ๊ณต ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์‚ฌ์šฉ์‹œ ์™„์ „ํžˆ ๋„์ž…๋ฉ๋‹ˆ๋‹ค.

  2. ์™ธ๋ถ€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ babel-plugin-import ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊บผ์•ผํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ์›นํŒฉ์— ๋ณ„์นญ์„ ์ถ”๊ฐ€ํ•˜๊ณ  icon.ts์— ์•„์ด์ฝ˜์„ ๋‚ด๋ณด๋ƒˆ์ง€๋งŒ npm start ์‹คํ–‰ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์€ ๋‚ด webpack ํ•ด๊ฒฐ ๊ตฌ์„ฑ์ž…๋‹ˆ๋‹ค.

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

์ด ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

๋ฟก ๋นต๋€จ
์™œ '../src/utils/antdIcon.ts'์— '..'๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์›นํŒฉ ๊ตฌ์„ฑ์ด ๋ณ„๋„์˜ ๋””๋ ‰ํ† ๋ฆฌ์— ์žˆ์Šต๋‹ˆ๊นŒ?

1. ํ”„๋กœ์ ํŠธ์—์„œ ์•„์ด์ฝ˜ ์•„์ด์ฝ˜์ด ์‚ฌ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€๊ฐ€์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋„์™€์ฃผ์„ธ์š”.
2. webpack externals = { 'antd': 'antd'} ์‚ฌ์šฉ์ด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€ ๋ถ„์„์—์„œ antd๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@wiiler

  1. ์ฐธ๊ณ ๋กœ Icon์„ ์ฐธ์กฐํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    > # 12011 (์ฝ”๋ฉ˜ํŠธ)
    > ์‹ค์ œ๋กœ <DatePicker /> , <Select /> ๋“ฑ๊ณผ ๊ฐ™์ด <Icon /> ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ์ œ๊ณต ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์‚ฌ์šฉ์‹œ ์™„์ „ํžˆ ๋„์ž…๋ฉ๋‹ˆ๋‹ค.
  2. ์™ธ๋ถ€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ babel-plugin-import ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊บผ์•ผํ•ฉ๋‹ˆ๋‹ค.

์ดํ•ด , ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

๋‚ด ์›นํŒฉ์— ๋ณ„์นญ์„ ์ถ”๊ฐ€ํ•˜๊ณ  icon.ts์— ์•„์ด์ฝ˜์„ ๋‚ด๋ณด๋ƒˆ์ง€๋งŒ npm start ์‹คํ–‰ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์€ ๋‚ด webpack ํ•ด๊ฒฐ ๊ตฌ์„ฑ์ž…๋‹ˆ๋‹ค.

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

์ด ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

๋ฟก ๋นต๋€จ
์™œ '../src/utils/antdIcon.ts'์— '..'๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์›นํŒฉ ๊ตฌ์„ฑ์ด ๋ณ„๋„์˜ ๋””๋ ‰ํ† ๋ฆฌ์— ์žˆ์Šต๋‹ˆ๊นŒ?

๋ฏธ์•ˆ ํ•ด์š”, ์ œ ์ž˜๋ชป์ด์—์š”. ์ž˜๋ชป๋œ ํŒŒ์ผ ์ด๋ฆ„์„ ์ผ๋Š”๋ฐ ์ด์ œ ๋ณ„์นญ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ

์ด ๋ฌธ์ œ๋Š” ์•ž์œผ๋กœ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์„๊นŒ์š”? ๊ฑฐ์˜ 400k ์ฆ๊ฐ€

์•ˆ๋…•ํ•˜์„ธ์š”, ์–ธ์ œ ํ•ด๊ฒฐ ๋ ์ง€ ๋Œ€๋žต์ ์ธ ์˜ˆ์ƒ ์‹œ๊ฐ„์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

image

๋ฒˆ๋“ค์— ์ถ”๊ฐ€ 490kb๊ฐ€ ์žˆ์œผ๋ฉด Icon ๊ฑฐ์˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋งค์šฐ ํฐ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ด์— ๋Œ€ํ•œ ์ˆ˜์ •์„ ๋ฆด๋ฆฌ์Šค ํ•  ๋•Œ๊นŒ์ง€ ์šฐ๋ฆฌ๊ฐ€ ํ•  ์ˆ˜์žˆ๋Š” ์ž„์‹œ ์ˆ˜์ •์ด ์žˆ์Šต๋‹ˆ๊นŒ?

@smddzcy ๊ฐ€ ์Šค๋ ˆ๋“œ๋ฅผ ์ฝ์—ˆ์Šต๋‹ˆ๊นŒ?

@ schester44 ๋‹ค์–‘ํ•œ ์–ธ์–ด๋กœ ์“ฐ์ธ ์“ฐ๋ ˆ๋“œ์™€โ€ฆ ์•ŒํŒŒ๋ฒณ์ด๋‚˜ ์‹ฌ์ง€์–ด ์Œ์ ˆ๊นŒ์ง€ ๋งํ•˜๋ ค๊ณ ํ–ˆ์ง€๋งŒ ๋Œ€๋ณธ ๊นŒ์ง€ ๊ฐ€์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹คโ€ฆ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ์™„์ „ํžˆ ๋ช…ํ™•ํ•˜๊ฒŒํ•˜๊ธฐ ์œ„ํ•ด ์—ํŠธ๋ฃจ๋ฆฌ์•„์—์„œ ํŒŒ์ƒ ๋œ ์•ŒํŒŒ๋ฒณ์œผ๋กœ ์ œํ•œ๋ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„, ์ €๋Š” ์•„์ฃผ ๊ฐ„๋‹จํ•œ purched-antd-icons ํŒจํ‚ค์ง€ ๊ตฌํ˜„์œผ๋กœ ์„ฑ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ๊ฒƒ์€ ์™„์ „ํžˆ ์ˆ˜๋™์ž…๋‹ˆ๋‹ค. DOM์„ ๊ฒ€์‚ฌํ•˜์—ฌ ๋ˆ„๋ฝ ๋œ ์•„์ด์ฝ˜์„ ์กฐ์ •ํ•˜๋Š” ๋ฐ 3-4 ์‹œ๊ฐ„ ์ •๋„ ์†Œ์š”๋ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ / ์ถœ์‹œ์ฃผ๊ธฐ์˜ ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„์—์„œ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€ / ์˜คํ”„๋ผ์ธ ์šฐ์„  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ฒฝ์šฐ ์œ ์ผํ•œ ๋ฌธ์ œ๋Š” iOS WKWebview RAM ์ œํ•œ์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ iOS ๋ชจ๋ฐ”์ผ ํ”„๋กœํ•„์— ๊ณ„์†ํ•ด์„œ ์ธ๊ณต๋ฌผ์ด ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์œผ๋ฉด์ด๋ฅผ ์™„์ „ํžˆ ๋ฌด์‹œํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ์ง„ํ–‰์ด ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์—์ด ์ƒˆ๋กœ์šด Icon API๊ฐ€ ๋ณด๋ฅ˜๋˜๊ณ  ์ด์ „ API๊ฐ€ ๋ณต์›๋˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

@ afc163 ,

2018 ๋…„ 9 ์›” 15 ์ผ์— ์ž‘์„ฑํ•œ ๋‚ด์šฉ์ด ์ข‹์€ ํ•ด๊ฒฐ์ฑ… ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค (์•„๋ž˜ Google ๋ฒˆ์—ญ). ์ด๊ฒƒ์ด ์–ธ์ œ ๊ตฌํ˜„ ๋ ์ง€ ์˜ˆ์ƒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด์ „ ์‚ฌ์šฉ๋Ÿ‰์„ ์œ ์ง€ํ•˜๊ณ  ์ฝ˜์†”์— ๊ฒฝ๊ณ  ๋ฐ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ฉ”์‹œ์ง€๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

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

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ณต๊ธ‰์ž ์ƒˆ API :

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

<Star />
<SettingIcon />

ํŠธ๋ฆฌ ์‰์ดํ‚น๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

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

<Star />
<SettingIcon />

ํŠธ์œ— ๋‹ด์•„ ๊ฐ€๊ธฐ

V4 ๋กœ๋“œ๋งต ์— ๋”ฐ๋ฅด๋ฉด ์˜ฌํ•ด 4 ๋ถ„๊ธฐ์— ์ˆ˜์ • ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

์ฟจ : ์Šค๋งˆ์ผ :

Vร o Th 7, 1 thg 6, 2019 vร o lรบc 01:51 Zach Guo [email protected]
ฤ‘รฃ viแบฟt :

V4 ๋กœ๋“œ๋งต์— ๋”ฐ๋ฅด๋ฉด
https://github.com/ant-design/ant-design/issues/16911 , ์ด๊ฒƒ์€
์˜ฌํ•ด 4 ๋ถ„๊ธฐ๋กœ ๊ณ ์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

โ€”
๋Œ“๊ธ€์„ ๋‹ฌ์•˜ ๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜์‹  ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ณ  GitHub์—์„œ ํ™•์ธํ•˜์„ธ์š”.
https://github.com/ant-design/ant-design/issues/12011?email_source=notifications&email_token=ADKDE4RXC63VER4GSUMG5Q3PYFXT7A5CNFSM4FS3WEAKYY3PNVWWK3TUL52HS4DFVRWSG43VMVORBW63LNMWW2978978P847ZGissuement-4WXHJKT
๋˜๋Š” ์Šค๋ ˆ๋“œ ์Œ์†Œ๊ฑฐ
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
.

ICYMI, Icon ๋ฌธ์„œ ๋Š” ์ด๊ฒƒ์„ ์–ธ๊ธ‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์‚ฌ๋ณธ.

"โš ๏ธ 3.9.0์—์„œ ๊ฐ€์ ธ์˜จ ๋ชจ๋“  SVG ์•„์ด์ฝ˜์—์„œ ๊ฐ€์ ธ์˜จ ์ถ”๊ฐ€ ๋ฒˆ๋“ค ํฌ๊ธฐ์— ๋Œ€ํ•ด์„œ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•„์š”์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ์ƒˆ๋กœ์šด API๋ฅผ ์ œ๊ณต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ์ง„ํ–‰์„ ์œ„ํ•ด # 12011์„ ์ถ”์  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ ์ „์— ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ์›นํŒฉ ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ ์‚ฌ์šฉํ•˜์—ฌ ์•„์ด์ฝ˜ ํŒŒ์ผ์„ ์ฒญํฌ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. "

๋งˆ์ง€๋ง‰ ๋น„ํŠธ๋Š” ๋ฉ‹์ง€๊ณ , ์ฝ”๋“œ ๋ถ„ํ•  ๋ฐ ์•„์ด์ฝ˜์„ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œํ•˜๊ฑฐ๋‚˜, ์ œ ๊ฒฝ์šฐ์—๋Š” ์ฝ”๋“œ๊ฐ€ ๋ถ„ํ• ๋˜๊ณ  ์•„์ด์ฝ˜์„ ์ „ํ˜€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ณต๋ฌด์›์ด ํฌ๊ธฐ ํ–ˆ๋‚˜์š”? ์–ผ๋งˆ๋‚˜ ๋๊ณ  ์•„์ง ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•˜๋‚˜์š”?

๊ณต๋ฌด์›์ด ํฌ๊ธฐ ํ–ˆ๋‚˜์š”? ์–ผ๋งˆ๋‚˜ ๋๊ณ  ์•„์ง ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•˜๋‚˜์š”?

@ zhe-he

image

๋ช…ํ™•ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์—†์Šต๋‹ˆ๋‹ค!

์ด ๊ณต๋ฌด์›์ด ์ •๋ง์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ์•Š์„๊นŒ์š”?๋„ˆ๋ฌด ํฌ๊ณ  ๋ถˆํ•„์š”ํ•œ ํŒจํ‚ค์ง€, ์ •๋ง ๋‹น์‹ ์ด ๋– ๋‚˜๋„๋ก ์„ค๋“

ํ—‰
image

@tibotiber icon-loader ๋งํฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์•„์ด์ฝ˜ ์ฒญํฌ๋Š” ์—ฌ์ „ํžˆ index.html์— ์‚ฝ์ž…๋ฉ๋‹ˆ๊นŒ? index.html์—์„œ ์‚ฝ์ž…๋˜๋Š” ์ฒญํฌ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ œ์•ˆ

@ jasan-s ๋ฒˆ๋“ค์„ ๋นŒ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋Š” ์œ„์น˜์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ฝ”๋“œ ๋ถ„ํ•  ์„ ๊ตฌ์„ฑํ•˜๋Š” ์ตœ์‹  create-react-app์„ ์‚ฌ์šฉ import ์•„์ด์ฝ˜์ด ์—†๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค (์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ). .

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• @tobiaslins์—์„œ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค, ๊ทธ๊ฒƒ์€ ๋งํ•œ๋‹ค Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' ์บ” ๋ˆ„๊ตฌ ํฌ์ธํŠธ ๋‚˜ ๊ทธ๊ฒƒ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•? ๊ฐ์‚ฌ

@marcosfede ๋‚˜๋Š” customize-cra๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ๊บผ๋‚ด์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์—ฌ์ „ํžˆ์ด ์˜ค๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

ํŠธ์œ— ๋‹ด์•„ ๊ฐ€๊ธฐ ๋‚ด ์ž˜๋ชป์ด์•ผ. ์ด์ œ ์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค.

์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ’ก @ afc163

svg ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๊ณ  ์ด์ „ ์‚ฌ์šฉ๋ฒ•์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<Icon type='search' />

๊ทธ๋Ÿฐ ๋‹ค์Œ babel ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

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

// ๆˆ–่€…็›ดๆŽฅ่ฝฌๅŒ–ๆˆ
<Icon component={ require('@ant-design/icons/lib/dist/search.svg') } />

๊ทธ๋Ÿฐ ๋‹ค์Œ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ ๋œ ์•„์ด์ฝ˜ ๋งŒ ํŒจํ‚ค์ง• ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์ด๋‚˜๋ฏน ํƒ€์ž…์€ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉํ•˜์„ธ์š”. ๋™์  ์ˆ˜์š”๊ฐ€์žˆ๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

์‹ค์ œ๋กœ ์›๋ž˜ ์œ ํ˜•์˜ ์‹ค์ œ ๊ธฐ๋Šฅ์ด ์ œ๊ฑฐ๋˜๊ณ  ๋ชจ๋“  ์œ ํ˜• ์‚ฌ์šฉ์ด ๊ตฌ์„ฑ ์š”์†Œ ์‚ฌ์šฉ์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

์•„์ด๋””์–ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ’ก @ afc163

svg ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๊ณ  ์ด์ „ ์‚ฌ์šฉ๋ฒ•์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<Icon type='search' />

๊ทธ๋Ÿฐ ๋‹ค์Œ babel ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

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

// ๆˆ–่€…็›ดๆŽฅ่ฝฌๅŒ–ๆˆ
<Icon component={ require('@ant-design/icons/lib/dist/search.svg') } />

๊ทธ๋Ÿฐ ๋‹ค์Œ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ ๋œ ์•„์ด์ฝ˜ ๋งŒ ํŒจํ‚ค์ง• ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์ด๋‚˜๋ฏน ํƒ€์ž…์€ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉํ•˜์„ธ์š”. ๋™์  ์ˆ˜์š”๊ฐ€์žˆ๋Š” ๊ฒฝ์šฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

์‹ค์ œ๋กœ ์›๋ž˜ ์œ ํ˜•์˜ ์‹ค์ œ ๊ธฐ๋Šฅ์ด ์ œ๊ฑฐ๋˜๊ณ  ๋ชจ๋“  ์œ ํ˜• ์‚ฌ์šฉ์ด ๊ตฌ์„ฑ ์š”์†Œ ์‚ฌ์šฉ์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

์•„์ด๋””์–ด๋Š” 4.0 ๋ณ€ํ™˜๊ณผ ๋™์ผํ•˜์ง€๋งŒ ๋ฐ”๋ฒจ ์ด์Šค์ผ€์ดํ”„๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž‘์—… ๋ถ€ํ•˜๊ฐ€ ๋ถ„๋ช…ํžˆ ์ค„์–ด๋“ค๊ณ  ๋™์  ๋ณ€๊ฒฝ ๋งŒ ์ˆ˜๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ผ์‹œ์ ์œผ๋กœ ์ง€๋‚œ ๋ฐค์— ์ฝ”๋ฉ˜ํŠธ๋ฅผ ๊ฒŒ์‹œ ํ•œ ํ›„ ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ฐ”๋ฒจ์„ ์ผ๋‹ค. ๋‚ด๊ฐ€ ๋กœ์ปฌ์„ ์‹œ๋„ํ•˜๊ณ  ์™„์ „ํžˆ ๊ฐ€๋Šฅ @ afc163,

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

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

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

๋˜ํ•œ ํ•˜ํ–ฅ ๋ณ€ํ™˜ ๊ทœ์น™ ๋ฐ ๊ฑฐ์„ธ ์œ ํ˜•์˜ ์‹ค์ œ ๊ธฐ๋Šฅ์„ ๊ฐœ์„  ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง„ํ–‰ ์ƒํ™ฉ?

๊ณต์‹ ์•„์ด์ฝ˜ ์†Œ์Šค ์ฝ”๋“œ์—์„œ์ด ํŒจํ‚ค์ง€์— ๋Œ€ํ•œ ์†”๋ฃจ์…˜์„ ํ™•์ธํ•˜๊ณ  ์•„์ด์ฝ˜์„ ๋ณ„๋„๋กœ js๋กœ ํŒจํ‚ค์ง•ํ•˜์‹ญ์‹œ์˜ค.
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4 ์ž‘์—… ์ค‘ # 16911

์ด์ œ antd 4์˜ ์•ŒํŒŒ ๋ฒ„์ „์„ ์‚ฌ์šฉํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‚˜๋ฌด ํ”๋“ค๊ธฐ๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์•„์ด์ฝ˜์„ ๋‹น๊น๋‹ˆ๋‹ค.

์ด ๊ณต๋ฌด์›์ด ์ •๋ง์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ์•Š์„๊นŒ์š”?๋„ˆ๋ฌด ํฌ๊ณ  ๋ถˆํ•„์š”ํ•œ ํŒจํ‚ค์ง€, ์ •๋ง ๋‹น์‹ ์ด ๋– ๋‚˜๋„๋ก ์„ค๋“

์‚ฌ์‹ค, ์ด๊ฑด afc163์ด ํฌ๋ฆฌ์Šค๋งˆ์Šค ๋•Œํ–ˆ๋˜ ๊ฒƒ๊ณผ ๊ฐ™์€ ์–ด์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

@ lizy0329 4.0.0-alpha.2๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์—๋„ˆ์ง€์™€ ์‹œ๊ฐ„ ์กฐ์ •์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ๊ธ‰ํ•œ ๊ฒฝ์šฐ ํฌํฌ๊ฐ€ ์ง์ ‘ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค ...

@ lizy0329 https://github.com/ant-design/ant-design/pull/18217 ์ฐธ์กฐ

์ •๋ง ๋ฉ‹์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

แ„ แ„ แ„ แ„ แ„ แ„

์ •๋ง ๋ฉ‹์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ •๋ง ๋ฉ‹์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์ด ๋ฐ”๋€Œ๋ฉด ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์ƒ์ƒํ•ด์•ผํ•˜๋Š”๋ฐ, HO! HO!์™€ ๊ฐ™์€ ์Œ์ƒ‰์€ ๋น„๊ต ์—†์ด๋Š” ๋น„๊ตํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋ฟก ๋นต๋€จ

ๅ…ถๅฎž ่ฟ™ ไธœ่ฅฟ ่ทŸ afc163์— ์กด์žฌํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์˜ ่ฐƒ ๆ€ง ๏ผŒ ๆฝœ ๅฐ่ฏ ๆ˜ฏโ€œ่€ๅญ ๅ–œๆฌข ๏ผŒ ไฝ  ็ˆฑ ็”จ ไธ็”จโ€

๊ธ€๊ผด ๋Œ€์‹  SVG๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
์•„์ด์ฝ˜ ๊ธ€๊ผด ๋Œ€์‹  ์•„์ด์ฝ˜์— React SVG ๊ตฌ์„ฑ ์š”์†Œ ์‚ฌ์šฉ

ํšŒ์‚ฌ์—์„œ์ด ์ผ์„ ํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๊นŒ?
SVG๋กœ Octicons ์ œ๊ณต

์ง€๊ธˆ ๋ฌธ์ œ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
์ด์ „ ์•„์ด์ฝ˜์€ cdn์— ์˜ํ•ด๋กœ๋“œ ๋œ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•˜๋ฉฐ ํฌ๊ธฐ๋Š” ๊ณต๊ธ‰ ์—…์ฒด์— ๋ฐ˜์˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. svg ์•„์ด์ฝ˜์„ ํ˜ธ์ŠคํŒ…ํ•˜๊ธฐ์œ„ํ•œ ๊ธฐ๋ณธ cdn (๋ชจ๋“  ์•„์ด์ฝ˜์„ ์ฒญํฌ์— ๋„ฃ๊ณ  ์ž์ฒด cdn์„ ์‚ฌ์šฉํ•˜์—ฌ ํ˜ธ์ŠคํŒ… ํ•  ์ˆ˜ ์žˆ์Œ)์ด ์—†์Šต๋‹ˆ๋‹ค.์ด ๋ถ€๋ถ„์€ ๊ณต๊ธ‰ ์—…์ฒด์— ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค.
์ด๋ฒˆ ํ˜ธ์—์„œ ๋…ผ์˜๋˜๋Š” ๊ฒƒ์€ ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•, ์š”์ฒญ์‹œ ์•„์ด์ฝ˜์„๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

์šฉ๋‚ฉ ํ•  ์ˆ˜ ์—†๋‹ค๋ฉด ๋ชจ๋“  ์•„์ด์ฝ˜์„ ํ•œ ๋ฒˆ์—๋กœ๋“œํ•˜์„ธ์š”. ํ”ผํ•  ์ˆ˜์žˆ๋Š” ์ตœ์†Œ ์„ธ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฟก๋ฟก
3.9์˜ ๋ณ€๊ฒฝ ๋กœ๊ทธ๋Š” ๋งค์šฐ ๋น„์šฐํ˜ธ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. SVG๋กœ ๋ณ€๊ฒฝ๋œ ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ๊ธ€๊ผด์˜ ๋‹จ์ ๊ณผ ์žฅ์ ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

btw ๋‚˜๋Š” svg (์ด์™€ ๊ฐ™์ด viewBox ์ตœ๋Œ€ 1024 * 1024)๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋ฐ˜๋Œ€ํ•˜๋Š”๋ฐ, ์ด๋Š” ๋ณตํ•ฉ ๋ ˆ์ด์–ด ์ž‘์—…์—์„œ ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ฆฌ๋Š” ์ฆ๊ฐ€๋ฅผ ์œ ๋ฐœํ•ฉ๋‹ˆ๋‹ค.

@ afc163 ์ด๊ฒƒ์€ ๋„ˆ๋ฌด ์งง๊ณ  SVG๋กœ ๋ณ€๊ฒฝํ•ด์•ผํ•˜๋Š” ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๊ธฐ์— ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ด€๊ณ„์ž๋Š” svg๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ์™€ ํ•„์š”์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์„๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช… ํ• ๋งŒํผ ์ถฉ๋ถ„ํžˆ ๋ˆˆ์— ๋„๋Š” ์„ค๋ช…์„ํ•˜์ง€ ์•Š์•˜์œผ๋ฉฐ, ์ด๊ฒƒ์ด ์ด๋ฒˆ ํ˜ธ์—์„œ ๋งŽ์€ ๋ถ€์ •์ ์ธ ๊ฐ์ •์˜ ์›์ธ ์ค‘ ํ•˜๋‚˜๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

@muzea ์ œ์•ˆ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค
์˜ ์˜ํ–ฅ svg ์˜ ๋ฌ˜ํ™” ์„ฑ๋Šฅ์— svgๅ…ถๅญpath ๊ฒฝ๋กœ ๊ทธ๋ฆฌ๊ธฐ ๋จธ๋ฆฌ. ํ•ฉ์„ฑ ๋ ˆ์ด์–ด์˜ ์ž‘๋™์ด ์‹ค์ œ๋กœ ์ฆ๊ฐ€ํ•œ ์›์ธ์€ ํ›„์ž์ž…๋‹ˆ๋‹ค.
svg ์•„์ด์ฝ˜ ์ž์ฒด (๋„ˆ๋น„ ๋ฐ ๋†’์ด)๊ฐ€ ๋„ˆ๋ฌด ํฌ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค๋ฉด, ํฐ ์•„์ด์ฝ˜์€ ์‹ค์ œ๋กœ ๋“œ๋กœ์ž‰์˜ ๋ณต์žก์„ฑ์„ ์œ ๋ฐœํ•˜์ง€๋งŒ ์ƒ๊ด€ ๊ณ„์ˆ˜๋Š” ์ƒ๋Œ€์ ์œผ๋กœ ๋‚ฎ์Šต๋‹ˆ๋‹ค. ๋ณด์žฅ ํ•  ์ˆ˜์žˆ๋Š” ๊ฒƒ์€ ๋””์ž์ด๋„ˆ๋กœ๋ถ€ํ„ฐ ์–ป์€ ์•„์ด์ฝ˜์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ณผ์ •์—์„œ ์‚ฌ์šฉ์ž์˜์ธ์ง€ ๊ฒฝํ—˜์ด ์ตœ๋Œ€ํ•œ ํ–ฅ์ƒ๋˜๊ณ  (์•„์ด์ฝ˜์ด ํฌ๊ฒŒ ๋ณ€ํ˜•๋˜์ง€ ์•Š์Œ) ๊ฒฝ๋กœ ์••์ถ• ๋ฐ ๊ด€๋ จ ์ตœ์ ํ™”๊ฐ€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ˆ˜ํ–‰๋ฉ๋‹ˆ๋‹ค. ๊ฐ€์žฅ ํฐ ๋Œ€๋žต์ ์ธ ์ •๋ฐ€๋„. ์‹ค์ œ๋กœ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ปดํฌ์ง€์…˜ ๋ ˆ์ด์–ด์—์„œ ๋ Œ๋”๋ง๋˜๋„๋กํ•˜๋ ค๋ฉด svg sprite ์Šคํ‚ค๋งˆ๊ฐ€ ๊ณ ๋ ค๋˜์ง€๋งŒ ์ผ๋ฐ˜์ ์œผ๋กœ ํŽ˜์ด์ง€์— ๋ถ€์ž‘์šฉ์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค (ํ—ค๋” ๋˜๋Š” ๊ธฐํƒ€ ์œ„์น˜์— ๊ด€๋ จ ์ •์˜ ์ถ”๊ฐ€). ์ด๋Š” ์œ ์ง€ ๋ณด์ˆ˜์„ฑ ์ธก๋ฉด์—์„œ ๋งค์šฐ ์ค‘์š”ํ•˜๋ฉฐ ๋‹ค ์šฉ์„ฑ ์š”๊ตฌ ์‚ฌํ•ญ์ด ๋†’์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๊ฒฝ์šฐ ๊ณ ๋ ค๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ๋žŒ๋“ค์€ ์–ด๋–ค ์ƒํ™ฉ์—์„œ ์ธ์ •๋ฐ›์„๋งŒํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•„์ด์ฝ˜ ์†”๋ฃจ์…˜์œผ๋กœ svg ๋ฅผ ์‹ซ์–ดํ•ฉ๋‹ˆ๊นŒ?

  • IE8 ์‚ฌ์šฉ์ž
  • ์‚ฌ์šฉ์ž์˜ ๋„คํŠธ์›Œํฌ ์ƒํƒœ๊ฐ€ ์–‘ํ˜ธ ํ•จ
  • ์•„์ด์ฝ˜์ด ํ‘œ์‹œ๋˜๋Š” ํ•œ (๋ช…ํ™•๋„๋Š” ์‹ ๊ฒฝ ์“ฐ์ง€ ๋งˆ์„ธ์š”)
  • ๋‹จ์ƒ‰ ์•„์ด์ฝ˜์€ ํ˜„์žฌ์™€ ๋ฏธ๋ž˜์— ํ•ญ์ƒ ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ๊ณต์‹์ ์ธ ํ›„์† ์กฐ์น˜์˜ ๋ถ€์กฑ์€ ์‹ค์ œ๋กœ ํ• ๋‹น ์ž์— ํ•ด๋‹นํ•˜๋Š” ์‚ฌ๋žŒ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ–ˆ์ง€๋งŒ ๋” ์ด์ƒ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@ lizy0329 ์–ด๋–ค ์‚ฌ๋žŒ์ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ์ด๋Ÿฌํ•œ ํ–‰๋™์— ๋Œ€ํ•ด ๊ธฐ๊บผ์ด ์ถ”์ธกํ•˜๋Š” ๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ์•…์˜์ ์ด๋ฉฐ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์€ ๊ฐ„์„ญ ํ•  ๊ถŒ๋ฆฌ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜์ด ์‚ฌ๋žŒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹ํ™๋ณด๋ฅผ ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”.
๋ฌธ์„œ์˜ ์•„์ด์ฝ˜ ๋ถ€๋ถ„์€ ๋‚ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์„ฑ๋Šฅ์ด ๋งค์šฐ ๋‚ฎ์Šต๋‹ˆ๋‹ค.
image
์‹ค์ œ๋กœ osx์˜ ํฌ๋กฌ์€ ํŽ˜์ด์ง€์— antd ์•„์ด์ฝ˜์ด ๋งŽ์„ ๋•Œ ์„ฑ๋Šฅ์ด ๋งค์šฐ ๋‚˜๋น ์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

babel-plugin-macros ์ด (๊ฐ€)์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

@ lizy0329 ์–ด๋–ค ์‚ฌ๋žŒ์ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ์ด๋Ÿฌํ•œ ํ–‰๋™์— ๋Œ€ํ•ด ๊ธฐ๊บผ์ด ์ถ”์ธกํ•˜๋Š” ๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ์•…์˜์ ์ด๋ฉฐ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์€ ๊ฐ„์„ญ ํ•  ๊ถŒ๋ฆฌ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜์ด ์‚ฌ๋žŒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹ํ™๋ณด๋ฅผ ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์•…์˜์  ์ธ ์ถ”์ธก์ด ์•„๋‹ˆ๋ผ "๊ณตํ†ต์„ฑ ์ถ”๊ตฌ"๋ผ๊ณ ํ•ฉ๋‹ˆ๋‹ค. HO! HO! ์‚ฌ๊ณ ๋Š” ์šฐ์—ฐํžˆ ๋ฐœ์ƒํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์žฅ๊ธฐ๊ฐ„ ์ถ•์  ๋œ ๊ฒƒ์ž„์— ํ‹€๋ฆผ ์—†๋‹ค. ๋‚˜๋Š” ๋‚˜๋ฅผ ๋น„๋ฐฉํ•˜์ง€ ์•Š๊ณ  antd๊ฐ€ ๋” ์ž˜ ๋ฐœ์ „ํ•˜๊ธฐ๋ฅผ ์›ํ•˜๋ฉฐ ๊ฐ ์—…๋ฐ์ดํŠธ์˜ ๊ฒฐ๊ณผ์™€ ํ•ด๊ฒฐ์ฑ…์— ๋Œ€ํ•ด ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์–ธ์ œ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ antd๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์•„๋ฌด๊ฒƒ๋„ํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— Button์„ ๊ฐ€์ ธ ์™”๊ณ  ํŒจํ‚ค์ง€ ๋ฒˆ๋“ค์ด 177k์—์„œ 1.1m๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ถ„์„๊ธฐ๊ฐ€ ๊ทธ๊ฒƒ์„ ๋ณด์•˜๊ณ  ์•„์ด์ฝ˜๋„์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฒˆ๋“ค์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๋•Œ ๋ฒˆ๋“ค์—์„œ ์•„์ด์ฝ˜์„ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

create-react-app๊ณผ ํ•จ๊ป˜ ์žฌ์ •์˜๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ :

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

[email protected] ๋Œ€ํ•œ @ qaiser110 ์˜ ์†”๋ฃจ์…˜ ์„ ํ™•์ธํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

antd ์†Œ์Šค๊ฐ€ ๋ชจ๋“  ์•„์ด์ฝ˜ ์˜ @ant-design/icons/lib/dist ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ @ant-design/icons ์—์„œ ์„ ํƒํ•œ ์•„์ด์ฝ˜์ด์žˆ๋Š” ์‚ฌ์šฉ์ž ์ง€์ • ํŒŒ์ผ๋กœ ๋ฆฌ๋””๋ ‰์…˜ํ•˜๊ธฐ ์œ„ํ•ด webpack resolve.alias ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

ํฐ ๋ฒˆ๋“ค์„ ๊ฐ–๋Š” ๊ฒƒ๋ณด๋‹ค ๋‚ซ์ง€ ๋งŒ ์•„์ด์ฝ˜์„ ์ˆ˜๋™์œผ๋กœ ์„ ํƒํ•ด์•ผํ•˜๋ฏ€๋กœ ์—ฌ์ „ํžˆ ์ด์ƒ์ ์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ํ•„์š”์— ๋”ฐ๋ผ ์ฒด๋ฆฌ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค (์•„์ด์ฝ˜์ด์—†๋Š” ๊ฒฝ์šฐ). ์„ ํƒํ•ด์•ผ ํ•  ํ•ญ๋ชฉ์„ ํŒŒ์•…ํ•˜๋ ค๋ฉด antd ๋ฐ ์‚ฌ์šฉ ๋œ ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๊ฒ€์ƒ‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

antd ์†Œ์Šค์—์„œ ์„ ํƒํ•œ ์•„์ด์ฝ˜ ํŒจํ‚ค์ง€ ๋‚˜ ๊ณต์œ  ํŒŒ์ผ์ด ์žˆ๋‹ค๋ฉด ์œ ์šฉ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์‹์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์šฐ๋ฆฌ ์ž์‹ ์˜ ์†Œ์Šค๋ฅผ ์œ„ํ•ด ์ฒด๋ฆฌ ๋”ฐ๊ธฐ์— ๋Œ€ํ•ด์„œ๋งŒ ๊ฑฑ์ •ํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— ์•„์ด๋””์–ด ์š”์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. antd ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋‚ด๋ณด๋‚ด๋Š” ์•„์ด์ฝ˜์„ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ์ˆ˜๋™์œผ๋กœ antd ์†Œ์Šค๋ฅผ ํ™•์ธํ•˜๋Š” ๋Œ€์‹  ์‚ฌ์šฉ์ž ์ •์˜ ์•„์ด์ฝ˜ ํŒŒ์ผ์—์„œ export * from 'antd-cherry-pick-icons/icon' ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๊ฐ€๋Šฅํ•œ ํ•œ antd ์†Œ์Šค๋กœ ์ตœ์‹  ์ƒํƒœ๋กœ ์œ ์ง€ํ•˜๋ ค๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ๋…ธ๋ ฅ์œผ๋กœ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@LucasBassetti , ์•„์ด์ฝ˜์ด ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ? <Icon /> ์ง์ ‘ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋”๋ผ๋„ ์ผ๋ถ€ antd ๊ตฌ์„ฑ ์š”์†Œ๋Š”` . ์˜ˆ : <Alert /> .

antd 4.0 (์•ŒํŒŒ) ์€ ์™€์ผ๋“œ ์นด๋“œ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ ์œผ๋กœ์จ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์‹  ๊ทธ๋“ค์€ ๊ฐ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์ˆ˜์ž…ํ’ˆ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค .

์ˆ˜์ • ๋  ๋•Œ๊นŒ์ง€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ•œ ์ž„์‹œ ์†”๋ฃจ์…˜ (antd> = 3.9)

  1. ์•„์ด์ฝ˜์„ ๋‹ค๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์›นํŒฉ์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค. ์›นํŒฉ ๊ตฌ์„ฑ์—์„œ :
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. ๋งŒ๋“ค๊ธฐ icons.js ํด๋”์— src/ ์–ด๋””๋“ ์ง€ ์›ํ•˜๋Š”. ๋ณ„์นญ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค!
    ์ด ํŒŒ์ผ์—์„œ antd๊ฐ€ ํฌํ•จํ•ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค! antd์˜ Select ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์•„๋ž˜๋กœ ์•„์ด์ฝ˜ ๋งŒ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

config-overwrites.js ๋‚ด์—์„œ react-app-rewire (create-react-app ์ˆ˜์ •)์œผ๋กœ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

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

@adinnc ์•„์ด์ฝ˜ ๊ฒฝ๋กœ๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด ๋” ์ด์ƒ @ant-design/icons/lib/outline/DownOutline ์•„๋‹˜

๋งˆํฌ๋Š”์ด ๋ฌธ์ œ์— ์„ธ์‹ฌํ•œ์ฃผ์˜๋ฅผ ๊ธฐ์šธ์ด๊ณ  ์žˆ์œผ๋ฉฐ ํ˜„์žฌ๋Š” antd 3๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๋ฒ„ํŠผ์ด ์†Œ๊ฐœ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆœ๊ฐ„๊ณผ ์•„์ด์ฝ˜์„ ์—ฐ๊ฒฐํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค. ์•„์ด์ฝ˜ ํŒŒ์ผ ๋งŒ 500k ์ด์ƒ์ž…๋‹ˆ๋‹ค.

@DemonCloud ์ˆœ๊ฐ„์˜ ๋ฌธ์ œ๋Š” https://github.com/ant-design/babel-plugin-import/issues/352์—์„œ ์ฃผ๋ชฉํ•  ์ˆ˜

react-app-rewired ๋ฅผ ํ†ตํ•ด create-react-app ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„

config-overrides.js

Const  path  =  require ( ' path ' );

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

  Config . resolve . alias  = alias;

  Return config;
}

icons.js ์š”์ 

์ด์œ ๋Š” ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ icons.js๋ฅผ ์‚ฌ์šฉํ•œ ํ›„ ๋ฒˆ๋“ค์ด 600KB ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ์ฝ”๋“œ์—์„œ์ด ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. https://www.npmjs.com/package/html-webpack-inline-source-plugin

config-override.js ๊ณผ ๊ฐ™์ด ํŽธ์ง‘ํ•˜์—ฌ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ 500KB ์ค„์˜€์Šต๋‹ˆ๋‹ค.

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

์ „์—

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

ํ›„

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

config-override.js ๊ณผ ๊ฐ™์ด ํŽธ์ง‘ํ•˜์—ฌ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ 500KB ์ค„์˜€์Šต๋‹ˆ๋‹ค.

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

์ „์—

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

ํ›„

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

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๊ทธ๊ฒƒ์€ ๋‚˜๋ฅผ ๋„์™”๋‹ค!

@adinnc ์•„์ด์ฝ˜ ๊ฒฝ๋กœ๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด ๋” ์ด์ƒ @ant-design/icons/lib/outline/DownOutline ์•„๋‹˜

์ด๋ด, ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋„ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค

์—ฌ๊ธฐ์— ํ‘œ์‹œ๋œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ๋งŒ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์•„์ด์ฝ˜ ๋งŒ ๊ฐ€์ ธ ์˜ค๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฝ๊ณ  ๊น”๋”ํ•˜์ง€ ์•Š์„๊นŒ์š”? ์ด๊ฒƒ์€ ๊ทผ๋ณธ ์›์ธ์„ ํ•ด๊ฒฐํ•  ๊ฒƒ์ด๊ณ  ์šฐ๋ฆฌ๊ฐ€ ๋Œ€์‹  ๋ช…๋ช… ๋œ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ์ด๊ฒƒ์ด ๋„ˆ๋ฌด ์–ด๋ ต์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๊ณ  ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

@Nomeasmo , ๋กœ๋“œ๋งต ์— ๋”ฐ๋ผ v4์—์„œ ์ˆ˜์ •๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

3.X์— ์ˆ˜์ • ์‚ฌํ•ญ์ด ์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•˜๋ฉด 4๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•  ๊ณ„ํš์ด ์—†์Šต๋‹ˆ๋‹ค.

๋ฒ„ํŠผ๊ณผ ๊ฐ™์€ ๋‹จ์ˆœํ•œ ๊ฒƒ์— ๋Œ€ํ•œ CSS๊ฐ€ ๋„ˆ๋ฌด ๋ณต์žกํ•˜๊ณ , ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์ ‘๊ทผ์„ฑ ๊ธฐ๋Šฅ์ด ๋ถ€์กฑํ•˜๊ณ , ํŒจ์น˜ ์—…๋ฐ์ดํŠธ์กฐ์ฐจ๋„ 1,000 ๊ฐœ์— ๊ฐ€๊นŒ์šด ์ปค๋ฐ‹์œผ๋กœ ์ฑ„์›Œ์ง€๊ธฐ ๋•Œ๋ฌธ์— ์–ธ์  ๊ฐ€ Ant์—์„œ ์™„์ „ํžˆ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๊ธฐ๋ฅผ ํฌ๋งํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋‚ด ์ทจํ–ฅ์— ๋น„ํ•ด ๋„ˆ๋ฌด ๋งŽ์€ ์ดํƒˆ์ž…๋‹ˆ๋‹ค.

ํ‘œ

react-app-rewired ๋ฅผ ํ†ตํ•ด create-react-app ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„

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 ์š”์ 

์ž‘๋™ํ•˜์ง€ ์•Š์Œ ์—ฌ์ „ํžˆ ์•„์ด์ฝ˜์˜ ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋†’์Šต๋‹ˆ๋‹ค.
image

v4.0.0-beta.0์—์„œ ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ํŠธ๋ฆฌ ํ”๋“ค๋ฆผ์ด ์ƒ์ž์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
์•„์ด์ฝ˜ ๋ฒˆ๋“ค์„ ์„ฑ๊ณต์ ์œผ๋กœ ์ถ•์†Œ ํ•œ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ตฌ์„ฑ์„ ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚˜์ค‘์— v4.0.0-beta.1์„ ์‹œ๋„ํ•˜๊ณ  @ant-design/compatible ํŒจํ‚ค์ง€๋ฅผ ์ œ๊ฑฐํ–ˆ์ง€๋งŒ ๋ชจ๋“  ์•„์ด์ฝ˜์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋ฒˆ๋“ค์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

react-app-rewired ๋ฅผ ํ†ตํ•ด create-react-app ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„
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 ์š”์ 

์ž‘๋™ํ•˜์ง€ ์•Š์Œ ์—ฌ์ „ํžˆ ์•„์ด์ฝ˜์˜ ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋†’์Šต๋‹ˆ๋‹ค.
image

https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531์ฒ˜๋Ÿผ ๊ฐ€์ ธ์™€์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ํฌํ•จํ•˜๋ ค๋ฉด icons.js ํŒŒ์ผ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜์ • ๋  ๋•Œ๊นŒ์ง€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ•œ ์ž„์‹œ ์†”๋ฃจ์…˜ (antd> = 3.9)

  1. ์•„์ด์ฝ˜์„ ๋‹ค๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์›นํŒฉ์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค. ์›นํŒฉ ๊ตฌ์„ฑ์—์„œ :
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. ๋งŒ๋“ค๊ธฐ icons.js ํด๋”์— src/ ์–ด๋””๋“ ์ง€ ์›ํ•˜๋Š”. ๋ณ„์นญ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค!
    ์ด ํŒŒ์ผ์—์„œ antd๊ฐ€ ํฌํ•จํ•ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค! antd์˜ Select ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์•„๋ž˜๋กœ ์•„์ด์ฝ˜ ๋งŒ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

config-overwrites.js ๋‚ด์—์„œ react-app-rewire (create-react-app ์ˆ˜์ •)์œผ๋กœ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‚ด ๋ฒˆ๋“ค์„ 700kb์—์„œ 200kb๋กœ ์ค„์˜€์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

v4.0.0-beta.0์—์„œ ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ํŠธ๋ฆฌ ํ”๋“ค๋ฆผ์ด ์ƒ์ž์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
์•„์ด์ฝ˜ ๋ฒˆ๋“ค์„ ์„ฑ๊ณต์ ์œผ๋กœ ์ถ•์†Œ ํ•œ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ตฌ์„ฑ์„ ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚˜์ค‘์— v4.0.0-beta.1์„ ์‹œ๋„ํ•˜๊ณ  @ant-design/compatible ํŒจํ‚ค์ง€๋ฅผ ์ œ๊ฑฐํ–ˆ์ง€๋งŒ ๋ชจ๋“  ์•„์ด์ฝ˜์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋ฒˆ๋“ค์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ ๋œ ์•„์ด์ฝ˜ ๊ฐ€์ ธ ์˜ค๊ธฐ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  4.0.0-rc.0์—์„œ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ ํ•จ

@jhockett ๋‚˜๋„ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค! ์ผ๋ถ€ ์ˆ˜์ž…ํ’ˆ์ด ํŠธ๋ฆฌ ์‰์ดํ‚น ํ”„๋กœ์„ธ์Šค๋ฅผ ๊นจ๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ : _import Text from 'antd / lib / typography / Text'; _
๋‚˜๋Š” ๊ทธ๊ฒƒ์„ 'antd'; _์—์„œ _import {Typography}๋กœ ๋ฐ”๊พธ์—ˆ๊ณ  ์•„์ด์ฝ˜์€ ๋‚ด ๋ฒˆ๋“ค์„ ๋– ๋‚ฌ์Šต๋‹ˆ๋‹ค!

@jhockett ๋‚˜๋„ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค! ์ผ๋ถ€ ์ˆ˜์ž…ํ’ˆ์ด ํŠธ๋ฆฌ ์‰์ดํ‚น ํ”„๋กœ์„ธ์Šค๋ฅผ ๊นจ๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ : _import Text from 'antd / lib / typography / Text'; _
๋‚˜๋Š” ๊ทธ๊ฒƒ์„ 'antd'; _์—์„œ _import {Typography}๋กœ ๋ฐ”๊พธ์—ˆ๊ณ  ์•„์ด์ฝ˜์€ ๋‚ด ๋ฒˆ๋“ค์„ ๋– ๋‚ฌ์Šต๋‹ˆ๋‹ค!

๋‚ด ๋ชจ๋“  ant ๋””์ž์ธ ๊ฐ€์ ธ ์˜ค๊ธฐ๋Š” ์–ธ๊ธ‰ ํ•œ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. _import {Typography} from 'antd'; _
๊ทธ๋ž˜์„œ ์ด๊ฒƒ์€ ๋‚ด ๋ฌธ์ œ๊ฐ€ ์•„๋‹Œ ๊ฒƒ ๊ฐ™์ง€๋งŒ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์˜ํ–ฅ์„๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

์ˆ˜์ • ๋  ๋•Œ๊นŒ์ง€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ•œ ์ž„์‹œ ์†”๋ฃจ์…˜ (antd> = 3.9)

  1. ์•„์ด์ฝ˜์„ ๋‹ค๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ์›นํŒฉ์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค. ์›นํŒฉ ๊ตฌ์„ฑ์—์„œ :
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. ๋งŒ๋“ค๊ธฐ icons.js ํด๋”์— src/ ์–ด๋””๋“ ์ง€ ์›ํ•˜๋Š”. ๋ณ„์นญ ๊ฒฝ๋กœ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค!
    ์ด ํŒŒ์ผ์—์„œ antd๊ฐ€ ํฌํ•จํ•ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค! antd์˜ Select ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์•„๋ž˜๋กœ ์•„์ด์ฝ˜ ๋งŒ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

config-overwrites.js ๋‚ด์—์„œ react-app-rewire (create-react-app ์ˆ˜์ •)์œผ๋กœ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‚ด ๋ฒˆ๋“ค์„ 700kb์—์„œ 200kb๋กœ ์ค„์˜€์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์„ ์‚ฌ์šฉํ•  ๋•Œ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์— ๋ฌด์—‡์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
image

Parcel.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ๋‹ค์Œ ์ž‘์—…์ด ํšจ๊ณผ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

npm install purched-antd-icons

๊ทธ๋ฆฌ๊ณ  package.json :

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

v4.0.0-beta.0์—์„œ ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ํŠธ๋ฆฌ ํ”๋“ค๋ฆผ์ด ์ƒ์ž์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
์•„์ด์ฝ˜ ๋ฒˆ๋“ค์„ ์„ฑ๊ณต์ ์œผ๋กœ ์ถ•์†Œ ํ•œ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ตฌ์„ฑ์„ ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚˜์ค‘์— v4.0.0-beta.1์„ ์‹œ๋„ํ•˜๊ณ  @ant-design/compatible ํŒจํ‚ค์ง€๋ฅผ ์ œ๊ฑฐํ–ˆ์ง€๋งŒ ๋ชจ๋“  ์•„์ด์ฝ˜์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋ฒˆ๋“ค์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

babel-plugin-import ์ด์™€ ๊ฐ™์ด ๋ณ€๊ฒฝํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐ

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

https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531์—์„œ ์˜๊ฐ์„ ์–ป์Œ [email protected] (https://github.com/ant-design/ant -design / issues / 20661).

๋‹ค์Œ resolve.alias ์„ webpack ๊ตฌ์„ฑ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค ( customize-cra ์™€๋„ ์ž‘๋™ํ•ด์•ผ ํ•จ).

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

icons.tsx ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผํ•ฉ๋‹ˆ๋‹ค.

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

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

์˜ˆ๋ฅผ ๋“ค์–ด Button ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” ์œ„์˜ LoadingOutlined ์•„์ด์ฝ˜์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ํŒŒ์ผ์— ํ•„์š”ํ•œ ๋ชจ๋“  ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค. ๋˜ํ•œ ํ•ด๋‹น ํŒŒ์ผ์„ ์žฌ์‚ฌ์šฉ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ @ant-design/icons ์—์„œ ์ง์ ‘ ๊ฐ€์ ธ ์˜ค๊ธฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์€ ๊ท€ํ•˜์—๊ฒŒ ๋‹ฌ๋ ค ์žˆ์Šต๋‹ˆ๋‹ค.

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

@matzeeable ์ œ์•ˆ ์†”๋ฃจ์…˜์ด ์ €์—๊ฒŒ ํšจ๊ณผ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค. icons.tsx ์–ด๋–ค ์•„์ด์ฝ˜์„ ํฌํ•จํ•ด์•ผํ•˜๋Š”์ง€ ์•Œ ์ˆ˜์žˆ๋Š” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ : InputNumber ๋ฐ Select ๋“œ๋กญ ๋‹ค์šด๊ณผ ๊ฐ™์€ ์–‘์‹ ์š”์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํžŒํŠธ๊ฐ€ ์žˆ์œผ์‹ญ๋‹ˆ๊นŒ?

icons.tsx ์–ด๋–ค ์•„์ด์ฝ˜์„ ํฌํ•จํ•ด์•ผํ•˜๋Š”์ง€ ์•Œ ์ˆ˜์žˆ๋Š” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด ๋ฌด์—‡์ธ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ : InputNumber ๋ฐ Select ๋“œ๋กญ ๋‹ค์šด๊ณผ ๊ฐ™์€ ์–‘์‹ ์š”์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํžŒํŠธ๊ฐ€ ์žˆ์œผ์‹ญ๋‹ˆ๊นŒ?

@ pradeepb6 antd ์—์„œ ์†Œ์Šค์— ์ƒˆ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํฌํ•จํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. Webpack์€ ์•„์ด์ฝ˜ ํ•ด๊ฒฐ์„ ์‹œ๋„ํ•˜์ง€๋งŒ icons.tsx ์ •์˜ํ•œ ์ ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ช…๋ช… ๋œ ๋‚ด๋ณด๋‚ด๊ธฐ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

image

๋‚˜์ค‘์— ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•˜๋„๋ก icons.tsx ์—์„œ ๋‚ด ๋ณด๋‚ด์•ผํ•˜๋Š” ์•„์ด์ฝ˜์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ™‚

@matzeeable ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ์‹œ๋„ํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์Šคํฌ๋ฆฐ ์ƒท๊ณผ ๊ฐ™์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ ์—์„œ ์ฐพ์„ ์ˆ˜

image

๋‚˜๋Š” ์ด๋ฏธ babel-plugin-import github์— ๊ธ€์„ ์ผ์ง€ ๋งŒ, ์—ฌ๊ธฐ์—์žˆ๋Š” ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋” ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์—ฌ๊ธฐ์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ ๋ฌธ์ œ๊ฐ€์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. V4๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ–ˆ๊ณ  ํฐ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ๊ด€์ฐฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378์— ์“ด๋Œ€๋กœ "libraryDirectory": "es" ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋‹ค์Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

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

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

next.js btw๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ถœ๋ฐœ :

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

๋ˆ„๊ตฐ๊ฐ€?

@ afc163 ์€ ํ–ˆ์Šต๋‹ˆ๋‹ค . IssueHunt์—์„œ๋ณด๊ธฐ

  • : ๋จธ๋‹ˆ ๋ฐฑ : ์ด ์˜ˆ์น˜๊ธˆ : $ 203.00
  • : ํƒ€๋‹ค : ๋ฆฌํฌ์ง€ํ† ๋ฆฌ ๋ณด์ƒ (20 %) : $ 40.60
  • : ๋ Œ์น˜ : ๋ด‰์‚ฌ๋ฃŒ (10 %) : $ 20.30

๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  @chemicalkosek, [email protected] + next.js ํ˜„์žฌ esm์— ์˜ํ•ด ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ๋„์›€์ด๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค. :)

@ i-tengfei ์™€์šฐ, ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค! ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

antd @ 4์˜ ๊ฒฝ์šฐ ์ด์ œ @ ant-design / icons ํŒจํ‚ค์ง€๋ฅผ ๋ฎ์–ด ์“ฐ๊ณ  antd ์•„์ด์ฝ˜์„ fontawesome ์•„์ด์ฝ˜์œผ๋กœ ๋Œ€์ฒดํ•˜๋Š” ์ž์ฒด ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

antd์— ํ•„์š”ํ•œ ์•„์ด์ฝ˜ ๋งŒ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํŠธ๋ฆฌ ์‰์ดํ‚น์„ ํ™œ์„ฑํ™”ํ•˜์ง€ ๋ชปํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ์ค„์˜€์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ „์ฒด an-design / icons ํŒจํ‚ค์ง€๊ฐ€ ํฌํ•จ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

[email protected]๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜์‹ญ์‹œ์˜ค.์ด ๋ฌธ์ œ๋Š” ์™„๋ฒฝํ•˜๊ฒŒ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

Parcel.js๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” ๋‹ค์Œ ์ž‘์—…์ด ํšจ๊ณผ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

npm install purched-antd-icons

๊ทธ๋ฆฌ๊ณ  package.json :

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

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค, ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค!

@ afc163 @yesmeck ๋Š” ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ฐ˜ํ™˜ ๋œ ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” ์–ด๋–ป๊ฒŒ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œ AppstoreOutlined ).

const iconStr = res.icon // ๆœๅŠกๅ™จ่ฟ”ๅ›ž็š„ๆ•ฐๆฎๅ‡ๅฆ‚
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

๊ทธ๋Ÿฌ๋‚˜ ์ง€๊ธˆ์€ ์ง์ ‘ ์ปดํŒŒ์ผํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.๋™์  ๋กœ๋”ฉ์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ฟก๋ฟก

[email protected]๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜์‹ญ์‹œ์˜ค.์ด ๋ฌธ์ œ๋Š” ์™„๋ฒฝํ•˜๊ฒŒ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

20661

๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ํ•ด๊ฒฐ๋˜์—ˆ๋Š”์ง€ ์ „ํ˜€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŒจํ‚ค์ง€์—๋Š” ์—ฌ์ „ํžˆ ๋ชจ๋“  ์•„์ด์ฝ˜ ๋ฒˆ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ๋ฐฉ๋ฒ•์œผ๋กœ ๋ชจ๋“  ์•„์ด์ฝ˜์„ ๊ฐ€์ ธ ์™”์Šต๋‹ˆ๋‹ค.
"@ ant-design / icons": "^ 4.0.6" ๋ฐ ์›นํŒฉ 4.43.0 ์‚ฌ์šฉ
์ด ๊ตฌ์„ฑ๋„ ๊ฐ€์ง€๊ณ 

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

image

@ afc163 @yesmeck ๋Š” ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ฐ˜ํ™˜ ๋œ ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” ์–ด๋–ป๊ฒŒ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œ AppstoreOutlined ).

const iconStr = res.icon // ๆœๅŠกๅ™จ่ฟ”ๅ›ž็š„ๆ•ฐๆฎๅ‡ๅฆ‚
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

๊ทธ๋Ÿฌ๋‚˜ ์ง€๊ธˆ์€ ์ง์ ‘ ์ปดํŒŒ์ผํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.๋™์  ๋กœ๋”ฉ์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ทธ๊ฒƒ์ด๋˜์–ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค {Icon}์œผ๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ๊ฒŒ์‹œํ•˜๋ฉด ์›์ธ์„ ๋” ์ž˜ ํŒ๋‹จ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

babel-plugin-import ํ•˜์—ฌ ํฌ๊ธฐ๋ฅผ 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'

๋ฟก๋ฟก

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

  ],

@ mit123suki @nwoeddie ์ œ์•ˆ

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 ๋Š” ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ๋ฐ˜ํ™˜ ๋œ ๋ฐ์ดํ„ฐ์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” ์–ด๋–ป๊ฒŒ ๋น„๋™๊ธฐ ์ ์œผ๋กœ๋กœ๋“œ AppstoreOutlined ).

const iconStr = res.icon // ๆœๅŠกๅ™จ่ฟ”ๅ›ž็š„ๆ•ฐๆฎๅ‡ๅฆ‚
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

๊ทธ๋Ÿฌ๋‚˜ ์ง€๊ธˆ์€ ์ง์ ‘ ์ปดํŒŒ์ผํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.๋™์  ๋กœ๋”ฉ์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

{Icon}์œผ๋กœ ๋ณ€๊ฒฝํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ๊ฒŒ์‹œํ•˜๋ฉด ์›์ธ์„ ๋” ์ž˜ ํŒ๋‹จ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Failed to compile.

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

@Xezzon ์€ ์ฒซ ๋ฒˆ์งธ ์•„์ด์ฝ˜ ๋ชจ๋“ˆ์„ ์ฐพ์„ ์ˆ˜

๋ฟก๋ฟก

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

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

์•ˆ๋…•ํ•˜์„ธ์š”, nwoeddie ~ !, ๋‚ด ๊ตฌ์„ฑ์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹จ์ผ ๊ฐ€์ ธ ์˜ค๊ธฐ ์˜ต์…˜์„ ๋ถ„ํ• ํ–ˆ์ง€๋งŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์™„์ „ํ•œ ๊ตฌ์„ฑ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด aritcle์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค : https://www.cnblogs.com/fulu/p/13255538.html

๋ฟก๋ฟก

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

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

์•ˆ๋…•ํ•˜์„ธ์š”, nwoeddie ~ !, ๋‚ด ๊ตฌ์„ฑ์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‹จ์ผ ๊ฐ€์ ธ ์˜ค๊ธฐ ์˜ต์…˜์„ ๋ถ„ํ• ํ–ˆ์ง€๋งŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์™„์ „ํ•œ ๊ตฌ์„ฑ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด๊ฒƒ์€ babel 7์˜ ์˜ฌ๋ฐ”๋ฅธ ๊ตฌ๋ฌธ์ด ์•„๋‹™๋‹ˆ๋‹ค. ๊ฐ€์ ธ ์˜ค๊ธฐ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋ฐฐ์—ด์„ ์ง€์›ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์˜ณ์€ ๊ธธ:

    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "ant"],
    ["import", {
      "libraryName": "@ant-design/icons",
      "libraryDirectory": "es/icons",
      "camel2DashComponentName": false
    }, "ant-design-icons"],
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰