הסבר על JavaScript Bundling
אתם כותבים אפליקציות React או Angular באמצעות קבצים רבים. יש לכם רכיבים (components), שירותים (services) וספריות (libraries). הארגון הזה עוזר לכם.
הדפדפן לא מתעניין בתיקיות שלכם. אם תטענו 200 קבצים, הדפדפן יבצע 200 בקשות רשת. זה הופך את האפליקציה שלכם לאיטית.
Bundlers פותרים את הבעיה הזו. Bundler לוקח את הקוד, ה-imports והמודולים שלכם, ומאחד אותם לקובץ אחד או למספר קבצים קטנים. זה הופך את הטעינה ליעילה.
Bundlers מודרניים עושים יותר מאשר רק איחוד קבצים:
• Minification: הוא מסיר רווחים מיותרים והערות, ומקצר שמות של משתנים כדי להקטין את הקבצים. • Tree shaking: הוא מסיר קוד שאתם אף פעם לא משתמשים בו ומנקה פונקציות שלא נעשה בהן שימוש מספריות. • Code splitting: הוא מחלק את הקוד למקטעים קטנים. הדפדפן טוען רק את מה שהמשתמש צריך ברגע זה.
קבצים קטנים יותר מובילים לאפליקציות מהירות יותר.
קיימים שני כלים עיקריים: Webpack ו-Vite.
Webpack מבצע bundling לכל האפליקציה שלכם לפני ההגשה שלה. זה עובד טוב עבור פרויקטים גדולים וישנים (legacy). הוא גמיש אך עלול להרגיש איטי בפרויקטים גדולים.
Vite הוא הבחירה המודרנית. במהלך הפיתוח, הוא מגיש קבצים ישירות. הוא מעדכן רק את הקובץ ששיניתם, מה שהופך את העדכונים למיידיים. עבור production, Vite משתמש ב-Rollup כדי ליצור bundles מהירים.
השוואה:
Webpack:
- מהירות פיתוח: איטית יותר
- Config: מורכבת
- הכי מתאים ל: פרויקטים גדולים וישנים (legacy)
Vite:
- מהירות פיתוח: מהירה
- Config: פשוטה
- הכי מתאים ל: פרויקטים מודרניים חדשים
השתמשו ב-Vite עבור פרויקטים חדשים.
כל bundler פועל בשלושה שלבים:
- בניית dependency graph: הוא ממפה כיצד כל קובץ מתחבר לאחרים.
- טרנספורמציה של הקוד: הוא ממיר TypeScript או JSX ל-JavaScript רגיל.
- הפקת ה-bundle: הוא מאחד ומזער הכל לתוך תיקייה לצורך deployment.
שמרו על ה-bundle שלכם רזה בעזרת הצעדים הבאים:
• Lazy loading: טעינת רכיבים רק כאשר המשתמשים מנווטים אליהם. • Partial imports: אל תייבאו ספרייה שלמה. ייבאו רק את הפונקציה הספציפית שאתם צריכים. • Analyze: השתמשו בכלים כדי לראות מה תופס מקום ב-bundle שלכם. • Production builds: תמיד פרסמו (deploy) גרסאות production. גרסאות development הן גדולות מדי.
Bundling משפר את ביצועי האפליקציה שלכם על ידי מתן פחות קבצים וקבצים קטנים יותר לדפדפן.
מקור: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p