איך לצמצם את גודל ה-JavaScript Bundle ב-70%
רוב אפליקציות הווב שולחות יותר מדי קוד. דף ממוצע טוען 1.7 MB של JavaScript. מפתחים משתמשים ב-35% בלבד מהקוד שהם מפיצים.
באנדלים קטנים יותר משפרים את המהירות שלכם. אתם משפרים את ה-Largest Contentful Paint ואת ה-Time to Interactive.
עקבו אחר 10 הצעדים הללו כדי לצמצם את הגודל.
Tree shaking הסירו exports שאינם בשימוש. השתמשו בסינטקס של ES Module. הוסיפו
"sideEffects": falseל-package.jsonשלכם. זה מסיר כ-18% מהקוד שאינו בשימוש.Code splitting פצלו את הקוד שלכם ל-chunks קטנים יותר.
Dynamic imports טענו קוד רק כשהמשתמשים זקוקים לו. השתמשו ב-lazy loading עבור routes. זה יכול לצמצם את גודל ה-bundle הראשוני ב-28%.
Image optimization השתמשו בטרנספורמציות מבוססות URL מ-CDN. הפסיקו להשתמש ב-SVGs גדולים בתוך הקוד (inline).
Dependency auditing בדקו את גודל החבילות באמצעות
npx bundle-phobia. • השתמשו ב-date-fns(13KB) במקום ב-moment.js(67KB). • השתמשו ב-lodash-esבמקום ב-lodash. • השתמשו ב-dayjs(2KB) עבור תאריכים פשוטים.Minification הסירו רווחים ותווים מיותרים. רוב ה-bundlers עושים זאת באופן אוטומטי.
Compression השתמשו ב-Brotli במקום ב-Gzip. Brotli טוב יותר ב-15% עד 25% בכיווץ קבצים.
Dead code elimination הסירו קוד שהמחשב לעולם לא יכול להגיע אליו.
Lazy loading components דחו את טעינת החלקים בדף שנמצאים מתחת לקו הגלילה (below the fold).
Polyfill pruning השתמשו ב-
@babel/preset-env. שלחו polyfills רק עבור הדפדפנים שהמשתמשים שלכם באמת משתמשים בהם.
הפסיקו לעשות את הטעויות הללו:
- שליחת גרסאות פיתוח (development builds). השתמשו תמיד ב-
NODE_ENV=production. - ייבוא של ספריות שלמות. ייבאו פונקציות ספציפיות במקום זאת.
- דילוג על ניתוח (analysis). השתמשו ב-
webpack-bundle-analyzerכדי לראות את ה-chunks הגדולים שלכם. - שכחתם דחיסה. קבצים לא דחוסים גדולים פי 5 מקבצי Brotli.
עקבו אחר ההתקדמות שלכם עם היעדים הבאים:
- גודל JS כולל: מתחת ל-120 KB.
- LCP: מתחת ל-2.5s.
- TTI: מתחת ל-3.5s.
התמקדו קודם כל ב-tree shaking, code splitting ו-auditing. שלושת הצעדים הללו מספקים לעיתים קרובות הפחתה של 50% עד 70% בספרינט אחד.
מקור: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g