פישוט השימוש ב-Vite
כלים ישנים כמו Webpack או Create React App עובדים על ידי ביצוע bundling לכל הפרויקט שלכם תחילה. הכלי קורא כל קובץ והופך אותם לקובץ JavaScript אחד ענק. זה עובד עבור פרויקטים קטנים, אך נכשל בפרויקטים גדולים. בפרויקטים גדולים, התהליך הזה לוקח שניות רבות. בכל פעם שאתם שומרים קובץ, הכלי חייב לבצע מחדש חלק גדול מהעבודה הזו.
Vite עובד אחרת. דפדפנים מודרניים תומכים ב-ES modules באופן טבעי. המשמעות היא שהדפדפן יכול לנהל את ה-imports וה-exports בעצמו. Vite לא מבצע bundling לקוד שלכם במהלך הפיתוח. הוא מגיש כל קובץ כמודול נפרד רק כאשר הדפדפן מבקש אותו.
תחשבו על מסעדת בופה. השף מבשל כל מנה ומנה לפני פתיחת הדלתות. אם תרצו שינוי קטן אחד, השף יצטרך להכין מחדש את כל הבופה. כך Webpack עובד. ככל שהפרויקט גדול יותר, כך זמן ההמתנה שלכם ארוך יותר.
Vite הוא כמו מסעדת א-לה-קארט (à la carte). הדלתות נפתחות מיד. אתם מזמינים מנה אחת. השף מכין רק את המנה הזו. אם תרצו קינוח מאוחר יותר, השף יכין רק את הקינוח. אתם לא מחכים שכל התפריט יהיה מוכן.
Vite משתמש בשתי אסטרטגיות שונות לשתי מטרות שונות:
פיתוח (vite dev)
• אסטרטגיה: מגיש מודולי ESM טבעיים ללא bundling.
• מהירות התחלה: מיידית. היא אינה תלויה בגודל הפרויקט.
• למה: בקשות HTTP מקומיות הן מהירות במחשב שלכם.
ייצור (vite build)
• אסטרטגיה: מבצע bundling לכל הדברים באמצעות Rolldown.
• מהירות התחלה: הזמן גדל עם גודל הפרויקט.
• למה: מאות קבצים נפרדים גורמים ליותר מדי בקשות HTTP עבור המשתמשים. bundling פותר זאת.
Vite מעניק לכם מהירות בזמן שאתם כותבים קוד ויעילות בזמן ההשקה.
מקור: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62