https://virgool.io/feed/@pooryaj fa 2026-07-02 20:07:54 https://files.virgool.io/upload/users/15359/avatar/0zVzbq.png?height=120&width=120 https://virgool.io/@pooryaj https://virgool.io/@pooryaj/%D8%A7%D8%B6%D8%A7%D9%81%D9%87-%DA%A9%D8%B1%D8%AF%D9%86-vite-%D8%A8%D9%87-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%AF%D8%B1-%DA%A9%D9%85%D8%AA%D8%B1-%D8%A7%D8%B2-30-%D8%AB%D8%A7%D9%86%DB%8C%D9%87-rovun8pf5xix vite + create-react-appتا قبل از اینکه ES modules در مرورگر ها پیاده سازی بشن دولوپر ها راه استانداردی نداشتن برای اینکه کد جاوااسکریپتشون رو به صورت ماژولار بنویسن پس در نتیجه بر حسب نیاز ابزار هایی مثل webpack به وجود اومدن که همه کد های مارو کنار هم bundle میکردن و به صورت یک فایل تحویل مرورگر میدادن که هم بتونیم به صورت ماژولار کد هامون رو بنویسیم و هم مرورگر ها مشکلی نداشته باشن.اما الان در سال 2021 هستیم و همه مرورگر های مدرن از ES modules پشتیبانی میکنن اما ما هنوز داریم از وب پک استفاده میکنیم. هر بار میخواهیم محیط دولوپمنت رو ران کنیم باید براش یکی دو دقیقه صبر کنیم تا استارت بشه و وقتی پروژه بزرگ تر میشه برای دیدن هر تغییر هم باید چند ثانیه صبر کنیم. اما الان راه های بهتری برای انجام این کار داریم که یکیش vite هست.کلمه vite در زبان فرانسوی به معنای "سریع" هست و به صورت /vit/ (ویت) تلفظ میشه. و بزارین بهتون اینو بگم که واقعا خیلی خیلی سریعه. اینقد سریع که چند بار اول که ازش استفاده میکنید باورتون نمیشه سرور دولوپمنت ران شده یا اینکه تغییراتتون اعمال شده. وقتی که از وب پک استفاده میکنیم هربار که سرور رو استارت میکنیم تمام کد های شما کنار هم قرار میگیرن و یک باندل رو درست میکنن که تحویل مرورگر داده میشه و هر وقت تغییراتی انجام میدین هم دوباره این باندل باید درست بشه که همونظور که مشخصه پروسه سریعی نیستش (این پروسه بدون استفاده از HMR منظورمون هست اما همچنان با اون هم با بزرگ شدن پروژه اذیت کننده میشه). اما vite به یک روش دیگه کد های شما رو هندل میکنه. این پروسه توی دو مرحله انجام میشه:1- برای dependency ها: vite میاد همه dependency های شما رو پیدا میکنه و با esbuild از اونها یک باندل درست میکنه. این مرحله ضروریه بخاطر اینکه مرورگر ها نمیتونن ایمپورت کردن از پکیج ها رو متوجه بشن و vite باید اونا رو توی یک path مثل بقیه فایل ها serve کنه که مرورگر بتونه ازشون استفاده کنه. این پروسه خیلی بهینه اس بخاطر اینکه esbuild با زبان go نوشته شده و خودش خیلی خیلی سریع تر از بقیه bundler ها هست (حدود 100 برابر سریع تر) و همینطور این باندلی که از dependency ها درست میشه هم روی دیسک cache میشه هم سمت مرورگر، که وقتی در حال دولوپ هستید مرورگر dependency هارو مستقیم از cache خودش بخونه و از vite دوباره اونارو درخواست نکنه. این cache وقتی پکیج های شما عوض میشن هم دوباره جنریت میشه.2- برای سورس کد شما: کد های شما به صورت module به مرورگر تحویل داده میشن و خود مرورگر با توجه به صفحه ای که داخلش هستید فقط کد های اون قسمت رو میگیره و میخونه و نیازی نیست که همه کد های شما لود بشه. همچنین چون مرورگر فقط فایل جاوااسکریپت قبول میکنه، اگه لازم باشه vite میتونه کد شما رو transpile کنه و به مرورگر تحویل بده که توی خوندن اونا مشکلی پیش نیاد. پس هر چقدر هم کدتون بزرگ تر بشه مشکلی از نظر سرعت پیش نمیاد چون فقط کدهایی که لازم هست لود میشن برعکس وب پک که همه کد هارو لود میکنه و با بزرگ تر شدن پروژه اذیت کننده میشه.توجه کنید که این توضیحات برای دولوپمنت بود و vite برای بیلد پروداکشن فعلا از rollup استفاده میکنه و باندل شما رو درست میکنه. در آینده احتمالا از esbuild برای درست کردن بیلد پروداکشن استفاده میشه اما چون هنوز تکمیل نیست از اون به صورت پیش فرض استفاده نمیشه اما خودتون میتونین بجای rollup از اون استفاده کنید.خود vite به صورت پیش فرض میتونه jsx, vue, typescript, web assembly, json, static assets, css modules, scss رو هندل کنه و در صورت نیاز transpile کنه. برای مثال چون vite از esbuild استفاده میکنه، transpile کردن کد های تایپ اسکریت حدود 20-30 برابر سریع تر از کامپایلر خود تایپ اسکریپت انجام میشه ( البته یک سری تفاوت های ریز داره که اینجا میتونید بخونید). در نتیجه پس میتونین به راحتی این فایل هارو تحویل vite بدین بدون اینکه نیاز باشه از babel یا لودر خاصی استفاده کنید. همچنین vite یک سیستم پلاگین هم داره که اگر میخواین قابلیتی رو بهش اضافه کنید که به صورت پیش فرض وجود نداره دستتون باز باشه.حالا که با vite آشنا شدیم، چجوری به پروژه هامون اضافش کنیم؟ من اینجا مثالش رو برای create-react-app میگم اما این توضیحات برای هر پروژه ای یکسان هست و فرقی نداره.1. ابتدا vite رو نصب میکنیم و فایل package.json رو تغییر میدیم که ازش استفاده کنه:$ npm install --save-dev vite&quotscripts&quot: { &quotstart&quot: &quotvite&quot, &quotbuild&quot: &quotvite build&quot, }2. بعدش باید فرمت همه فایل های کامپوننت هاتون رو به jsx یا tsx تبدیل کنید. دلیل این کار رو میتونین اینجا بخونین.3. حالا باید فایل index.html رو از پوشه public به روت پروژه بیارین ( یعنی جایی که package.json هست). دلیل این کار اینه که vite مثل یک سرور عمل میکنه و از این فایل به عنوان entry point پروژه شما استفاده میکنه نه مثل create-react-app که این فایل براش مثل یک تمپلیت هست که پروژه رو داخلش قرار بده.4. حالا باید هر جا داخل فایل index.html از "%PUBLIC_URL%" استفاده شده پاک بشه. یعنی برای مثال:<link rel=&quoticon&quot href=&quot%PUBLIC_URL%/favicon.ico&quot />تبدیل میشه به:<link rel=&quoticon&quot href=&quot/favicon.ico&quot />همچنین در نهایت توی فایل index.html قبل از بسته شدن تگ body باید یک تگ اسکریپت از نوع module اضافه کنید که به فایلی که پروژه اتون از اون شروع میشه اشاره بکنه. برای مثال این شکلی میشه:<body> <div id=&quotroot&quot></div> <script type=&quotmodule&quot src=&quot/src/index.jsx&quot> </body>تبریک میگم حالا میتونین از vite استفاده کنین :) این تنظیمات با خودش HMR نداره اما اضافه کردنش ساده اس و میتونین از اینجا پیش بگیرینش.روی سیستم ویندوزی خودم یه پروژه تازه درست شده با create-react-app حدود 2 دقیقه و 5 ثانیه طول میکشه استارت اولیه اش در حالی این زمان با vite حدودا 0.5 ثانیه طول میکشه. یعنی 250 برابر سریع تر!! البته این صرفا برای من هست و برای بقیه ممکنه cra سریع تر استارت بشه.همچنین اگر میخواین باهاش ssr انجام بدین هم، کارتون خیلی راحته و میتونین از روی راهنمای خود vite پیش برین یا اینکه از این پلاگین استفاده کنین که کارتونو راحت تر هم میکنه.اگه میخواین کلا قید create-react-app بزنین و با vite از اول جلو برین هم میتونین از این دستور استفاده کنید و از بین تمپلیت هایی که برای فریم ورک های مختلف داره یکی رو انتخاب کنید و شروع کنید:$ npm init @vitejs/appاگر میخواین با vite یه تجربه شبیه به create-react-app داشته باشین هم میتونین از تمپلیت خودم استفاده کنید که چیزایی مثل jest و eslint رو کانفیگ کرده و برای vite یک سری تنظیمات و پلاگین ها اضافه کرده که شبیه create-react-app بشه. https://github.com/POORYAJ/react-vite-template امیدوارم وقتتون مفید سپری شده باشه. POORYAJ POORYAJ Wed, 17 Mar 2021 18:56:45 +0330 https://virgool.io/@pooryaj/%D8%A8%D9%88%D8%B1%D8%AF-%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C-%D8%A8%D9%87-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-t7oydqxsggc2 از اونجایی که تعداد زیادی دانشجو دیدم که کارشون لنگ مونده بود به نظرم شاید بد نباشه توی این شرایط این بورد رو درست کنیم. اگه کسی درخواستی داره توی کامنت ها بگه و اگه کسی از خارج از کشور داره این پست رو میبینه کامنت هارو بخونه و بنا به وقت و حوصله اش اونهارو انجام بده. دوستانی که میخوان درخواست بدن لطفا درخواست هارو ساده نگه دارن و دقیق بیان کنن چیزی که میخوان رو تا کسانی که میخوان انجامش بدن به دردسر نیفتند چون لزوما بقیه ممکنه دانش فنی شما رو نداشته باشند و چیز هایی که برای شما بدیهی هست برای اونها پیچیده باشه پس رعایت حال بقیه رو بکنین تا احتمال به جواب رسیدنتون بیشتر شه :)اگه در حد کپی پیست کردن تیکه ای کد باشه که همین قسمت کامنت ها بس هست ولی اگه کسی به جزوه یا فایلی نیاز داره از سرویس picofile.com میشه استفاده کرد برای اپلود و دانلود فایل. لطفا از درخواست فایل های خیلی سنگین و غیرضروری جلوگیری کنین تا حدممکن، که دردسر نباشه برای اون دوستانی که میخوان زحمتش رو بکشندرنهایت هم اینکه پست رو بالا نگه دارین و به بقیه هم اطلاع بدین :) POORYAJ POORYAJ Mon, 18 Nov 2019 15:15:57 +0330 https://virgool.io/@pooryaj/%D8%A7%D8%B2-%D8%AF%D8%B3%D8%AA-%D8%AF%D8%A7%D8%AF%D9%86-%DA%A9%D8%A7%D9%85%D9%84-%D8%A7%D8%B9%D8%AA%D9%85%D8%A7%D8%AF-%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%D8%A8%D8%AF%D8%AA%D8%B1%DB%8C%D9%86-%D8%AE%D8%B1%DB%8C%D8%AF-%D8%B9%D9%85%D8%B1%D9%85-%D8%AA%D9%88%DB%8C-%D8%AF%DB%8C%D8%AC%DB%8C-%DA%A9%D8%A7%D9%84%D8%A7-nwv3r2b0sybt چند وقتی بود که میخواستم یه گیم پد بخرم چون موقع گیم زدن دچار مشکل میشدم و همچنین چون یه حساسیت خاصی نسبت به کیبورد لپ تاپم داشتم حس میکردم بهتره اینجوری از خراب شدن زود هنگامش جلوگیری کنم. خب طبیعتا اولین انتخاب چی بود؟ دیجی کالا! بعد از اینکه یه چرخی بین کالا ها زدم با قیمتای خیلی عجیب غریب کالا ها رو به رو شدم که البته بخاطر بالا رفتن قیمت دلار طبیعی بود ولی خب بازم شوکه ام کرد. بعد از مدتی گشتن یه گیم پد پیدا کردم که به نظرم همون چیزی بود که میخواستم ولی خب یه مشکلی این وسط بود و اونم این بود که فروشنده اش دیجی کالا نبود! شاید شما هم اون فیلمی که چند وقت پیش دست به دست میشد رو دیده باشین که یک نفر تعدادی هدفون به اسم هدفون اوریجینال از دیجی کالا خریده بود ولی همشون فیک بودن. من با استناد به اون کلیپ دو دل شده بودم که نکنه این بلا سر من هم بیاد ولی خب گفتم دیجی کالا با این همه عظمت باید یه نظارتی رو کالا ها و فروشنده هاش داشته باشه و لابد برخوردش با اون فروشنده فیک فروش اینقد قاطع بوده باشه که کسی چنین کاری نکنه دیگه. خلاصه دل رو زدم به دریا و این گیم پد رو خریدم به قیمت 125 هزار تومن که البته الان کمی پایین تر اومده قیمتش و طبق چیزی که گفته شده و عکس هایی که براش هست باید گیم پد ایکس باکس 360 مدل سیم دار مخصوص ویندوزش باشه.چیزی که باید می بودحدودا یک هفته گذشت و چیزی که سفارش داده بودم رسید اما هر چیزی بود به جز اون چیزی که توی سایت گفته بود. یک دسته چینی مارک p-net که به شدت بی کیفیت بود و حتی یکی از دکمه هاش کار هم نمیکرد درست و حسابی و تنها شباهتش به چیزی که توی سایت هست رنگ دکمه هاش بود!چیزی که واقعا بود!چیزی که تجربه خریدمو بدتر از سابق کرد هم این بود که چند روز بعد توی یکی از مغازه های شهر وقتی دقیقا همین مدل دسته رو دیدم و قیمت گرفتم بهم گفتن 35 هزار تومن!!! و حتی بدتر از اون توی خود دیجی کالا هم همین دسته موجود هستش با قیمت 55 تومن ولی کسانی تصمیم گرفتن اون رو با عکس و اسم دسته ایکس باکس 360 بفروشن و دیجی کالا هم مثل اینکه براش مهم نیست حتی با اینکه توی کامنت ها گفته شده که دسته فیک هست!!برای نتیجه گیری چیزی که برای من کاملا مشخصه اینه که هیچوقت دیگه از دیجی کالا خرید نکنم و اگه براتون سوال هست که چرا با پشتیبانی هم مطرح نکردم بخاطر اینه که یه سری مشکلات این وسط پیش اومد که گفتنش گزافه گویی و چیزی به داستان اضافه نمیکنه. فقط یه سری مسائل از سمت خودم بودن بودن که باعث شد من نتونم سمت پشتیبانی برم که گرچه اگر هم میرفتم فکر نکنم پاسخ خاصی دریافت میکردم چون توی تجربه های مشابهی که در اطراف خودم دیدم ارتباط برقرار کردن با پشتیبانی دیجی کالا فقط دردسر مضاعف بوده!پ.ن: چند وقت پیش هم تجربه ای مشابه با دیجی کالا داشتم که قیمت لپ تاپی که قصد خریدش رو داشتم در دیجی کالا 6 میلیون و 800 هزار تومن بود ولی من خودم از مغازه های محلی خریدم 5 میلیون و 400 هزار تومن.خلاصه امیدوارم دیجی کالا واقعا یه تکونی به خودش بده و این اشتفته بازاری که راه انداخته رو سر و سامون بده شاید دوباره تونست اعتمادی که زمانی بین مردم داشت رو به دست بیاره POORYAJ POORYAJ Sun, 19 Aug 2018 18:49:50 +0430