הורד משקל (בוופבאק) מייד – שאל אותי כיצד

ייבוא ישיר של קומפוננטה במונוריפו יכולה לחסוך הרבה קילובייטים ודמעות (טוב, לפחות קילובייטים).

מצטער על הכותרת הקליק-בייטית של המאמר, אבל אני חייב בדיחת אבא גניחטית אחת לפחות. אחד הקולגות שאני אוהב ממש לעבוד איתם וללמוד מהם הוא דורון קילזי, הוא צעיר ממני באיזה 20 שנה, אבל תמיד יש דברים מעניינים ללמוד ממנו (ומשאר היונגערמאנים בורייזון).

אחד הדברים שהייתי עושה בלי לחשוב זה import לספריות. טוב, כשעובדים עם קומפוננטות ועם webpack, אנחנו משתמשים בזה כל הזמן. בואו ונדגים על lodash, ספרית העזר הפופולרית. אם אני צריך להשתמש בדברים מתוכה, כמו למשל zip, inRange ו-union. בקומפוננטה כלשהי, אני אשתמש בסינטקסט import. כך למשל:

import { zip, union, inRange} from 'lodash';

ֿמהנקודה הזו, וובפאק ידאג להכל. מה הבעיה עם הקוד הזה? שוובפאק לוקח את כל lodash ומכניס אותו יחד עם קוד הקומפוננטה. לא אסון עצום בפני עצמו, אבל באפליקציה מורכבת, זה עלול להביא להתנפחות של הקוד שלי ולגידול במשקל שלו. אפילו דרמטית ובלי צורך.

דבר יותר יעיל הוא לעשות משהו כזה:

import zip from 'lodash/zip';
import union from 'lodash/union';
import inRange from 'lodash/inRange';

עבור חלקכם זה נשמע טריוויאלי, גם כשחושבים על זה, זה הגיוני. כמובן כשקילזי נתן לי הערה על זה ב-Pull request, סירבתי להאמין לו ודרשתי הוכחות. בדרך כלל על מנת לבדוק כפילויות כאלו יש לנו כלים לניתוח import, אבל צריך להפעיל אותם פעמיים. פעם אחת בוריאציה הראשונה ופעם שניה בוריאציה השניה. וזה מורכב.

זו הסיבה שקילזי הראה לי תוסף ממש חמוד (מתוצרת חברת וויקס) לויז׳ואל סטודיו קוד שמראה את העלות האמיתית של כל import. שם התוסף הוא import cost – והוא כאמור עובד עם ויז׳ואל סטודיו קוד. מייד כשמתקינים אותו, הוא יעבוד בכל repo שיש בו וובפאק ויראה את עלות הייבוא. כך אפשר להשוות ממש ממש בקלות את המשקל. ממש תוך כדי הקלדה.

לפני, משקל של 24K
אחרי, 498 בייט

התוסף קצת כבד, אז בימים רגילים אפשר לכבות אותו. אבל כשבאים להתקוטט עם ישיש נרגן – הוא יכול ממש לסייע. בכל מקרה, כדאי לזכור שאם אתם מייבאים מונוריפו שיש לו כמה חבילות, אז זה ממש ממש יעיל כשעושים import. פשוט להביא את מה שאתם באמת צריכים.

אם זה נשמע לכם כמו סינית… אם אתם משתמשים ב create react app או בכל גנרטור אחר, סביר להניח שאתם משתמשים בוובפאק ולא ידעתם.

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

הסבר על הום אסיסטנט, מערכת הקוד הפתוח לבית חכם ואיך לחבר אליה מיקרובקרים.

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

גלילה לראש העמוד