קובץ bundle כבד, איך אפשר לחלק אותו?

קורס React
#1

יש לנו במערכת (react js) קובץ bundle יחיד שעולה עם כל תמונת המערכת בכניסת משתמש למערכת,
הקובץ שוקל כ40mb וגדל מיום ליום - התעבורה של הקובץ מהשרת ללקוח יכולה לקחת המון זמן ברמה לא הגיונית להנגשת החומר ללקוח,
מה הדרך הנכונה לחלק את עליית הbundle?,
והאם קיימות ספריות מומלצות לביצוע החלוקה?

#2

הי צריך להבין למה הוא לוקח כל כך הרבה. אפשר להיעזר בכלי הזה כדי להבין מה יש ב bundle:

בעיקרון אפשר להשתמש ב Code Splitting אם הבעיה של הגודל היא בגלל קוד שלך:

אבל במספרים של 40 מגה זה נשמע שאתם עושים משהו מאוד לא בסדר. צריך קודם כל להבין מה יש שם

לייק 1
#3

היי, תודה על התגובה,
אכן השתמשתי בcode-splitting, קצת היה מורכב שהimport, לא מקבל ערך דינאמי, רק ערך טקסטואלי שנרשם לתוך הimport, חיפשתי וראיתי שזו בעיה כלשהי משהו שעומד בין הreact ל-webpack,

כדי להשתמש בדינאמיות כלשהיא השתמשתי באובייקט componentMap, עם key שהוא שם שם קומפוננטה, וvalue המכיל פונקציית import המצביעה על הניתוב לקומפוננטה משהו ברעיון הזה:

const componentMap = {
componentA: () => import('../../page1'),
componentB: () => import('../../page2'),
componentC: () => import('../../page3'),
};

const MyLazyComponent = (props) => {
const component = componentMap[props.componentName];
const LazyComp = React.lazy(component);

return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComp {...props} />
</Suspense>
);
};

(נ.ב. כשבדקתי את גודל החבילות בbundle כאן: https://bundlephobia.com/
קיבלתי סיכום של 12.2mb, אך הגודל של הbundle עמד על 40mb, מה שיתכן שנובע משימוש חוזר במספר ספריות מכפיל מן הסתם את גודל הbundle בהתאם למספר המופעים של פקודות הimport בקומפוננטות השונות.)
(לאחר השימוש בlazy.load בחלק מהאפלקציה, הגעתי לקובץ של 8mb)