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