ظهور ابزارهای ساخت، بسیاری از نوآوری های جدید را در توسعه frontend ممکن کرد. در حالی که ابزارهایی مانند webpack در خط مقدم این نوآوری قرار داشتند، با گذشت زمان، آهسته و متورم شدند. این امر ابزارهای ساخت جدید را ضروری کرد، ابزارهایی مانند Vite که سریع و سبک طراحی شده بودند.در این مقاله از آنوفل، مروری بر Vite ارائه می‌دهم، توضیح می‌دهم که چرا باید از آن استفاده کنید، در مورد اینکه چه چیزی آن را بهتر از رقیبش می‌کند، موارد استفاده آن را بررسی می‌کنم و موارد دیگر.
چرا build tools مهم است؟
ابزارهای ساخت ما را قادر می‌سازد تا رابط‌های کاربری پیچیده‌ای را با مؤلفه‌های متعدد ایجاد کنیم، که قبلاً ایجاد آنها با HTML، CSS و جاوا اسکریپت سنتی دشوار یا غیرممکن بود. آنها همچنین کوچک کردن و فشرده سازی کد را ممکن می کنند که عملکرد صفحات وب را بهبود می بخشد.
علاوه بر این، ابزارهای ساخت به ما امکان می‌دهند کارهایی مانند کامپایل کد و تولید assets را خودکار کنیم، که باعث صرفه‌جویی در زمان و تلاش در فرآیند توسعه می‌شود. به طور کلی، آنها این امکان را برای توسعه دهندگان ایجاد می کنند تا برنامه های پیچیده وب را به راحتی ایجاد کنند.
با این حال، ابزارهای ساخت قدیمی‌تر مانند webpack و Parcel برای کار با برنامه‌های بزرگ و پیچیده طراحی شده‌اند. برای برنامه های کوچکتر، آنها بسیار بزرگ بودند و نیازی نبود از آن ها استفاده کنیم. در حالی که این ابزارهای قدیمی هنوز به طور گسترده مورد استفاده قرار می گیرند، ابزارهای ساخت جدیدتر مانند Vite و Snowpack به استانداردی برای ساخت برنامه های وب تبدیل شده اند.
Vite چیست؟
Vite یک ابزار ساخت و سرور توسعه است که توسط Evan You، خالق Vue.js ایجاد شده است. هدف اولیه ایوان ساده‌سازی و سرعت بخشیدن به توسعه و ساخت فرآیندهای برنامه‌های Vue بود.
به طور غیر منتظره، پذیرش Vite افزایش یافت و موج جدیدی از نوآوری را در اکوسیستم چارچوب وب آغاز کرد. فریم ورک هایی مانند Nuxt 3، SvelteKit، Astro، Refine، Hydrogen و SolidStart اکنون به طور پیش فرض از Vite استفاده می کنند. تیم React نیز اخیراً پشتیبانی خود از Create React App را کنار گذاشته و به جای آن الگوی Create-vite Vite را توصیه می کند. ما در این مقاله Vite.js چیست به آن پرداختیم.
تکامل Vite با نسخه 2.0 ادامه یافت که تغییرات قابل توجهی مانند معماری بازطراحی شده و عملکرد و کارایی بهینه‌سازی شده را ایجاد کرد. این نسخه همچنین دارای یک سیستم افزونه جدید است که سفارشی سازی و توسعه پذیری را در فرآیند توسعه افزایش می دهد، به علاوه پشتیبانی درجه یک از CSS.
در حالی که Vite 2.0 تغییرات قابل توجهی را معرفی کرد، تیم توسعه به طور مداوم ویژگی های موجود را بهبود می بخشد و در هر نسخه بعدی ویژگی های جدیدی را معرفی می کند.
آخرین نسخه Vite 5.0 از باندلر ماژول Rollup به‌روز شده استفاده می‌کند و یک ویژگی پیشرفته، server.warmup را معرفی می‌کند. این ویژگی به ما امکان می دهد لیستی از ماژول ها را مشخص کنیم که باید به محض شروع به کار سرور از قبل تغییر شکل داده شوند و در نتیجه زمان راه اندازی بهبود می یابد.
Vite چگونه کار می کند؟
Vite برای بهبود DX با استفاده از قابلیت‌های فناوری‌های وب مدرن، مانند ماژول‌های بومی ES و esbuild، برای سرعت بخشیدن به پروژه‌های وب در مقیاس بزرگ و مدرن ایجاد شد. این رویکرد به مشکلات مربوط به باندل کردن و زمان انتظار طولانی‌تر هنگام راه‌اندازی سرورهای توسعه می‌پردازد.
قبل از ماژول‌های ES، توسعه‌دهندگان کدهایی را با فرمت‌هایی مانند CommonJS و AMD می‌نوشتند و برای بسته‌بندی این کد به ابزارهای پیچیده‌ای مانند webpack و Parcel تکیه می‌کردند. این شامل الحاق چندین ماژول منبع و سایر دارایی ها در یک بسته جاوا اسکریپت است که می تواند با استفاده از یک نمودار وابستگی در مرورگر اجرا شود.
متأسفانه، همانطور که برنامه کد و وابستگی های بیشتری اضافه می کند، روند بسته بندی به طور فزاینده ای کند می شود. این امر باعث می‌شود مقداردهی اولیه سرورهای توسعه به طور غیرقابل تحملی کند شود و حتی بر حلقه بازخورد برای جایگزینی ماژول داغ (HMR) در هنگام ایجاد تغییرات در برنامه تأثیر می‌گذارد.
Vite این مشکل را با استفاده از ماژول‌های ES و APIهای مرورگر کاهش می‌دهد و به توسعه‌دهندگان اجازه می‌دهد تا ماژول‌ها را مستقیماً بدون فرآیند بسته‌بندی پیچیده وارد و صادر کنند. می‌توانید با ماژول‌های جداگانه به‌عنوان فایل‌های جداگانه کار کنید و نحوه ارتباط هر ماژول را به مرورگر بسپارید و روند توسعه را سریعتر و شهودی‌تر کند.
برای بهبود زمان اولیه سازی سرور توسعه، Vite از یک تکنیک منحصر به فرد استفاده می کند که ماژول ها را با دقت به دو گروه مجزا تقسیم می کند:
وابستگی ها: هر کد جاوا اسکریپتی که در طول توسعه اغلب به روز نمی شود. وابستگی ها می توانند بسیار بزرگ باشند و اغلب در فرمت های CommonJS و UMD ارسال می شوند که پردازش آنها را سنگین می کند. Vite آنها را به ماژول‌های ES تبدیل می‌کند و با استفاده از esbuild، یک باندلر جاوا اسکریپت که با Go نوشته شده است، آنها را باندل می‌کند. این باعث می شود Vite بین 10 تا 100 برابر سریعتر از باندلرهای مبتنی بر جاوا اسکریپت باشد.
کد منبع: کدی که برنامه شما را تشکیل می دهد و اغلب در معرض تغییر است. این شامل کدهای نوشته شده در JSX یا CSS و همچنین کدهایی است که برای اجزای Vue یا ری اکت نوشته شده است. لازم نیست همه کد منبع به طور همزمان استفاده شوند، زیرا برخی از آنها بر اساس مسیرها تقسیم می شوند. Vite فقط نیاز به تجزیه کد و ارائه آن در صورت درخواست دارد. از آنجایی که کد از طریق ESM بومی ارائه می شود، مرورگر باندلینگ را مدیریت می کند، بنابراین Vite نیازی به نگرانی در مورد آن ندارد.
سرور توسعه فوق العاده سریع Vite به ویژه برای فریمورک های برنامه های کاربردی بومی جاوا اسکریپت مانند Electron که به خاطر سرور توسعه ضعیف خود شناخته شده است، مناسب است.
چرا از Vite استفاده کنید؟
سرور توسعه سریع Vite، سفارشی‌سازی ساخت و سایر ویژگی‌ها آن را به انتخابی قانع‌کننده برای بسیاری از توسعه‌دهندگان تبدیل می‌کند. به زودی ویژگی‌های کلیدی آن را به تفصیل مورد بحث قرار خواهیم داد، اما ابتدا، بیایید بررسی کنیم که چرا معتقدم Vite آینده توسعه frontend است و چرا باید از آن استفاده کنید.
راحتی در استفاده
Frontend DX اساساً حول سرعتی است که توسعه‌دهنده می‌تواند یک محیط توسعه‌دهنده را راه‌اندازی کند و تغییرات بلادرنگ را اجرا کند. حتی با شروع کننده های پروژه که برای راه اندازی سریع طراحی شده اند، توسعه دهندگان اغلب زمان قابل توجهی را صرف پیکربندی ابزارهای توسعه ضروری می کنند.
وقتی به این موضوع می‌رسد، Vite همه کادرها را بررسی می‌کند. این نه تنها با تنظیمات ساخت از پیش پیکربندی شده ارائه می‌شود، بلکه یک راه‌اندازی با حداقل پیکربندی و یک سیستم افزونه گسترده را ارائه می‌دهد که تمام اجزای لازم برای یک محیط توسعه را در بر می‌گیرد.
همه اینها، همراه با پشتیبانی از TypeScript، JSX، و CSS، راه اندازی یک محیط توسعه برنامه وب را ساده و کارآمد می کند.
ساخت بهینه سازی با بارگذاری ناهمگام
ارائه پشتیبانی از یک ویژگی مهم است، اما همیشه کافی نیست. حسابداری برای موارد لبه یک مسئله کاملاً دیگر است، اما موضوعی است که Vite به خوبی از عهده آن برمی‌آید.
ما در مورد اینکه چگونه حمل و نقل ESM جدا شده کارآمد نیست به دلیل رفت و آمدهای اضافی شبکه ناشی از واردات تودرتو بحث کردیم. Rollup و سایر ابزارهای ساخت هنگام تقسیم کد با واردات پویا با مشکلات مشابهی روبرو می شوند.
Rollup معمولاً با این مشکل روبرو می شود زیرا اغلب یک تکه یا کد مشترک تولید می کند که بین دو یا چند قطعه به اشتراک گذاشته می شود. هنگامی که با یک واردات پویا ترکیب می شود، می تواند باعث کاهش عملکرد شود.
برای ارائه یک تصویر واضح تر، داکیومنت Vite نمایش بصری زیر را از یک سناریوی معمولی غیربهینه نشان می دهد: