אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פיתוח ב-JavaScript » הורד משקל (בוופבאק) מייד – שאל אותי כיצד

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

רן בר-זיק יולי 7, 2019 7:07 am 4 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
JavaScript

4 תגובות

  1. מתן הגב יולי 7, 2019 בשעה 10:08 am

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

  2. אברימי הגב יולי 7, 2019 בשעה 11:03 am

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

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

    • אברימי הגב יולי 9, 2019 בשעה 11:53 pm

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

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

      • דוד מאיר לוי הגב יולי 10, 2019 בשעה 11:29 am

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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