Vue: 개발 λͺ¨λ“œμ—μ„œ v-for일 λ•Œ κ°€λŠ₯ν•œ λ©”λͺ¨λ¦¬ λˆ„μˆ˜

에 λ§Œλ“  2018λ…„ 07μ›” 17일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vuejs/vue

버전

2.5.16

μž¬μƒμ‚° 링크

https://codepen.io/anon/pen/KBMaOY

μž¬ν˜„ 단계

  • μ½”λ“œνŽœ μ—΄κΈ° https://codepen.io/anon/pen/gjMgzG
  • 두 번 ν΄λ¦­ν•˜μ—¬ 0개 ν•­λͺ©μ„ λ‚˜μ—΄ν•œ λ‹€μŒ 1000개λ₯Ό λ‚˜μ—΄ν•©λ‹ˆλ‹€.
  • λ©”λͺ¨λ¦¬ 증가λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€
  • μΈ‘μ •ν•˜κΈ° 전에 κ°•μ œ GC(νœ΄μ§€ν†΅ μ•„μ΄μ½˜)λ₯Ό μ‹œλ„ν•˜μ‹­μ‹œμ˜€.
  • Chrome "λ©”λͺ¨λ¦¬" νƒ­μ—μ„œ νž™ μŠ€λƒ…μƒ· 찍기
  • Chome μž‘μ—… κ΄€λ¦¬μžμ—μ„œ λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰ 보기(shift esc)
  • OS μž‘μ—… κ΄€λ¦¬μžμ—μ„œ λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰ 보기

무엇을 κΈ°λŒ€ν•©λ‹ˆκΉŒ?

가비지 μˆ˜μ§‘κΈ° 이후 λ™μΌν•œ λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰

μ‹€μ œλ‘œ 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

"μ„±λŠ₯" 탭은 λ™μΌν•œ λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰μ„ ν‘œμ‹œν•˜μ§€λ§Œ "λ©”λͺ¨λ¦¬" νž™ μŠ€λƒ…μƒ·μ€ λ©”λͺ¨λ¦¬ 증가λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€.
λ˜ν•œ Chrome 및 OS μž‘μ—… κ΄€λ¦¬μž λͺ¨λ‘ λ©”λͺ¨λ¦¬κ°€ μ¦κ°€ν•˜λŠ” κ²ƒμœΌλ‘œ ν‘œμ‹œλ©λ‹ˆλ‹€.


λ‹€μŒκ³Ό 같은 경우 μ•…ν™”λ©λ‹ˆλ‹€.

  • Vuei18n μ‚¬μš©(λ²ˆμ—­ν•˜μ§€ μ•Šμ•„λ„)
  • 큰 μžμ‹ ꡬ성 μš”μ†Œλ₯Ό 가짐

ν…ŒμŠ€νŠΈ λŒ€μƒ:

  • μœˆλ„μš° 7 64λΉ„νŠΈ
  • 크둬 67.0.3396.99 64λΉ„νŠΈ

λ‹€μŒ 사항을 κ³ λ €ν•˜μ‹­μ‹œμ˜€.

  • λ‚΄κ°€ λ­”κ°€ 잘λͺ»ν•˜κ³  μžˆμ„μ§€λ„ λͺ°λΌ
  • 크둬 문제일 수 μžˆμŠ΅λ‹ˆλ‹€
  • OS 문제일 수 μžˆμŠ΅λ‹ˆλ‹€.
improvement

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ™μΌν•œ λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 이에 λŒ€ν•œ 사전 정보가 μžˆμŠ΅λ‹ˆκΉŒ?

λͺ¨λ“  3 λŒ“κΈ€

비생산 λͺ¨λ“œμ—μ„œλ§Œ λˆ„μˆ˜κ°€ μžˆλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. 당신은 생산에 μž˜ν•΄μ•Όν•©λ‹ˆλ‹€

@posvaλ₯Ό λŒλ €μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€.

λ˜ν•œ vue-i18n을 μ‚¬μš©ν•  λ•Œ λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰μ΄ λ„ˆλ¬΄ λ§Žμ•„ 문제λ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.
λ‚˜λŠ” vue-virtual-scroller도 μ‚¬μš©ν•˜κ³  μžˆλŠ”λ°, νŽ˜μ΄μ§€λ₯Ό νŽ˜μ΄μ§€λ‘œ λ‚˜λˆ„κ±°λ‚˜ μŠ€ν¬λ‘€ν•  λ•Œ ꡬ성 μš”μ†Œλ₯Ό 많이 νŒŒκ΄΄ν•˜κ³  μƒμ„±ν•©λ‹ˆλ‹€.

이것듀이 μ–Όλ§ˆλ‚˜ 관련될 수 μžˆλŠ”μ§€λŠ” λͺ¨λ₯΄κ² μ§€λ§Œ, 이 두 νŒ¨ν‚€μ§€μ™€ λ³΅μž‘ν•˜κ±°λ‚˜ 더 κΉŠμ€ ꡬ성 μš”μ†Œ κ΅¬μ‘°λŠ” ν”„λ‘œλ•μ…˜ λͺ¨λ“œμ—μ„œλ„ λ§Žμ€ λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰μ„ μ°¨μ§€ν•©λ‹ˆλ‹€.

Google μž‘μ—… κ΄€λ¦¬μžλ₯Ό μ‚΄νŽ΄λ³΄λ©΄ λ‚΄ μ•± 탭이 μ•„λž˜/μœ„λ‘œ μŠ€ν¬λ‘€ν•  λ•Œλ§ˆλ‹€ ~2.400Kμ”© μ¦κ°€ν•©λ‹ˆλ‹€(각 ν•­λͺ©μ€ ν”„λ‘œμ„ΈμŠ€μ—μ„œ μ‚­μ œ/생성됨).
μœ„μ•„λž˜λ‘œ μŠ€ν¬λ‘€ν•˜λŠ” 데 1뢄도 채 걸리지 μ•Šμ•„ 거의 1GB의 λ©”λͺ¨λ¦¬ μ‚¬μš©λŸ‰, ν”„λ‘œλ•μ…˜ λͺ¨λ“œ λ˜λŠ” 개발자 도ꡬ가 λ‹«νžˆκ±°λ‚˜ GC 후에 λ‚˜μ˜΅λ‹ˆλ‹€. 그리고 경둜λ₯Ό 따라 많이 내렀가지 μ•ŠμŠ΅λ‹ˆλ‹€.

vue λ˜λŠ” vue-i18n의 핡심 μ½”λ“œμ— μ΅μˆ™ν•˜μ§€ μ•Šμ§€λ§Œ μ„€μΉ˜λœ ꡬ성 μš”μ†Œ ꡬ쑰가 μ•±μ˜ 각 쀑첩 ꡬ성 μš”μ†Œμ— λŒ€ν•΄ λ³΅μ‚¬λ˜κ³  GCκ°€ ν•΄λ‹Ή 쀑첩 ꡬ성 μš”μ†Œλ₯Ό νŒŒκ΄΄ν•œ ν›„ 정리할 수 μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. vue-i18n이 자체적으둜 μ„€μΉ˜λ˜λŠ” 방식일 수 μžˆμŠ΅λ‹ˆλ‹€. μ €λŠ” 잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€. μ•„λž˜ λ°μ΄ν„°λŠ” 그것에 λŒ€ν•΄ μƒκ°ν•˜κ²Œ λ§Œλ“œλŠ” κ²ƒμž…λ‹ˆλ‹€.

image

λ™μΌν•œ λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 이에 λŒ€ν•œ 사전 정보가 μžˆμŠ΅λ‹ˆκΉŒ?

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰