نوشته های علی موسویان

تفاوت type و interface در typescript، از کدوم استفاده کنم؟

علی موسویان — Tue, 09 Jan 2024 10:42:48 +0330

وقتی من شروع کردم به یادگیری typescript یه سوالی خیلی سریع ذهنم رو مشغول کرد، که آقا فرق type و interface چی هست اصلا؟ جفتشون مگه باعث تعریف تایپ و ایجاد یه نوع type safety نمیشن؟پس چرا دو نوع سینتکس متفاوتن؟ تو چه موقعیتی باید از کدوم استفاده کرد؟ اگه جفتشون یکار رو انجام میدن، پس بهتر نیست ببینم کدومش flexible تره و بچسبم به همون؟ اینجوری سردرد یادگیری یه سینتکس دیگه هم ندارم خب پس شروع کردم ببینم این دو تا چه تفاوتایی دارن باهم که باعث شده دو تا سینتکس واسه انجام یه کار ایجاد بشه؟ البته اینکه برنامه نویس جماعت درگیر غول آخر مصاحبه ـست و ماشالا مصاحبه کننده‌هام قربونشون برم از شیر مرغ تا جون آدمیزاد رو تو مصاحبه ها ازت میکشن بیرون تو تصمیمم بی‌تاثیر نبود.بیاید اول با این شروع کنیم که چرا اصلا این سوال پیش میاد که تفاوت این دو تا با هم چی هست؟ مگه جفتشون چقدر میتونن کارای همدیگه رو انجام بدن؟ برای جواب دادن به این سوال اول باید یکم با جفتشون آشنا بشیم.خب بیاید با type شروع کنیم، کلمه type تو typescript یه keyword ـه و تایپ هایی که ما میسازیم، type alias هستن، اینی که گفتم اصلا یعنی چی؟ ببینید type ها تو typescript شامل اینا میشن:StringNumberBooleanArrayTupleEnumAdvanced typesباقی چیزهایی که ما میسازیم type alias هستن که یعنی این امکان رو میدن که ما اسمی رو که میخوایم به یه تایپ خاص یا مجموعه‌ای از تایپ ها بدیم و باعث افزایش code readability بشیم.ما میتونیم از type ها برای function & objects & variables ـهامون استفاده کنیم. ما میتونیم با استفاده کردن از تایپ ها (string یا boolean یا number یا ...) یا ساختن تایپ اختصاصی ـمون نشون بدیم که data ما قراره چه شکلی بشه. بیاید یه چندتا مثال برای type ببینیم:در طرف مقابل ما interface هارو داریم که یه سینتکس ـه که از طریقش فقط نشون بدیم که data ـمون تو یه object قراره چجوری باشه، دقت کنید، فقط تو object ها.خب تا اینجای داستان ممکنه با خودتون بگید که خب چه کاریه، اینجوری که بنظر میاد type نسبت به interface از flexibility بیشتری برخورداره درحالی که interface فقط object رو ساپورت میکنه پس بینگو، همینو انتخاب کنیم و بریم جلو، ولی خب قبلش بیاید شباهتای جفتشون رو باهم بررسی کنیم.- Type safety:خب بیاید بگیم که ما فعلا فقط میخوایم نمایش بدیم data ـمون قراره چه شکلی باشه، جفتشون میتونن اینو هندل کنن و سینتکس ـشون هم تقریبا یکیه.- Type combination:اگه بخوایم چندتا پراپرتی چندتا type یا interface رو باهم ترکیب کنیم چی؟ خب، جفتشون میتونن اینم انجام بدن.با استفاده از type ها میتونیم اینجوری انجامش بدیم: و تو interface هم به این شکل انجام میشه:بیاید حالا برای فانکشن ـا همینو بررسی کنیم، جفتشون میتونن به این شکل فانکشن ـاروهم ساپورت کنن:ولی خب مگه ما یکم بالاتر نگفتیم که interface فقط مختص object ـاست، این که فانکشنه، دلیل اینکه میتونیم از interface برای فانکشن ها استفاده کنیم اینه که یه فانکشن در حقیقت یه object ـه تو javascript.و در نهایت اگه بخوایم تو class ها بررسیشون کنیم نتیجه میشه این:خب به حد کافی راجب شباهتاشون حرف زدیم، حالا بیاید ببینیم چه تفاوت هایی باهم دارن:بزارید با type شروع کنیم، یکارایی هست که امکان انجامش با interface وجود نداره، به عنوان مثال اگه شما بخواین یه type alias بسازید و فقط یکی از core type هارو بهش بدید، اینکار با interface امکان پذیر نیست ولی با type شدنیه.حالا اگه بخوایم همینو تو interface دربیاریم سینتکسش میشه یچیزی تو مایه های زیر:که در نظر داشته باشید این کار نمیکنه و کامپایلر براتون اررور میده، فقط خواستم محض اینکه سوال شده باشه آیا به این شکل ممکنه یا نه بهتون نمایشش بدم.مورد دیگه‌ای که تو type ها وجود داره و تو interface نه بحث union ـه، که با استفاده ازش میشه تایپ های شخصی سازی شده‌تری بسازی.مورد دیگه‌ای که وجود داره این ـه که تو typescript یه سری ویژگی های متنوع و پیچیده برای type ها در نظر گرفته شده که خب تو interface وجود نداره که شامل ویژگی هایی زیر میشه:type inferenceconditional typestype guardsmapped typesUtilities typesیه ویژگی که تو interface هست و تو type ها نه، بحثیه به اسم declaration merging که درواقع یعنی اگه شما چند interface هم‌ نام داشته باشید، کامپایلر تمامیش رو میگیره و در نهایت همه ـشون رو باهم merge میکنه.در نهایت اگه بخوایم یه نتیجه گیری داشته باشیم این ـه که جفتشون type safety خوبی برای ما فراهم میکنن، تو بیشتر موارد میتونیم از این دوتا به جای همدیگه استفاده کنیم ولی برای استفاده از بعضی ویژگی ها مثل union یا declaration merging یا تفاوت هایی که بالا ذکر شده نیاز به استفاده از شیوه مشخصشه، در نهایت این use case و code base شماست که انتخابتون رو مشخص میکنه.

LocalStorage VS SessionStorage VS Cookies

علی موسویان — Sat, 06 Jan 2024 10:09:34 +0330

سلام، تو این پست میخوایم تفاوتای بین localStorage و SessionStorage و Cookies رو بررسی کنیم و ببینیم که تو موقعیت های متفاوت بهتره از کدوم متد برای ذخیره و کش داده ها تو سمت کلاینت استفاده بشه.1) localStorage :خب ما میتونیم از طریق localstorage یه سری داده هارو تو سیستم کلاینت ذخیره کنیم. لوکال استوریج بهمون این امکان رو میده که داده هارو بصورت key/value تو سیستم کلاینت ذخیره کنیم و expiration date هم نداره که یعنی این دیتا از بین نمیره مگه اینکه ما خودمون از طریق کد اونو پاک کنیم یا کاربر خودش بصورت دستی از مرورگرش کل دیتا یا بخشیش رو پاک کنه. خب بیاید مزایا و معایب localStorage رو بررسی کنیم.مزایا: میتونیم داده‎‌هامون رو بدون expiration date تو سمت کلاینت ذخیره کنیم.یه فضای ذخیره سازی تا حدود 5MB برامون داره.داده‌های ذخیره شده بصورت پیش‌فرض به سرور ارسال نمیشن، مگه اینکه خودمون بخوایم.معایب: هنگام ذخیره سازی value های ما بصورت string ذخیره میشن که از لحاظ امنیتی زیاد جالب نیست، البته که خودمون میتونیم encrypt و decrypt کنیم، ولی به عبارتی by design امنیت جالبی نداره.همونطور که تو مورد قبلی گفتیم، value های ما باید بصورت string ذخیره بشن که یعنی اگه شما بخواید یه object رو تو لوکال استوریج کاربر ذخیره کنید باید هر بار اون رو استرینگ کنید و هنگام استفاده ازش هم parse ـش کنید.const data = { name: 'JohnDoe', age: 23 } // به منظور ذخیره سازیش تو لوکال استوریج localStorage.setItem('testData', JSON.stringify(data)) // و حالا اگه بخوایم از همون استفاده کنیم const savedData = JSON.parse(localStorage.getItem('testData'))فقط میشه سمت کلاینت به این value ها دسترسی داشت که یعنی تو سمت سرور قابل دسترسی نیستن.متدهای موجود در LocalStorage : ایجاد Value: با این متد یه پراپرتی با key و value ای که بهش پاس داده شده داخل لوکال استوریج ساخته میشه.localStorage.setItem('Name', "John Doe")به عنوان مثال از طریق این کد یه پراپرتی تو لوکال استوریج ایجاد کردیم با key:Name و Value:John Doe.دریافت Value ایجاد شده: تو این متد کافیه key پراپرتی که قبلا ایجاد کردیم رو وارد کنیم و به value ای که تو لوکال استوریج ذخیره شده دسترسی پیدا کنیم، اینو در نظر داشته باشید که اگه value ای با اون اسم تو لوکال استوریج نباشه null برگردونده میشه. localStorage.getItem('Name')حذف Value:با این متد ما میتونیم Value ای که از قبل تو لوکال استوریج ایجاد شده رو حذف کنیم. فقط کافیه key پراپرتی رو بهش پاس بدیم.localStorage.removeItem('Name')حذف تمامی موارد:با این متد میتونیم تمامی پراپرتی های ایجاد شده تو لوکال استوریج رو بصورت یکجا حذف کنیم.localStorage.clear()2) sessionStorage:خب sessionStorage هم همونطور که از اسمش مشخصه، فقط مختص یک session ـه، یعنی تا زمانی value ها وجود دارن که کاربر یا مرورگر رو ببنده یا تب‌ای که این value ها درش ایجاد شده، اگه بخوایم یه نگاه کلی بهش داشته باشیم:داده رو فقط برای اون session ذخیره میکنه که یعنی داده تا زمانی موجوده که کاربر تب یا مرورگر رو ببنده.داده‌های ذخیره شده بصورت پیش‌فرض به سرور ارسال نمیشن، مگه اینکه خودمون بخوایم.یه فضای ذخیره‌سازی بین 5MB-10MB بهمون میده.باز کردن تب ها یا ویندو های متفاوت با همون url باعث ایجاد sessionStorage های اختصاصی برای هرکدومشون میشه.متدهای موجود توش مشابه متدهای localStorage هستن.متدهای موجود در sessionStorage: ایجاد Value: با این متد یه پراپرتی با key و value ای که بهش پاس داده شده داخل سشن استوریج ساخته میشه.sessionStorage.setItem('Name', "John Doe")به عنوان مثال از طریق این کد یه پراپرتی تو سشن استوریج ایجاد کردیم با key:Name و Value:John Doe.دریافت Value ایجاد شده: تو این متد کافیه key پراپرتی که قبلا ایجاد کردیم رو وارد کنیم و به value ای که تو سشن استوریج ذخیره شده دسترسی پیدا کنیم، اینو در نظر داشته باشید که اگه value ای با اون اسم تو سشن استوریج نباشه null برگردونده میشه. sessionStorage.getItem('Name')حذف Value:با این متد ما میتونیم Value ای که از قبل تو سشن استوریج ایجاد شده رو حذف کنیم. فقط کافیه key پراپرتی رو بهش پاس بدیم.sessionStorage.removeItem('Name')حذف تمامی موارد:با این متد میتونیم تمامی پراپرتی های ایجاد شده تو سشن استوریج رو بصورت یکجا حذف کنیم.sessionStorage.clear()3) Cookies:خب کوکی ها تکست فایل هایی هستن که معمولا برای مقاصد احراز هویت و user tracking و داشتن preference های کاربر ایجاد و ذخیره میشن، میشه گفت بزرگترین مزیت Cookie ها نسبت به سشن استوریج و لوکال استوریج این ـه که از طریق سرور هم قابل دسترسی هستند. اگه بخوایم یه نگاه کلی بهش داشته باشیم:یه فضای ذخیره سازی تا 4kb برامون فراهم میکنن.تو هر ارسال ریکوئست به سرور به header ریکوئست attach میشن و یکی از دلایل اصلی که فضای ذخیره‌سازی خیلی پایینی هم دارن بخاطر همینه که همراه هر ریکوئستی به سرور ارسال میشن.مزیت مهمشون این ـه که توسط Server هم قابل دسترسی هستن در حالی که سشن استوریج و لوکال استوریج فقط تو سمت کلاینت قابل دسترسی ـن.برخلاف sessionStorage و localStorage که فقط تو HTML5 ساپورت میشن، کوکی ها HTML4 رو هم ساپورت میکنن.کوکی ها Expiry date دارن، به این معنی که برخلاف لوکال استوریج که باید توسط کد یا خود کاربر پاک بشن یا سشن استوریج که محدود به همون سشن هستن، کوکی ها بصورت خودکار وقتی ExpiryDate ـشون رد شد، از بین میرن که میتونه بر اساس کاری که میخواید بکنید نکته‌ی مثبتی باشه.میشه با ست کردن فلگ HttpOnly به True کاری کرد که کوکی ها تو سمت کلاینت قابل دسترسی نباشن که باعث افزایش امنیت در مقابل XSS attack هاست.خب حالا شاید براتون سوال شده باشه که چجوری میتونیم از Cookie ها استفاده کنیم. ایجاد و ویرایش و گرفتن Value و حذف Cookie ها به سرراستی localStorage و sessionStorage نیستن و ممکنه یکم پیچیده بنظر برسن که هرچی بیشتر باهاشون کار کنیم، برامون راحتتر میشن.ایجاد Cookie: برای ایجاد کوکی میتونیم از کد زیر استفاده کنیم که توش key:userName ـه و value:John Doe = "username=John Doe"میتونیم از این طریق بهش expiryDate اضافه کنیم = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC"و از طریق پارامتر Path هم میتونیم مشخص کنیم که کوکی به کدوم path تعلق داره، اگه value ای براش ارائه نشه بصورت دیفالت صفحه ای که توش ایجاد شده جاش رو میگیره = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/"دریافت Value ایجاد شده:برای اینکار میتونیم از تیکه کد زیر استفاده کنیم، فقط اینو در نظر داشته باشید که این تمامی کوکی هارو برمیگردونه و خودمون باید value ای که میخوایم رو parse کنیم. معمولا هنگام استفاده از این value ها یا یه فانکشن برای parse کردنشون مینویسن یا از third party library هایی استفاده میکنن که سینتکس به مراتب ساده‌تری نسبت به این دارن.let AllCookies = ;حذف کوکی:برای اینکار درست مثل ایجاد یه کوکی رفتار میکنیم با این تفاوت که Expiry date رو به یه تاریخ تو گذشته ست میکنیم که بصورت خودکار باعث حذفش بشه، اینو در نظر داشته باشید که بهتره path کوکی رو هم بهش پاس بدیم تا مطمئن بشیم کوکی درست حذف میشه و همینطور بعضی از مرورگرها اجازه حذف کوکی بدون مشخص کردن path رو نمیدن. = "username=John Doe; expires=Thu, 18 Dec 2012 12:00:00 UTC; path=/"در نهایت اگه بخوایم یه نگاه کلی به این تفاوت ها داشته باشیم، میتونیم از عکس زیر استفاده کنیم:

20 متد برای کار با آرایه ها در Javascript

علی موسویان — Thu, 07 Jul 2022 21:33:00 +0430

تو این مقاله میخوام بیست تا متد رو بهتون معرفی کنم که کار کردن با آرایه هارو برامون راحتتر میکنن، این متدها چیزایی هستن که تو خود جاوا اسکریپت موجوده و ما میتونیم رو آرایه هامون اعمال کنیم، هر متد یا تغییراتی رو آرایه ما اعمال میکنه یا محاسباتی روش انجام میده و باعث میشه دیگه نیازی نباشه برای اینکارا خودمون از اول یه سری فانکشن بنویسیم.1- map()این متد یه آرگومان به عنوان تابع کال بک دریافت میکنه و اون رو روی تک تک عناصر آرایه اعمال میکنه و بهمون یه آرایه جدید میده، و هیچ اثر جانبی رو آرایه قبلیمون نداره و فقط برامون یه آرایه جدید میسازه و برش میگردونه.const arr = [1, 2, 3, 4, 5] const mapped = arr.map(item => item + 10) console.log(mapped) // [11, 12, 13, 14, 15]2- filter()این متد برامون یه آرایه جدید میسازه البته اگر آیتم های موجود تو آرایه اصلیمون، شرطی که به فیلترمون پاس داده شده رو بتونن درست رد کنن.const arr = [1, 2, 3, 4, 5] const filtered = arr.filter(item => item % 2 === 0) console.log(filtered) // [2, 4]3- sort()این متد همونطور که از اسمش هم مشخصه برای مرتب سازی یه آرایه یا بصورت نزولی یا بصورت صعودی استفاده میشه.const arr = [1, 2, 3, 4, 5] const descend = arr.sort((a, b) => a > b ? -1 : 1) console.log(descend) // [5, 4 ,3 ,2 , 1]4- forEach()این متد فانکشن کال بک ای که بهش داده میشه رو روی تک تک آیتم های یه آرایه اعمال میکنه.const arr = [1, 2, 3, 4, 5] arr.forEach(item=>{ console.log(item) }) // 1 // 2 // 3 // 4 // 55- concat()این متد دو یا چند آرایه رو باهم ادغام میکنه و یه آرایه جدید بهمون برمیگردونه، بدون اینکه اثر جانبی رو آرایه های اصلیمون گذاشته باشه و باعث تغییرشون بشه.const arr = [1, 2, 3] const arr2 = [4 , 5, 6] console.log(arr.concat(arr2)) // [1, 2, 3, 4, 5, 6] console.log(arr) // [1, 2, 3] console.log(arr2) // [4, 5, 6]6- every()این متد تمامی آیتم های درون آرایه رو با شرطی که بهش پاس داده شده بررسی میکنه و نسبت به بررسی همه ـشون به ما true یا false برمیگردونه، نکته‌ی مهم اینه که حتی اگر یه آیتم نتونه از شرط ما رد بشه، نتیجه ای که برگردونده میشه false خواهد بود.const arr = [1, 2, 3, 4, 5] const lessThanSix = arr.every(item=> item< 6) console.log(lessThanSix) // true const lessThanFive = arr.every(item=> item< 5) console.log(lessThanFive) // false7- some()این متد تمامی آیتم های درون آرائه رو با شرطی که بهش پاس داده شده بررسی میکنه و اگه حداقل یکی از آیتما بتونه شرط رو رد کنه، نتیجه true برمیگردونه و درغیر اینصورت false.const arr = [1, 2, 3, 4, 5] const lessThanNum= arr.some(item=> item < 5) console.log(lessThanNum) // true const greaterThanNum = arr.some(item=> item> 5) console.log(greaterThanNum ) // false8- includes()این متد بررسی میکنه ببینه چیزی که بهش پاس داده شده تو آرایه موجود هست یا نه و نسبت به اون true یا false برمیگردونه.const arr = [1, 2, 3, 4, 5] const includesFive = arr.includes(5) console.log(includesFive) // true const includesSix = arr.includes(6) console.log(includesSix) // false9- join()این متد با وصل کردن تمامی آیتم های تو آرایه و جدا کردنشون با چیزی که به عنوان آرگومان بهش پاس دادیم یه string بهمون برمیگردونه.const arr = ["a", "b", "c"] const joinedString = arr.join(``) console.log(joinedString) // abc const joinedStringWithDash = arr.join(`-`) console.log(joinedStringWithDash) // a-b-c10- reduce()این متد تمامی مقادیر داخل آرایه رو با فانکشنی که بهش داده شده نسبت به یه مقدار اولیه اعمال میکنه تا تمامی آیتم های داخل آرایه رو به یک آیتم کاهش بده.const arr = [1, 2 ,3 ,4 ,5] const reduced = arr.reduce((total, current) => total + current); console.log(reduced) // 1511- find()همونطور که از اسمش مشخصه، این متد کال بک فانکشنی رو که بهش پاس داده شده رو روی تک تک آیتم های آرایه بررسی میکنه تا اینکه یکی از آیتم ها بتونه شرط رو رد کنه و به محض اینکه اون شرط رد میشه همون آیتم برگردونده میشه، به عنوان مثال ممکنه شما تو آرایه چندین آیتم داشته باشید که میتونه شرط رو رد کنه، ولی این متد فقط اولین آیتمی که شرط رو رد کرده باشه رو برمیگردونه.برای داشتن تمامی آیتم ها که اون شرط رو رد میکنن میتونید از متد filter استفاده کنید.const arr = [1, 2, 3, 4, 5] const greaterThanTwo = arr.find(item=> item>2) console.log(greaterThanTwo) //312- findIndex()این متد درست مثل متد find رفتار میکنه با این تفاوت که index اون آیتم رو تو آرایه بهمون برمیگردونه.const arr = ["a", "b", "c"] const foundIndex = arr.findIndex(item=> item=== "c") console.log(foundIndex) // 213- indexOf()این متد index آیتمی که بهش پاس داده شده رو بهمون برمیگردونه یا در صورتی که نتونه چیزی پیدا کنه 1- رو بهمون برمیگردونه.const arr = ["a", "b", "c"] const foundIndex = arr.indexOf("c") console.log(foundIndex) // 2 const noIndex = arr.indexOf("d") console.log(noIndex ) // -114- fill()این متد آرایه مارو با چیزی که بهش پاس داده میشه پر میکنه و آرایه تغییر داده شده رو برمیگردونه.const arr = new Array(3) console.log(arr) // [undefined, undefined, undefined] console.log(arr.fill(10)) // [10, 10, 10]15- slice()تو این متد ما میتونیم با مشخص کردن ابتدا و انتهایی که میخوایم از آرایه برداریم، یه آرایه جدید برای خودمون برگردونیم.const arr = [1, 2, 3, 4, 5, 6] const sliced = arr.slice(2, 4) console.log(sliced) // [3, 4] console.log(arr) // [1, 2, 3, 4, 5, 6]16- reverse()این متد همونطوری که از اسمش مشخصه یه آرایه رو از آخر به اول بازنویسی میکنه، که یعنی آیتمی که آخرین ایندکس رو داره میاد میشه ایندکس 0 و آیتمی که ایندکس 0 رو داشته میشه آخرین ایندکس.const arr = ["a", "b", "c"] arr.reverse() console.log(arr) // ["c", "b", "a"]17- push()این متد یک یا چند آیتم رو به آخر یه آرایه اضافه میکنه.const arr = ["a", "b", "c"] arr.push("d") console.log(arr) // ["a", "b", "c", "d"] 18- pop()این متد آخرین آیتم رو از آخر آرایه حذف میکنه.const arr = ["a", "b", "c"] arr.pop() console.log(arr) // ["a", "b"]19- shift()این متد اولین آیتم رو از ابتدای آرایه حذف میکنه.const arr = ["a", "b", "c"] arr.shift() console.log(arr) // ["b", "c"]20- unshift()این متد یک یا چند آیتم رو به اول آرایه اضافه میکنه و تعداد آیتمای موجود تو آرایه رو بهمون برمیگردونه.const arr = ["a", "b", "c"] console.log(arr.unshift("z")) // 4 console.log(arr) // ["z", "a", "b", "c"]

3 روش برای افزایش کارایی و بهره وری در Vue

علی موسویان — Mon, 04 Jul 2022 14:53:34 +0430

سلام، تو این مقاله میخوام به سه روش برای افزایش بهره وری و کارایی اپلیکیشن های Vue اشاره کنم.1) استفاده از lazy loadingخب همونطور که از اسمش مشخصه، lazy loading یه متد برای بارگذاری module های مختلفه وقتی که کاربر بهش نیاز داره و نه بصورت پیش فرض، بیشتر اوقات ما نیاز نداریم که تمامی module های موجود تو javascript bundle رو زمانی که کاربر وارد سایت میشه بارگذاری کنیم.بیشتر module های ما برای مثال modal و tooltip هایی دارن که میشه فقط زمانی که بهشون نیاز هست لود بشن، البته اگه پروژه شما فقط چندتا modal و tooltip داشته باشه، زیاد متوجه تغییر در پرفورمنس نمیشید، ولی در نظر بگیرید که پروژه‌ی پیچیده و سنگین با چندین نوع modal و tooltip متفاوت دارید، با پیاده سازی lazy loading نه تنها این بخش از کد دیگه دانلود نمیشه بلکه با parse شدن اون کد زمانی که بهش نیاز هست، میتونه باعث افزایش سرعت بارگذاری صفحه و در کل کمتر شدن مصرف resource هاتون بشه.حالا چجوری پیاده سازیش کنیم؟ما در حالت عادی وقتی میخوایم از یه کامپوننت یا فانکشن یا ... استفاده کنیم به این صورت عمل میکنیم.// helloWorld.js const HelloWorld= { sayHello: function () { console.log("Hello World") } } export default HelloWorld // app.js import HelloWorld from './helloWorld.js' HelloWorld.sayHello()کاری که اینجا انجام میشه این ـه که فایل helloworld.js بصورت یه node به app.js اضافه میشه و با اینجوری اضافه کردنش باعث bundle شدن این دو تا فایل باهم میشیم، پس هروقت app.js بارگذاری بشه، helloWorld.js هم پشت بندش بارگذاری میشه، بی اهمیت به اینکه نیازی هست بهش یا نه.ولی اگه بخوایم فقط helloWorld.js رو در نتیجه نیاز یه کاربر بارگذاری کنیم چی؟ برای اینکار ازdynamic importing استفاده میکنیم، خب چجوری؟ بیاید کد بالارو اینبار با dynamic importing بنویسیم.// app.js const getHelloWorld= () => import('./helloWorld.js') // later when user needs it getHelloWorld() .then({ sayHello} => sayHello())همونطور که میبینید به جای اینکه مستقیم helloWorld رو import کنیم یه فانکشن نوشتیم که return ـش کنه، اتفاقی که الان میوفته این ـه که webpack متوجه میشه باید helloWorld رو تو یه فایل مجزا نگه داره و بعد هم فانکشن getHelloWorld اونو به عنوان یه promise بهمون برمیگردونه، که در کل باعث حذف hello world از باندل میشه و بعد در صورت نیاز دانلودش میکنه.استفاده از lazy loading میتونه تاثیر بسزایی تو کاهش سایز bundle شما داره و همینطور باعث افزایش پرفورمنس میشه.2) انجام code splitting بر اساس route های مختلففرض کنید دارید یه اپلیکیشن ساده vue با دو تا route میسازید و برای ساخت همین دو تا مسیر باید از vue-router استفاده کنید. فایل routing.js شما ممکنه همچین حالتی داشته باشه:// routing.js import Dashboard from './Dashboard.vue' import Contact from './Contact.vue' const routes = [ { path: '/', component: Dashboard } { path: '/contact, component: Contact } ]اتفاقی که میوفته اینجا چیه؟ کامپوننت های Dashboard & Contact بی اهمیت به اینکه تو کدوم route قرار دارید، دانلود میشن. شاید ما بخوایم هیچکدوم از این فایل ها در این صورت دانلود نشن، شاید براتون سوال بشه دو تا صفحه اضافی چه تاثیری قراره داشته باشه مگه؟ ولی بحث ما تو پروژه هایی با مقیاس بزرگه،خب برای حل این موضوع باید چیکار کنیم؟ میتونیم با جدا کردن کدامون از روش dynamic importing بیایم و یک سری bundle های مجزا بر اساس route ـمون ایجاد کنیم.حالا به جای اینکه کامپوننتامون رو بصورت مستقیم import کنیم، میایم و از روش dynamic importing استفاده میکنیم.// routing.js const routes = [ { path: '/', component: () => import('./Dashboard.vue') } { path: '/contact, component: () => import('./Contact.vue') } ]شاید باورتون نشه ولی با این روش میتونید سایز باندل پروژه ـتون رو تا نصف پایین بیارید، البته باید بدونید کدوم کامپوننتا بهتره بصورت مستقیم import بشن و کدومشون به طریق dynamic importing.3) انجام prefetch برای کامپوننتاین روش همونطوری که از اسمش هم مشخصه روشیه به منظور بارگذاری یک کامپوننت قبل از اینکه کاربر درخواستی بکنه، اگه به عنوان مثال مطمئن باشید که کاربر بعد از ورود به صفحه دسته بندی محصولات، وارد صفحه محصولات هم میشه، میتونید با استفاده از این متد اون کامپوننت رو قبل از درخواست کاربر بارگذاری کنید، این روش همینطور باعث میشه یک سری از عوارض جانبی lazy loading برطرف بشه، خب حالا چجوری باید پیاده سازیش کنیم؟< link rel="prefetch" href="url" />به همین سادگی، البته اگه پای webpack وسط باشه مسئله یکم پیچیده میشه، ولی خوشبختانه webpack یه magic comments داره که باهاش میشه حلش کرد، magic comments چی هست اصلا؟ بخوایم ساده بگیم یه سری کامنتایی که رو پروسه build تاثیر میزاره. برای prefetch کردن کامپوننت فقط کافیه اینکارو کنیم:components: { ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue') }حالا وقتی کد اجرا میشه، وب پک دنبال این magic comment ها میگرده و< link rel="prefetch" url="resource-url" />رو بهش اضافه میکنه.در نهایت اهمیتی نداره اپلیکیشن ما در چه اندازه‌ای هست، رعایت کردن این موارد باعث میشه که کاربر شما تجربه بهتری با اپلیکیشن شما داشته باشه.