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

מצטער על הכותרת הקליק-בייטית של המאמר, אבל אני חייב בדיחת אבא גניחטית אחת לפחות. אחד הקולגות שאני אוהב ממש לעבוד איתם וללמוד מהם הוא דורון קילזי, הוא צעיר ממני באיזה 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 שיש בו וובפאק ויראה את עלות הייבוא. כך אפשר להשוות ממש ממש בקלות את המשקל. ממש תוך כדי הקלדה.

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

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