האם יישום React שלך איטי מדי או לוקח יותר מדי זמן לטעון? אם כן, כדאי להשתמש בטכניקה המכונה פיצול קוד. טכניקה זו יעילה מאוד בשיפור מהירות הטעינה והביצועים של יישומי React. אבל מה זה פיצול קוד? ואיך זה נעשה?

מה זה פיצול קוד?

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

שקול אפליקציית React הכוללת שלושה דפים: דף הבית, דף אודות ודף המוצרים. כשאתה בדף הבית, אין טעם לטעון את עמוד האודות או עמוד המוצרים. כי אתה עדיין לא בדפים האלה. הרעיון של פיצול קוד הוא לוודא שאתה טוען את הקוד רק כאשר הוא נחוץ.

פתח דף אינטרנט בדפדפן האינטרנט שלך ולאחר מכן פתח את DevTools (תוכל ללחוץ על F12 במקלדת כדי לפתוח אותו ב-Google Chrome). לאחר מכן, עבור ללשונית מקור. שם תמצא את כל הקוד שהוריד בזמן שאתה מנווט לדף. ללא פיצול קוד, הדפדפן מוריד את כל הקבצים בפרויקט שלך בטעינת העמוד הראשונית. זה יכול להאט את האתר שלך אם הוא מכיל הרבה קבצים.

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

החלק הטוב ביותר בפיצול קוד הוא שאתה יכול לעכב את הטעינה של רכיבים כמו גם פונקציות. שֶׁלָנוּ מדריך מבוא על ReactJS מסביר לעומק את הרכיבים והפונקציות למקרה שתזדקק לרענון.

פונקציות פיצול קוד: שימוש בייבוא ​​דינמי

שקול את המצב הבא. אתה רוצה שבדף הבית שלך יהיה כפתור. כאשר אתה לוחץ על הכפתור, אתה רוצה להתריע על הסכום של 2 ו-2 (שזה 4). אז אתה יוצר א Home.js רכיב ולהגדיר את התצוגה של דף הבית שלך.

במקרה זה, יש לך שתי אפשרויות. ראשית, אתה יכול לייבא את הקוד להוספת המספרים בחלק העליון של Home.js קוֹבֶץ. אבל כאן הבעיה. אם הייתם מייבאים את הפונקציה בחלק העליון של הקובץ, אז הקוד ייטען גם כשלא לחצתם על הכפתור. גישה טובה יותר תהיה לטעון את סְכוּם() פועל רק כאשר אתה לוחץ על הכפתור.

כדי להשיג זאת, יהיה עליך לבצע ייבוא ​​דינמי. זה אומר שאתה תייבא את ה סְכוּם() פונקציה מוטבעת באלמנט הכפתור. הנה הקוד לאותו הדבר:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() { 
לַחֲזוֹר ( 
"בית"> 
דף הבית</h1>
 {
יְבוּא("../sum.js").לאחר מכן((מודול) => {
 עֵרָנִי(מודול.סְכוּם(2, 2))
 })
 }}
 >
 סכם את שני המספרים
 </button> 
 </div> 
 ); 
}

כעת הדפדפן יוריד רק את sum.js מודול כאשר אתה לוחץ על הכפתור. זה משפר את זמן הטעינה של דף הבית.

רכיבי פיצול קוד: שימוש ב-React.lazy ו-Suspense

אתה יכול לפצל רכיבים ב-React באמצעות עָצֵל() פוּנקצִיָה. המקום הטוב ביותר לבצע פיצול קוד יהיה בתוך הנתב שלך. כי זה המקום שבו אתה ממפה רכיבים למסלולים באפליקציה שלך. אתה יכול לקרוא את המדריך שלנו על כיצד לבנות אפליקציה של עמוד אחד עם נתב React אם אתה צריך רענון.

נניח שלאפליקציה שלך יש א בית, על אודות, ו מוצרים רְכִיב. כשאתה ב- בית רכיב, אין טעם לטעון את על אודות רכיב או ה מוצרים רְכִיב. אז אתה צריך לפצל אותם מה- בית מַסלוּל. הקוד הבא מדגים כיצד להשיג זאת:

ראשית, עליך לייבא את הפונקציות והרכיבים הנדרשים מה- לְהָגִיב ו תגובה-נתב-דום מודולים:

יְבוּא { מסלולים, מסלול, אאוטלט, קישור } מ"react-router-dom";
יְבוּא {עצלן, מתח} מ"לְהָגִיב";

לאחר מכן, עליך לייבא את הרכיבים באופן דינמי באמצעות ה עָצֵל() פוּנקצִיָה:

const בית = עצלן(() =>יְבוּא("./components/Home"));
const בערך = עצלן(() =>יְבוּא("./components/אודות"));
const מוצרים = עצלן(() =>יְבוּא("./components/Products"));

לאחר מכן, הגדר את הפריסה (תפריט ניווט). להשתמש ב רכיב כדי להציג את הרכיב המתאים למסלול הנוכחי (בית, על אודות, או מוצרים רְכִיב):

פוּנקצִיָהNavWrapper() {
לַחֲזוֹר (
 <>

אתה יכול לראות שאנחנו עוטפים את הרכיבים בפנים. זה אומר ל-React שהכל בפנים יש פוטנציאל להיטען בעצלתיים, מה שאומר שאולי הוא לא זמין מיד. מסיבה זו, ה מֶתַח לרכיב יש א לסגת תכונה. במקרה שלנו, הערך הוא טקסט פשוט שאומר "טוען...". אז בזמן שכל אחד מהעמודים מוריד, זה הולך לרשום טעינה על המסך.

לבסוף, הגדר את המסלול:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (

"/" element={}>
"/" element={} />
"/מוצרים" element={} />
"/על אודות" element={} />
 </Route>
 </Routes>
 );
}

כעת כאשר אתה מבקר בדף הבית, הדפדפן טוען רק את Home.js קוֹבֶץ. באותו אופן, כאשר אתה לוחץ על על אודות קישור בתפריט הניווט כדי לבקר בדף אודות, הדפדפן טוען רק את About.js קוֹבֶץ. זה אותו דבר עבור דף המוצרים.

פיצול קוד מותנה

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

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

כך יראה הקוד הזה:

יְבוּא {עצלן, מתח} מ"לְהָגִיב";
const AdminData = עצלן(() =>יְבוּא("./AdminData"));
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() { 
const [isAdmin, setIsAdmin] = useState(שֶׁקֶר)
לַחֲזוֹר ( 

"בית"> 
דף הבית</h1>
 setIsAdmin(הקודם => !prev)}>
 החלף מנהל מערכת
 </button> 

טוען...</h1>}>
 {isAdmin? <AdminData />: <h2> לא המנהל h2>} 
 </Suspense>
 </div> 
 ); 
}

כעת, כשאתה לוחץ על כפתור המעבר, isAdmin יוגדר ל נָכוֹן. כתוצאה מכך, האפליקציה תציג את מעמיסים אותו בעצלתיים. אבל אם אינך משתמש אדמין, האפליקציה לעולם לא תוריד AdminData.js כי זה לא יצטרך את זה.

פיצול קוד מותנה משתמש באותו מושג כמו עיבוד מותנה ב-React.

מושגי פיצול קוד מתקדמים

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

ראשית, אתה מייבא את הקרס:

יְבוּא {useTransition} מ"לְהָגִיב"

ואז אתה קורא להוק, שחוזר ממתין ו startTransition:

const [isPending, startTransition] = useTransition()

לבסוף, עטפו בפנים את הקוד לעדכון המצב שלכם startTransition():

startTransition(() => {
 setIsAdmin((הקודם) => !הקודם)
})

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

דרכים אחרות לייעל את ביצועי התגובה

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