آموزش Webpack

نکته: اگه در هر جای مقاله فکر کردین اشتباهی کردم حتما حتما در کامنتا بگین، مرسی که هستین.Webpack دیگه چه کوفتیه؟جواب کوتاه: یک باندلر جاوا‌ اسکریپتجواب بلند:فرض کنید شما دارین یک اپ مینویسن و ۱۰۰ فایل js دارین٬ مرورگر مجبوره تک تک به تک تک این فایل ها ریکوست بزنه و بگیره، قیافه‌ Network اون لحظه خیلی دیدنیه بنظرم، دهنش سرویسه.حالا ما گفتیم ۱۰۰ فایل جی‌اس٬ فکر نکنین زیادن چون پروژه های گنده تر خیلی خیلی بیشتر فایل دارن و بماند که هنوز فایل های CSS و کتابخونه‌هایی که import کردیم وووو هم حساب نکردیم.اینجاست که باندلر‌ها میان وسط، که یکیشون Webpackهوب‌پک میاد همه‌ی فایل‌ها رو براساس نیازش جمع میکنه و میندازه داخل یه فایل جی‌اس و یه فایل CSS ووو.حالا شاید بگین خب دهن سرویس این فایل نهاییمون خیلی سنگین میشه، عجله نکنین چون اینجا که جریان Splitting میاد وسط.فرض کنید یه اپ گنده داریم که از دو بخش تشکیل میشه، ما میتونیم این دو بخش به دوتا فایل مختلف تقسیم کنیم یا حتی بیشتر، حالا این مهم نیست، مهم اینکه که میشه پروژمون به چندتا تیکه تبدیل کرد.ساختار زیر رو داشته باشیم فعلا بعنوان پروژه‌ی فرضیمون (مقدار پرانتزها به import شدن در اون فایل اشاره میکنه)دوتا اپ اصلی به اسم users و dashboard داریم و یه پوشه مشترک به اسم common، کاربران به users و ادمین‌ها به dashboard دسترسی دارن.ساختار فرضی پروژموناینم فایل webpack.config.js:فایل کانفیگ Webpackقراره در ادامه دو مورد رو بررسی کنیم، مورد اول ریختن همه‌ی پروژه داخل یه فایل و مورد دوم هم تقسیم پروژه.قبل اینکه شروع کنیم، بیایید اول Dependency Graph رو بررسی کنیم.حالا این Dependency Graph چیه؟خب فرض کنیم پروژمون ۱۰۰ تا فایل داره که ۷۰ درصدشون استفاده میکنیم توی دوتا فیچری که الان داریم و ۳۰ درصد فعلا توی پروداکشن استفاده نکردیم چون هنوز اون فیچر مشتی سومی آماده نشده و در حال توسعه هست.اینجا ما نباید اون ۳۰ درصد هم باندل کنیم چون الکی الکی فایلمون سنگین‌تر میکنیم.اینجا وب‌پک چکار میکنه٬ میاد فایل اصلی که بهش دادیم رو dependency هاش رو بررسی میکنه، چطور بررسی میکنه؟ با بررسی مواردی که داخل اون فایل import شدن، Dependency Graph رو میکشه. (عکسش توی دوتا حالت که بررسی میکنیم گذاشتم)خب برگردیم سر اون دوتا حالت که بالاتر گفتمحالت اول: انداختن کل قیمه‌ها تو ماستافایل کانفیگ Webpackبیایین فایلمون اینجوری کانفیگ کنیم، که فایل اصلیمون index.js هست و خروجیمون هم یه فایل bundle.jsه.خب فرض کنیم اپ users و dashboard حجمشون به ترتیب ۲ و ۴ مگه، یعنی حجم نهاییمون مثلا ۸ مگ میشه (با احتساب کتابخونه‌هایی که جدا نصب کردیم).Dependency Graphحالا کاربر بدبخت بخواد وارد سایت بشه مجبوره ۴ مگ اضاف هم بگیره، برای چیییی واقعا؟ چرا باید دهن مرورگر و اینترنت کاربر رو سرویس کنیم؟پس چکار میکنیم؟حالت دوم: هرکی جایه خودشخب حالا بیایین به Webpack بگیم که بیاد خروجی رو دوتا فایل جداگونه بده که هرکدوم براساس نیازمون بگیریم.یه همچین چیزی میشه:فایل کانفیگ Webpackبهش گفتیم دوتا فایل اصلی داری که توی خروجی باید این دوتا رو باندل کنی و هر کدوم جا بدی، اگه [name] رو bundle می‌نوشتیم الان تویه یکی باندل می‌کرد، مثل حالت اولی، بگذریم.اینجا خروجیمون میشه یه فایل users.js به حجم ۲ مگ و یه فایل dashboard.js به حجم ۴ مگ، با این کار تونستیم کلی سرعت لود سایت بالا ببریم و اینجوری همه راضی، کاربر راضی شما راضی صاحب محصول هم راضی.Dependency Graphمنابع و ابزار‌هایی که استفاده کردم:سایت Webpack.برای عکس کد ها از https://carbon.now.sh استفاده کردم.و برای گراف ها هم از http://www.webgraphviz.com استفاده کردم.Abdollah Keshtkar | Software Engineer @ QueraContact me at AKeshtkar78@gmail.com