متین تلخابی
متین تلخابی
خواندن ۲ دقیقه·۴ ماه پیش

سری سوال های فرانت : تکنیک هایی برای بهینه سازی فرانت

حذف Import های بلااستفاده :

مشخصا استفاده از برنامه های خارجی بدون استفاده سرعت لود سایت رو به صورت قابل توجهی کم می کنه توجه به این امر که از کد هایی که واقعا نیازه و بهینه هستن استفاده کنیم خیلی مهمه.

جداسازی کد ها و تقسیم به فایل های کوچیکتر :

مشخصا اگه کد هامون رو تقسیم کنیم توی فایل های دیگه که به صورت معنی دار هستن کمک خوبی هم به دیباگ کردن می کنه هم بخش توسعه سایت رو تسریع می کنه

استفاده از Lazy Loading برای لود کردن محتوا :

بعضی از بخش های سایت رو حتما لازم نیست همون اول که کاربر وارد می شه لود بشه ...

بهینه سازی فایل های برنامه با تکنیک های زیر :

استفاده از Tree Shaking

تکنیکیه که باهاش کد های استفاده نشده یا به اصطلاح Dead code رو از برنامه حذف می کنه و توی ماژول های ES6 استفاده می شه :

  1. تحلیل وابستگی ها : تمام ماژول های برنامه رو تحلیل می کنه تا ببینه کدوم قسمت واقعا مورد استفاده قرار گرفته نشده
  2. حذف کد های بلا استفاده : کد هایی که طبق تحلیل وابستگی مشخص شد که بلا استفاده هستن پاک می شن
  3. ساخت برنامه نهایی : با حذف کد های اضافی در بخش قبل برنامه سبک تر و کارآمد تر آمادست

استفاده از Compression

مورد استفاده ترین روش برای سبک تر کردن برنامه و ارسال روی سرور همینه که می بینید

معمولا بعد از اینکه کد نویسی پروژه به اتمام رسید قبل از اینکه روی سرور بفرستنش این کار رو انجام میدن

  1. استفاده از Gzip : با اکثر مرورگر ها سازگاری داره
  2. استفاده از Brotli : الگوریتم توسعه داده شده توسط گوگل معمولا نتایج بهتری نسبت به بالایی داره ولی هنوز اونقدر رایج نشده (البته تا الان ...)

استفاده از Minification

برنامه رو به نحوی بهینه می کنه که حجم کاهش پیدا می کنه بدون اینکه تغییری توی برنامه حاصل بشه :

  1. حذف فاصله ها و کامنت ها
  2. کوتاه کردن نام متغیر ها
  3. ترکیب کد ها


خلاصه توی این پست امدم یه سوال تقریبا مهم که برای فرانت کار ها مهمه رو جواب دادم

همونطور که میدونید فقط همین روش ها نیست اگه خواستید بیشتر در این باره مطالعه کنید می تونید دربارش سرچ کنید :)

منبع : ditty



کد نویسیبهینه سازیبرنامهفرانت اندفرانت
برنامه‌نویس Back End مسلط به زبان‌های TailwindCSS، JavaScript، Python و فریم‌ورک Django. مشتاق یادگیری و پیشرفت
شاید از این پست‌ها خوشتان بیاید