برنامه را نظارت و آنالیز کنید

از چه ابزارهایی برای پیگیری و تجزیه و تحلیل بسته وب‌پک استفاده کنیم؟

Ivan Akulov

حتی وقتی که webpack را طوری پیکربندی می‌کنید که برنامه را تا حد امکان کوچک کند، باز هم مهم است که آن را پیگیری کنید و بدانید شامل چه چیزهایی می‌شود. در غیر این صورت، ممکن است وابستگی‌ای نصب کنید که برنامه را دو برابر بزرگ کند - و حتی متوجه آن نشوید!

این بخش ابزارهایی را شرح می‌دهد که به شما در درک بسته‌تان کمک می‌کنند.

اندازه بسته را پیگیری کنید

برای نظارت بر حجم برنامه، در طول توسعه از webpack-dashboard و در CI از bundlesize استفاده کنید.

داشبورد وب‌پک

webpack-dashboard خروجی webpack را با اندازه وابستگی‌ها، پیشرفت و سایر جزئیات بهبود می‌بخشد. در اینجا نحوه نمایش آن آمده است:

این داشبورد به ردیابی وابستگی‌های بزرگ کمک می‌کند - اگر یکی اضافه کنید، بلافاصله آن را در بخش ماژول‌ها مشاهده خواهید کرد!

برای فعال کردن آن، بسته webpack-dashboard را نصب کنید:

npm install webpack-dashboard --save-dev

و افزونه را به بخش plugins پیکربندی اضافه کنید:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

یا اگر از یک سرور توسعه مبتنی بر Express استفاده می‌کنید، از compiler.apply() استفاده کنید:

compiler.apply(new DashboardPlugin());

می‌توانید با داشبورد بازی کنید تا نقاط احتمالی برای بهبود را پیدا کنید! برای مثال، در بخش ماژول‌ها اسکرول کنید تا کتابخانه‌هایی را که بیش از حد بزرگ هستند و می‌توان آنها را با جایگزین‌های کوچک‌تر جایگزین کرد، پیدا کنید.

اندازه بسته

bundlesize تأیید می‌کند که فایل‌های webpack از اندازه‌های مشخص‌شده تجاوز نمی‌کنند. آن را با یک CI ادغام کنید تا وقتی برنامه خیلی بزرگ شد، مطلع شوید:

برای پیکربندی آن:

حداکثر اندازه‌ها را پیدا کنید

1. برنامه را بهینه کنید تا تا حد امکان کوچک شود. نسخه آزمایشی را اجرا کنید.

2. بخش bundlesize را با محتوای زیر به package.json اضافه کنید:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. اجرای bundlesize با npx :

   npx bundlesize
   

   این دستور حجم gzip شده هر فایل را چاپ می‌کند:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. به هر اندازه ۱۰ تا ۲۰ درصد اضافه کنید، و حداکثر اندازه‌ها را به دست خواهید آورد. این حاشیه ۱۰ تا ۲۰ درصدی به شما امکان می‌دهد برنامه را طبق معمول توسعه دهید و در عین حال وقتی اندازه آن بیش از حد افزایش می‌یابد، به شما هشدار می‌دهد.

   فعال کردن bundlesize

5. بسته bundlesize را به عنوان یک وابستگی توسعه نصب کنید:

   npm install bundlesize --save-dev
   

6. در بخش bundlesize در فایل package.json ، حداکثر اندازه‌های واقعی را مشخص کنید. برای برخی از فایل‌ها (مثلاً تصاویر)، ممکن است بخواهید حداکثر اندازه را برای هر نوع فایل مشخص کنید، نه برای هر فایل:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. برای اجرای بررسی، یک اسکریپت npm اضافه کنید:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. CI را طوری پیکربندی کنید که در هر بار ارسال، دستور npm run check-size اجرا کند. (و اگر پروژه را روی GitHub توسعه می‌دهید، bundlesize با آن ادغام کنید .)

همین! حالا اگر npm run check-size اجرا کنید یا کد را push کنید، خواهید دید که آیا فایل‌های خروجی به اندازه کافی کوچک هستند یا خیر:

یا در صورت بروز خطا:

مطالعه بیشتر

• الکس راسل در مورد زمان بارگذاری در دنیای واقعی که باید هدف قرار دهیم

تحلیل کنید که چرا بسته اینقدر بزرگ است

شاید بخواهید عمیق‌تر به بررسی این بسته نرم‌افزاری بپردازید تا ببینید چه ماژول‌هایی در آن فضا اشغال می‌کنند. با webpack-bundle-analyzer آشنا شوید:

webpack-bundle-analyzer بسته نرم‌افزاری را اسکن می‌کند و تصویری از آنچه درون آن است، می‌سازد. از این تصویرسازی برای یافتن وابستگی‌های بزرگ یا غیرضروری استفاده کنید.

برای استفاده از آنالایزر، بسته webpack-bundle-analyzer نصب کنید:

npm install webpack-bundle-analyzer --save-dev

یک افزونه به پیکربندی وب‌پک اضافه کنید:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

و نسخه نهایی را اجرا کنید. افزونه صفحه آمار را در مرورگر باز می‌کند.

به طور پیش‌فرض، صفحه آمار، اندازه فایل‌های تجزیه‌شده (یعنی فایل‌هایی که در بسته ظاهر می‌شوند) را نشان می‌دهد. احتمالاً می‌خواهید اندازه‌های gzip را مقایسه کنید، زیرا این به آنچه کاربران واقعی تجربه می‌کنند نزدیک‌تر است؛ از نوار کناری سمت چپ برای تغییر اندازه‌ها استفاده کنید.

در اینجا مواردی که باید در گزارش جستجو کنید آورده شده است:

• وابستگی‌های بزرگ. چرا اینقدر بزرگ هستند؟ آیا جایگزین‌های کوچک‌تری وجود دارد (مثلاً Preact به جای React)؟ آیا از تمام کدی که در آن وجود دارد استفاده می‌کنید (مثلاً Moment.js شامل بسیاری از زبان‌ها است که اغلب استفاده نمی‌شوند و می‌توانند حذف شوند )؟
• وابستگی‌های تکراری. آیا می‌بینید که یک کتابخانه در چندین فایل تکرار می‌شود؟ (مثلاً از گزینه optimization.splitChunks.chunks - در webpack 4 - یا CommonsChunkPlugin - در webpack 3 - برای انتقال آن به یک فایل مشترک استفاده کنید.) یا اینکه بسته شامل چندین نسخه از یک کتابخانه است؟
• وابستگی‌های مشابه. آیا کتابخانه‌های مشابهی وجود دارند که تقریباً کار یکسانی انجام دهند؟ (مثلاً moment و date-fns یا lodash و lodash-es ). سعی کنید از یک ابزار واحد استفاده کنید.

همچنین، تحلیل عالی شان لارکین از بسته‌های وب‌پک را بررسی کنید.

جمع‌بندی

• برای اطلاع از حجم برنامه خود از webpack-dashboard و bundlesize استفاده کنید.
• با استفاده از webpack-bundle-analyzer بررسی کنید که چه چیزی باعث افزایش حجم می‌شود.