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

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

Ivan Akulov

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

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

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

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

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

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

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

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

npm install webpack-dashboard --save-dev

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

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

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

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

compiler.apply(new DashboardPlugin());

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

بسته بندی

bundlesize تأیید می‌کند که دارایی‌های بسته وب از اندازه‌های مشخص‌شده تجاوز نمی‌کنند. آن را با یک 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. 10 تا 20 درصد به هر سایز اضافه کنید و حداکثر اندازه ها را بدست آورید. این حاشیه 10 تا 20 درصد به شما امکان می دهد برنامه را طبق معمول توسعه دهید و در عین حال به شما هشدار می دهد که اندازه آن بیش از حد بزرگ شود.

   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 در هر فشار پیکربندی کنید. (و اگر پروژه را روی آن توسعه می‌دهید ، bundlesize با GitHub ادغام کنید .)

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

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

بیشتر خواندن

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

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

ممکن است بخواهید در بسته نرم افزاری عمیق تر بگردید تا ببینید چه ماژول هایی در آن فضا می گیرند. Meet 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 – در وب پک 4 – یا CommonsChunkPlugin – در بسته 3 – برای انتقال آن به یک فایل مشترک استفاده کنید.) یا این بسته دارای چندین نسخه از یک کتابخانه است؟
• وابستگی های مشابه آیا کتابخانه های مشابهی وجود دارند که تقریباً کار مشابهی را انجام می دهند؟ (مثلاً moment و date-fns ، یا lodash و lodash-es .) سعی کنید با یک ابزار واحد بچسبید.

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

جمع بندی

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