Vite.js در مقابل Webpack کدام یک بهتر است؟ | بررسی ویژگی ها و عملکرد

کامپایلرها از باندلرها برای ترکیب چند فایل جاوا اسکریپت در یک فایل اجرایی برای استفاده مرورگر استفاده می کنند. کل کد منبع و همه وابستگی های وارد شده مورد نیاز برای اجرای برنامه شما در این بسته گنجانده شده است. در این مقاله به دو مورد از محبوب ترین باندلرها خواهیم پرداخت: Vite و Webpack و آن ها را مقایسه خواهیم کرد. کدام یک از نظر توسعه و زمان تولید بهتر است؟

باندلر چیست؟

باندلر ابزاری است که گردش کار توسعه و تولید را با فعال کردن یکپارچه‌سازی یکپارچه کدهای نوشته شده به زبان‌هایی مانند Typescript یا SCSS که مرورگر به صورت بومی پشتیبانی نمی‌کند، افزایش می‌دهد. کد را بهینه سازی و سازماندهی می کند تا به طور موثر با محیط های توسعه و تولید سازگار شود.

در طول توسعه، باندلری مانند Webpack امکان بارگیری مجدد را فراهم می‌کند، به‌روزرسانی‌های بی‌درنگ صفحه وب را در حین انجام تغییرات امکان‌پذیر می‌کند، و نقشه‌های منبع به اشکال‌زدایی آسان کد کمک می‌کنند. از سوی دیگر، برای نسخه تولیدی، باندلر پایگاه کد را بهینه و یکپارچه می کند و در نتیجه عملکرد برنامه بهبود می یابد.

Webpack محبوب ترین باندلر بازار است که با پشتیبانی قوی جامعه با میلیون ها بارگیری هفتگی از مخزن NPM پشتیبانی می شود. با این حال، فناوری نوظهور Vite برای معرفی تنوع بیشتر و رفع نگرانی‌های مربوط به زمان بسته‌بندی مورد توجه قرار گرفته است. Vite به مشکل زمان بسته‌بندی Webpack می‌پردازد و دارای ویژگی‌های هیجان‌انگیز اضافی است.

Webpack چیست؟

Webpack یک باندلر ماژول ایستا است. هدف اصلی Webpack ترکیب منابع پروژه وب شما در تعداد قابل مدیریت فایلی است که مرورگر می تواند دانلود کند. این بدان معنا نیست که تمام فایل های پروژه شما فورا بارگذاری می شوند. در عوض، می توانید آنها را در صورت نیاز دانلود کنید.

اگرچه Webpack می تواند دارایی های غیر کد را بسته بندی کند، اما در بسته بندی کدهای مرتبط برتری دارد. ممکن است به نظر برسد که باندلینگ همه فایل‌های کد را ترکیب می‌کند (مانند جاوا اسکریپت/تایپ اسکریپت)، اما بسیار پیچیده‌تر است.

Webpack فقط به عبارات imports/require در کد پایبند است تا فایل‌های لازم را هنگام اجرای بسته‌بندی شامل شود. اغلب "درخت تکان دادن" را انجام می دهد، که می تواند بخش های کد خاصی (مانند کلاس ها و توابع) را که هرگز به آنها ارجاع نشده اند حذف کند. وب پک می تواند پروژه های شما را به طور بسیار موثری از این طریق برای شما بسته بندی کند. با این حال، اگر Vue CLI (با Webpack) را با Vite مقایسه کنیم، باید آنچه را که در طول توسعه رخ می دهد در نظر بگیریم.

Webpack در حین توسعه

Webpack برای بسته‌بندی ماژول در Vue CLI استفاده می‌شود. این نیز در مرحله توسعه رخ می دهد. هنگامی که یک پروژه Vue با استفاده از CLI ایجاد می کنید، به Webpack دستور داده می شود که پروژه شما را به صورت تدریجی و در حین مشاهده تغییرات بسازد. این به آن اجازه می دهد تا فایل های تغییر یافته را بسته بندی کند و آنها را در مرورگر جایگزین کند.

از آنجایی که بسته به صورت تدریجی ساخته می شود، می تواند به سرعت تغییرات را در حین کار بر روی یک پروژه اعمال کند. بسته به اندازه پروژه، ساخت اولیه ممکن است کمی طول بکشد (3 ثانیه یا بیشتر). با این حال، هنگامی که پروژه بوت استرپ شد، تغییرات افزایشی به سرعت اتفاق می‌افتد (1 ثانیه و اغلب زیر 100 میلی‌ثانیه).

Vite.js چیست؟

ایوان یو، خالق و نگهدارنده Vue، ویت ، در فرانسوی یعنی "سریع" است را ایجاد کرد تا یک بسته‌بندی مستقل از چارچوب کامل با زمان‌های کامپایل تا 10-100 برابر سریع‌تر و یک تجربه توسعه‌دهنده خارق‌العاده با hot-reloading داخلی و تقریباً زمان واقعی را فراهم کند.

استفاده از پشتیبانی ESM بومی مرورگر، مانند snowpack و preact/wmr، این امکان را فراهم می‌کند. ماژول های برنامه شما به وابستگی ها و کد منبع تقسیم می شوند.

به دلیل فرکانس پایین تغییرات وابستگی، آنها از قبل با یک باندلر جاوا اسکریپت نوشته شده در Go همراه هستند. این فقط یک بار اتفاق می افتد مگر اینکه وابستگی تغییر کند.

در حالی که روی آن کار می کنید، کد منبع به ESM (Ecma-Script-Modules) بومی برای مرورگر تبدیل می شود، که فقط به مرورگر اجازه می دهد فایل های مورد نیاز برای صفحه فعلی را بارگیری کند.

ساخت Production Build با Vite

اگرچه ماژول‌های بومی ES اکنون توسط همه مرورگرهای اصلی پشتیبانی می‌شوند، ارسال برنامه‌ای که از استراتژی‌های بهینه‌سازی عملکرد مانند tree-shaking, lazy loading و تقسیم تکه‌های معمولی استفاده می‌کند، همچنان عملکرد بهتری را در مقایسه با یک برنامه بدون بسته ارائه می‌کند.

Vite شامل یک دستور ساخت از پیش پیکربندی شده است که از Rollup برای بسته بندی برنامه شما استفاده می کند. علاوه بر این، Vite یک پیکربندی پیش فرض معقول را ارائه می دهد که می توانید آن را تغییر دهید.

وب پک چگونه کار می کند؟

برای ارائه برنامه شما، Webpack باید کل فایل جاوا اسکریپت را بخزد، پردازش کند و به هم بپیوندد، زیرا یک ابزار ساخت مبتنی بر بسته‌بندی است. این هم برای وابستگی ها و هم برای کد برنامه شما صادق است. حتی با فعال بودن HMR، تغییرات ممکن است تا ده ثانیه طول بکشد تا در مرورگر ظاهر شوند زیرا وقتی یک فایل را ذخیره می‌کنید، Webpack کل بسته جاوا اسکریپت را بازسازی می‌کند. با توجه به تاخیر بازخورد Webpack، توسعه برنامه های بزرگ جاوا اسکریپت کار زیادی را برای توسعه دهندگان می طلبد.

Vite.js چگونه کار می کند؟

برخلاف گردش‌های کاری مبتنی بر باندلر مانند Webpack که باید همه ماژول‌های جاوا اسکریپت شما را پردازش کند، Vite فقط ماژول‌های وابستگی شما را قبل از یک درخواست مرورگر پردازش می‌کند.

برای مهاجرت از webpack به Vite.js می توانید از این مقاله استفاده کنید.

چرا Vite بهتر از Webpack است؟

عملکرد بهتر

Vite با تبدیل وابستگی‌های ارسال شده به‌عنوان CommonJS یا UMD به ESM (ماژول‌های ES) بومی در طول پیش‌باندلینگ، عملکرد را بهبود می‌بخشد. این تبدیل زمان های بارگذاری را بهینه می کند زیرا Vite به طور بومی کد ESM را پشتیبانی می کند و به طور پیش فرض ارائه می کند. علاوه بر این، Vite می‌تواند وابستگی‌ها را با چندین ماژول داخلی در یک ماژول ترکیب کند و تعداد درخواست‌های ارسالی همزمان را کاهش دهد و سرعت بارگذاری کلی صفحه را افزایش دهد.

سازگاری گسترده با افزونه ها

Vite با استفاده از رابط پلاگین Rollup، تجربه توسعه دهنده را بهبود می بخشد و آن را با طیف گسترده ای از پلاگین های Rollup سازگار می کند. این سازگاری ادغام افزونه های موجود را ساده می کند و فرآیند توسعه را ساده می کند.

به روز رسانی سریع

با جایگزینی ماژول داغ مبتنی بر ESM (HMR) Vite، به‌روزرسانی‌ها سریع‌تر و کارآمدتر هستند. وقتی تغییراتی در ماژولی ایجاد می‌شود که به‌روزرسانی‌های داغ را می‌پذیرد، Vite فقط باید آن ماژول خاص را بدون در نظر گرفتن اندازه برنامه باطل کند. این منجر به زمان‌های به‌روزرسانی HMR سریع‌تر می‌شود، حتی برای برنامه‌های بزرگ‌تر.

زمان ساخت سریعتر

Vite از Rollup از پیش پیکربندی شده، بسته‌ای کارآمدتر از Webpack، برای ایجاد برنامه‌هایی برای تولید استفاده می‌کند. در نتیجه، زمان ساخت Vite معمولاً سریعتر از Webpack اجرا می شود و خروجی کمتری تولید می کند.

تفاوت بین Create React App و Vite

ابزارهای ساخت و سرورهای توسعه مانند Vite.js و Create React App (CRA) برای آسان‌تر ساختن برنامه‌های React ساخته شده‌اند. این دو ابزار به طور قابل توجهی با یکدیگر متفاوت هستند، با برخی همپوشانی عملکردی. Vite.js مزایایی نسبت به Create React App دارد، از جمله موارد زیر:

سرور توسعه سریعتر: ماژول های بومی ES Vite.js آن را قادر می سازد تا یک سرور توسعه سریعتر و کارآمدتر بسازد. این نشان می دهد که تغییرات در کد را می توان بلافاصله در مرورگر مشاهده کرد بدون اینکه نیاز به بارگذاری مجدد صفحه کامل شود. از سوی دیگر، Webpack که می تواند کندتر و کمتر موثر باشد، سرور توسعه CRA را تقویت می کند.

زمان‌های ساخت سریع‌تر: Vite.js ساخت‌های تولیدی بسیار بهینه‌سازی شده را تولید می‌کند که از ویژگی‌های مرورگر مدرن مانند تقسیم کد، tree-shaking و lazy loading برای کاهش اندازه بسته نهایی و بهبود عملکرد استفاده می‌کند. این می تواند منجر به زمان ساخت بسیار سریعتر از CRA شود.

پشتیبانی داخلی تایپ اسکریپت: Vite.js شامل پشتیبانی TypeScript است که ایجاد پروژه هایی را که از TypeScript استفاده می کنند ساده تر می کند.

پیکربندی ساده: Vite.js از یک قالب پیکربندی کاربرپسند استفاده می کند که استفاده از ابزار را آسان می کند. در برخی موارد استفاده، CRA ممکن است به تنظیمات پیچیده تری نیز نیاز داشته باشد.

از نظر عملکرد، سازگاری و کاربرپسندی، Vite.js از چندین جهت بهتر از Create React App عمل می کند. با این حال، هر ابزار دارای مزایا و معایبی است و ابزار ایده آل برای یک پروژه خاص به الزامات و محدودیت های خاص آن بستگی دارد.

جهت آشنایی با نحوه ایجاد یک پروژه با تایپ اسکریپت و React.js در Vite.js می توانید از این مقاله جهت کسب اطلاعات بیشتر استفاده کنید.

نتیجه

با به‌روزترین فناوری‌های جاوا اسکریپت، Vite نسل جدیدی از ابزار ساخت جاوا اسکریپت است که از دسترسی ماژول‌های ES در مرورگر و باندلر کامپایل به بومی برای ارائه بهترین تجربه توسعه‌دهنده استفاده می‌کند. Vite باعث می شود سرور توسعه شما حتی زمانی که یک برنامه کاربردی جاوا اسکریپت گسترده را مدیریت می کند، سرعت خود را حفظ کند. این کار را با استفاده از گردش کار مبتنی بر ESM برای توسعه محلی انجام می دهد.