مهم ترین پلاگین های وب پک (webpack)

این چند ساله به دلیل پروژه های مختلفی که درگیرشون بودم، با پلاگین های مختلفی از وب پک سر و کله زدم. معمولا اگه سرچ کنید برای یه کار خاص، خیلی راحت و مستقیم به ابزارهاش دسترسی پیدا میکنید. ولی من اینجا واسه دلم، سعی میکنم به صورت تجمیعی از ابزارهای مختلفی که باهاشون کار کردم اسم ببرم. تقریبا همه شون رو میگم، حتی ساده و اساسی ترینش رو

1- mini-css-extract-plugin :

یک پلاگین ساده برای استخراج css به فایل های جدا از هم. این پلاگین به ازای هر فایل js که شامل css باشه، یه فایل css می سازه.

2- html-webpack-plugin :

پلاگینی برای ساده سازی ساخت فایلهای html ای که قراره باندل webpack شما را serve کنه. این پلاگین به شدت برای زمانی که از hash برای نام فایل هاتون استفاده می کنید کاربردیه. به صورت اتوماتیک تمامی dependency ها رو به فایل html شما متصل می کنه.

3- circular-dependency-plugin:

مواردی که دارای وابستگی چرخشی باشن مخصوصا در پروژه های بزرگ و پیچیده، اجتناب ناپذیر هستن. این ماژول در وب پک، تا حد خیلی زیادی مشکلات این مساله رو حل میکنه.

4- webpack-pwa-manifest:

یکی از نیازمندی های اصلی تو ساخت PWA، وجود فایل manifest.json هست. اطلاعاتی که برای معرفی اپلیکیشن مثل نام، آیکن ، ورژن و … هست در این فایل قرار میگیرند. این پلاگین به شما کمک میکنه تا این فایل به صورت اتوماتیک تولید شده و در باندل قرار بگیره. (یک سری تفاوت ها بین android و ios وجود داره که اگه از این پلاگین استفاده کنید دردش کمتره)

5- offline-plugin:

یکی دیگه نیازمندی های PWA ، وجود فایلservice worker هست. طبق این تجربه ی چندساله، شما دلتون نمی خواد سرویس ورکر رو خودتون بنویسید، باور کنید دلتون نمیخواد. پس بسپریدش به یه پلاگین تا براتون تولیدش کنه. دو تا انتخاب خیلی خوب وجود داره.

الف: workbox ب: offline-plugin . گزینه اول به صورت original توسط خود گوگل معرفی شده و خب قطعا می تونه انتخاب اول همه باشه، اما گزینه ی دوم هم در خود گوگل Recommend شده و طرفدارای زیادی داره. هر دوشون خوب و قدرتمند هستن. برای همین زیاد فرقی نمی کنه از کدوم استفاده کنید اما اگه خیلی بخوابین ریز بشین و کارای اساسی ازش بخواین، به نظرم با workbox برید جلو. اما خودم تو این سالا همه ش با Offline-plugin کار کردم ، خب باهاش راحت تر بودم.

6- terser-webpack-plugin :

در یه جمله، minify your JavaScript . تمامی کارهای مربوط به uglification و minimize کردن رو براتون هندل می کنه.

7- compression-webpack-plugin:

بعد از “زشت سازی” و minimize کردن پروژه تون، برای کاهش سایز فایل های js و سرعت بیشتر دانلودشون، “باید” فایل هاتون رو فشرده کنید. این پلاگین فایل های شماره با فرمت .gz فشرده می کنه. ( می تونین از brotli-webpack-plugin هم استفاده کنید، این پلاگین براتون فشرده سازی با فرمت .br انجام میده. فشرده سازی بهینه تری داره، گویا!)

8- preload-webpack-plugin:

اگه لود تایم و نمره ی lighthouse براتون مهمه، یکی از مهم ترین پلاگینا همینه. لود asynchronous فایل های js و chunk هایی که ساختین. این پلاگین به شما امکان لود همه ی فایل ها یا فقط فایل هایی که در لحظه نیاز دارین میده.تجربه ی شخصی من میگه اگه حجم پروژه تون کوچیکه، از سرویس ورکر استفاده میکنید و لودتایم خیلی براتون مهم نیست، همه فایل ها رو همون اول لود کنید. اما اگه سایز پروژه بالاست و لود تایم براتون مهمه از ویژگی lazyLoad این پلاگین استفاده کنین. خیلی راحت و بدون خون ریزی خودشون هندلش میکنن.

9- webpack-bundle-analyzer:

بهترین و زیباترین پلاگینی که دیدم. نصبش کنید از پروژه تون بیلد پروداکشن بگیرین. اون وقت روی پورت 8888 تمامی chunk هاتون رو در سه سایز عادی، minify و gz شده ببنید. محتوای هر فایل و اینکه شامل چه قسمت هایی هستن، حجم هر قسمت چیه و چه ماژول های خارجی درشون وجود دارن دیده میشه. بهترین ابزار برای ارتقا پرفورمنس و کاهش حجم پروژه

10- webpack-manifest-plugin:

اگه لیستی از تمامی asset های تولید شده در باندلتون نیاز دارین، به این پلاگین مراجعه کنید. یه لیست میسازه و یه فایل json بهتون تحویل میده.

11- copy-webpack-plugin:

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

نویسنده مطلب: محمدجواد سیدی

منبع مطلب