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

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂

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

אל תשארו מאחור! יש עוד מה ללמוד!

4 comments on “הורד משקל (בוופבאק) מייד – שאל אותי כיצד
  1. מתן הגיב:

    היי כן, הקונספט של התוסף מדהים, אבל אם תפתח את ה tasks monitor שלך תכלס שה CPU שלך על 100%. יש באג בהרחבה הזו מזה כמה חודשים וה maintainers של ההרחבה לא מטפלים בבעיה.

  2. אברימי הגיב:

    השאלה היא מה העלות של import * 3

    מסתבר שקרוב לכלום השאלה היא מה קורה כשיש הרבה יותר.

    • אברימי הגיב:

      intellij ב – java הופך 5 אימפורטים מאותו נתיב לאימפורט יחיד
      כך שנראה שיש מחיר גם לחזרה מרובה.

      לא חקרתי את העניין ב – JS

      • דוד מאיר לוי הגיב:

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

כתיבת תגובה

האימייל לא יוצג באתר.

רישום