از چه ابزارهایی برای پیگیری و تجزیه و تحلیل بسته وب بسته استفاده کنید
حتی زمانی که بسته وب را طوری پیکربندی میکنید که برنامه را تا حد امکان کوچک کنید، همچنان مهم است که آن را پیگیری کنید و بدانید چه چیزی شامل آن میشود. در غیر این صورت، می توانید یک وابستگی نصب کنید که برنامه را دو برابر بزرگتر می کند - و حتی متوجه آن نمی شود!
این بخش ابزارهایی را توضیح می دهد که به شما در درک بسته نرم افزاری خود کمک می کند.
اندازه بسته را پیگیری کنید
برای نظارت بر اندازه برنامه خود، از 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 ادغام کنید تا در صورت بزرگ شدن برنامه به شما اطلاع داده شود:
برای پیکربندی آن:
حداکثر اندازه ها را بیابید
برنامه را بهینه کنید تا آن را تا حد امکان کوچک کنید. ساخت تولید را اجرا کنید.
بخش
bundlesize
را با محتوای زیر بهpackage.json
اضافه کنید:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
اجرای
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
10 تا 20 درصد به هر سایز اضافه کنید و حداکثر اندازه ها را بدست آورید. این حاشیه 10 تا 20 درصد به شما امکان می دهد برنامه را طبق معمول توسعه دهید و در عین حال به شما هشدار می دهد که اندازه آن بیش از حد بزرگ شود.
bundlesize
فعال کنیدبسته
bundlesize
را به عنوان یک وابستگی توسعه نصب کنید:npm install bundlesize --save-dev
در قسمت
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", } ] }
برای اجرای چک یک اسکریپت npm اضافه کنید:
// package.json { "scripts": { "check-size": "bundlesize" } }
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
به آنچه که اندازه آن را افزایش می دهد، کاوش کنید