האם אתה עדיין משתמש ב-create-react-app כדי להגדיר את פרויקט React שלך? עבור ל-Vite לביצועים טובים יותר ומהירות פיתוח מהירה יותר.

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

מה זה Vite?

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

שימושים בוויט esbuild, מצרף מבוסס Go שהוא מהיר יותר באופן משמעותי מאונדלר מסורתי מבוסס JavaScript כדי להאיץ את תהליך הבנייה של קוד המקור. זה גם מאגד מראש את התלות של האפליקציה שלך ומשרת את קוד המקור על ESM מקורי, המאפשר לדפדפנים לייעל את טעינת המודולים ליישום יעיל ומהיר יותר ביצועים. כשמגיע הזמן לפרוס את האפליקציה שלך לייצור, ל-Vite יש פקודת בנייה מובנית שמבצעת אופטימיזציה אוטומטית של האפליקציה שלך לפריסה, ומבטיחה שהאפליקציה שלך פועלת בצורה חלקה.

instagram viewer

יצירת פרויקט Vite

לפני יצירת פרויקט Vite, שים לב ש-Vite דורש Node.js גרסה 14.18+ או 16+. אתה יכול לעיין במאמרים אלה כדי להתקין את Node במחשב Windows או Ubuntu שלך.

  • איך ל התקן את Node.js ב-Windows.
  • לִלמוֹד כיצד להתקין Npm ו-Node.js באובונטו

צור פרויקט Vite על ידי הפעלת פקודה זו בטרמינל.

npm ליצור vite@latest

ברגע שהפקודה מתחילה לפעול, תתבקשו להזין שם פרויקט. הקלד את שם הפרויקט שלך ולחץ על Enter.

לאחר מכן, Vite ינחה אותך לבחור מסגרת. בחר תגובה.

Vite גם יבקש ממך לבחור גרסה. בחר JavaScript.

כאשר Vite מסיים את הפיגום של הפרויקט, נווט בספרייה שהוא יוצר, והתקן את התלות באמצעות npm.

npm להתקין

כדי להפעיל את הפרויקט, השתמש בפקודה זו:

npm run dev

זה צריך להיות דף הבית.

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

השתמש ב-Vite למהירות פיתוח מהירה

CRA (create-react-app) הוא בדרך כלל כלי ברירת המחדל להגדרת מבנה הפרויקט והתצורה עבור אפליקציית React. זה נוח מכיוון שהכל מוגדר עבורך, אבל זה יכול להיות איטי לבנות ולטעון מחדש במהלך הפיתוח.

Vite, לעומת זאת, משתמשת במודולי ES מקוריים בדפדפן כדי לספק זמני בנייה מהירים יותר. אם אינך רוצה להשתמש ב-Vite, אתה יכול לבחור במטא Framework של React כמו Next.js מכיוון שהוא גם תוכנן לביצועים גבוהים.