כיצד להשתמש ב- React.lazy ו- Suspense עבור טעינה עצלה של רכיבים

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

מהם פיצול קוד וטעינה עצלה?

Webpack מגדיר חלוקת קוד כ:

"טכניקה של פיצול הקוד שלך לחבילות שונות שאותן ניתן לטעון לפי דרישה או במקביל". [מָקוֹר]

דרך אחרת לומר: "טעינה לפי דרישה או במקביל" היא טעינה עצלה .

מול טעינה עצלה עומס להוט . כאן הכל טעון לא משנה אם אתה משתמש בו או לא.

מדוע נשתמש בפיצול קוד וטעינה עצלה?

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

הורדת מספר מגה-בייטים היא חתיכת עוגה למהירות האינטרנט של ימינו. אנחנו עדיין צריכים לחשוב על המשתמשים עם חיבור איטי לאינטרנט או שימוש בנתונים ניידים.

איך זה נעשה לפני תגובה 16.6?

ככל הנראה הספרייה הפופולרית ביותר לטעינה עצלה של רכיבי React היא react-loadable.

חשוב ש- reactjs.org עדיין ממליץ react-loadableאם האפליקציה שלך מוצגת בשרת. [מָקוֹר]

react-loadableלמעשה די דומה לגישה החדשה של React. אראה זאת בהדגמה הבאה.

האם יש צורך במשהו להתקנה?

בואו נראה מה יש ל- reactjs.org לומר על כך:

"אם אתה משתמש באפליקציית Create React, Next.js, Gatsby או בכלי דומה, תהיה לך הגדרת Webpack מהקופסה כדי לאגד את האפליקציה שלך. אם אינך, תצטרך להגדיר את עצמך יחד. . לדוגמה, עיין במדריכי ההתקנה וההתחלה במסמכי Webpack. "

- reactjs.org

בסדר, אז נדרש Webpack שמטפל ביבוא דינמי של החבילות.

ההדגמה הבאה נוצרת באמצעות Create React App.ובמקרה זה, Webpack כבר מוגדר ואנחנו מוכנים לצאת לדרך.

הַדגָמָה

עבור הדגמה זו, נשתמש react-pdf. react-pdfהיא ספרייה מדהימה המשמשת ליצירת קבצי PDF בדפדפן, בנייד ובשרת. אנו יכולים ליצור PDF בשרת, אך אם אנו מעדיפים לעשות זאת בצד הלקוח, זה כולל מחיר: גודל חבילה.

אני משתמש בתוסף עלות ייבוא ​​עבור קוד Visual Studio כדי לראות את הגדלים של הספריות בהן נעשה שימוש.

נניח שהדרישה שלנו היא ליצור קובץ PDF כאשר משתמש לוחץ על הכפתור.

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

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

אנסה להראות כיצד אנו יכולים לפתח פיתרון בעומס עצל ובלעדיו.

חלון ראווה של להיטות טעינה עצלן

בשני המקרים נשתמש ברכיב אחד שמייבא תלות react-pdfממסמך PDF פשוט ומייצר אותו.

שום דבר מרהיב לא קורה כאן. אנו מייבאים PDFViewer, Document, Page, Text, Viewמ react-pdf. כל אלה משמשים renderבשיטת PDFPreviewהרכיב.

PDFPreviewמקבל רק אחד propשנקרא title. כפי שהשם מרמז, הוא משמש ככותרת בקובץ PDF שזה עתה נוצר.

pdfStyles.js נראה כך:

טוען להוט

בואו נראה תחילה כיצד יכול להיראות רכיב ההורה ללא טעינה עצלה:

שמציג את התצוגה הבאה בדפדפן:

בואו נעבור יחד את הקוד:

בשורה 2 אנו מייבאים PDFPreviewרכיב.

בשורה 6 אנו מאתחלים את המצב עם ערכי ברירת מחדל. nameהוא שדה המשמש ככותרת בקובץ PDF, בעוד ששדה PDFPreviewהוא בוליאני המציג או מסתיר PDFPreview.

עכשיו, בואו נקפוץ renderלשיטה ונבדוק מה יוצג.

בשורה 19 ו- 25 אנו מעבירים קלט וכפתור. כאשר המשתמש מקליד את הקלט, nameהמצב משתנה.

ואז כאשר משתמש לוחץ על "צור PDF", showPDFPreviewמוגדר כ true. הרכיב מעבד מחדש ומציג את PDFPreviewהרכיב.

למרות שאנו משתמשים PDFPreviewרק בלחיצת משתמש, כל הקוד הקשור אליו נכלל בחבילת האפליקציות:

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

טעינה איטית

ביצענו רק שינויים קטנים ובואו נעבור אותם.

שורה 2 מוחלפת:

const LazyPDFDocument = React.lazy(() => import("./PDFPreview"));

בואו נראה מה המסמכים של React אומרים על React.lazy:

React.lazy לוקח פונקציה שחייבת לכנות דינמיקה import(). זה חייב להחזיר a Promiseאשר נפתר למודול עם defaultייצוא המכיל רכיב React.

- reactjs.org

בשורה 27 אנו משתמשים Suspense, שחייב להיות הורה לרכיב טעון בעצלן. כאשר showPDFPreviewמוגדר נכון, LazyPDFDocumentמתחיל לטעון.

עד שנפתר רכיב הילד, Suspenseמראה כל מה שמספק fallbackלאביזר.

התוצאה הסופית נראית כך:

אנו יכולים לראות משקולות 0.chunk.js פחות משמעותית מבעבר ו- 4.chunk.js ו- 3.chunk.js נטענות בלחיצת כפתור.

סיכום

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

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

אם התשובה היא כן, אז React.Lazyו Suspenseבאמת לעזור לנו עם המשימה.

תודה שקראת! אנא שתף ​​אותו עם כל מי שעשוי למצוא את זה מועיל והשאיר משוב.