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

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

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

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

פיתוח ב-JavaScript

Axios interceptors

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

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