برای عملکرد یک برنامه React را نمایه کنید

React DevTools
یک نرم افزار شگفت انگیز است و به عنوان افزونه مرورگر در دسترس است
کروم،
فایرفاکس و
را می توان برای کار با برنامه React در هر کجا پیوند داد.

یکی از جالب ترین ویژگی های React DevTools قابلیت های پروفایل آن است.
برای نمایه ساز چیزهای زیادی وجود دارد و ما در این مورد به همه آنها نمی پردازیم
پست، اما فکر کردم به شما نشان دهم چگونه می توانید با استفاده از React شروع کنید
نمایه ساز و از تله مشترکی که افراد در هنگام ایجاد پروفایل در آن گرفتار می شوند اجتناب کنید
برنامه های کاربردی

من کار خواهم کرد
برنامه قفسه کتاب من که کار خوبی می کند
تلاش کنید تا مرز بین آنقدر عملی باشد که «دنیای واقعی» اما ساده باشد
به اندازه ای است که برای درک آن نیازی به دانش بسیار خاصی از دامنه نیست. آن را احساس کنید
در صورت تمایل می توانید آن را دنبال کنید یا (حتی بهتر) خودتان آن را دنبال کنید
پروژه

اولین قدم این است که مطمئن شوید پسوند React DevTools را برای آن نصب کرده اید
مرورگری که استفاده می کنید من از کروم استفاده می کنم پس آن را نصب کردم
در فروشگاه وب Chrome.
اگر پس از نصب برنامه افزودنی نمایش داده نشد، ممکن است لازم باشد آن را ببندید
پنل DevTools مرورگر خود را باز کنید و دوباره باز کنید.

برنامه قفسه کتاب استفاده می کند react-scripts (با تشکر از create-react-app) پس بعد از
شما پروژه را به صورت محلی نصب کرده اید، آن را اجرا کنید npm run start برای رسیدن به توسعه
سرور در حال اجرا با این کار برنامه در مرورگر شما دانلود می شود
http://localhost:3000:

ابزارهای توسعه دهنده مرورگر را با کلیک راست در هر نقطه از صفحه باز کنید و
روی “بررسی” کلیک کنید. سپس برگه «⚛ Profiler» را انتخاب کنید. این React است
DevTools Profiler و اکنون می توانید روی دایره آبی کوچک کلیک کنید تا “Start”.
پروفایل” برنامه.

از اینجا پیش بروید و کمی با برنامه تعامل داشته باشید. من برای یک ثبت نام خواهم کرد
حساب جدید سپس روی دایره قرمز کوچک کلیک کنید تا نمایه سازی متوقف شود.

از اینجا چندین گزینه برای کاوش داده های DevTools داریدهنگام تعامل با برنامه جمع آوری شده است. نمای پیش‌فرض «Flamegraph» است
نمودار” و همچنین “نمودار رتبه بندی” وجود دارد. این همان چیزی است که “نمودار شعله” نشان می دهد
به نظر می رسد (اگر می خواهید “نمودار رتبه بندی” را ببینید، باید خودتان این کار را انجام دهید:

می‌توانیم در پست دیگری به تحلیل این موارد بپردازیم.

من می خواهم به یک دام جدی اشاره کنم که هنگام انجام آن باید از آن اجتناب کنید
اندازه گیری عملکرد مانند پروفایل ما در حال اندازه گیری نحوه برنامه خود هستیم
در حالت توسعه اجرا می شود. اگر مدتی است که از React استفاده می کنید، دارید
احتمالاً به خوبی آگاه است که با هشدارهای زمان توسعه فراوانی برای کمک ارسال می شود
شما را از کدها و شیوه های مشکل ساز دور می کند. این یکی از چیزهایی است که من
من React را بیشتر از همه دوست دارم، اما هزینه عملکرد (اغلب قابل توجهی) دارد.

به همین دلیل، اندازه گیری های عملکرد شما توسط React لکه دار شده است
کد فقط زمان توسعه (چیزی که کاربران شما هرگز مجبور به اجرای آن نیستند).

بنابراین اگر می خواهید اندازه گیری دقیقی از تولید برنامه خود داشته باشید
عملکرد، باید مطمئن شوید که اندازه گیری های خود را در زمان تولید انجام می دهید
نسخه کد شما (کدی که کاربران نهایی شما استفاده خواهند کرد).

ساخت و اندازه گیری برنامه تولید

بنابراین بیلد تولید بهینه شده را با آن اجرا کنیم npm run build. بعد فرار می کنیم
npx serve -s build برای ارائه نسخه ساخته شده برنامه در سرور HTTP.
این باید برنامه را روی پورت 5000 شروع کند. پس بیایید آن را دانلود کرده و a را اجرا کنیم
جلسه برای نمایه این … صبر کنید! اوه نه! این چیه

پروفایل پشتیبانی نمی شود.

پشتیبانی از پروفایل سازی نیاز به ساختی برای پروفایل توسعه یا تولید دارد
در React نسخه 16.5+.

در fb.me/react-profiling بیشتر بیاموزید.

همانطور که مشخص است، React دارای کدی است که مخصوص پروفایل سازی و در آن است
علاقه مند به ساخت سریع برنامه شما، در واقع آن کد را حذف می کنند
از نسخه تولیدی React. با تشکر React! جز اینکه الان داریم چیکار میکنیم؟خب، حدس می‌زنم می‌توانیم از برایان به جوهر پیوندی برویم! یا می توانید ادامه دهید
در حال خواندن و من به شما نشان خواهم داد که چه کاری انجام دهید.

توجه: اگر از create-react-app استفاده می کنید با react-scripts@>=3.2.0 سپس شما
او فقط می تواند فرار کند npx react-scripts build --profile و همه این کارها را انجام خواهد داد
برای شما
(با تشکر از جیکوب) و
می توانید به دام بعدی بروید. در غیر این صورت لطفا به ادامه مطلب بروید

پیکربندی بسته وب را برای پروفایل تولید به روز کنید

همانطور که در پست ذکر شد، نسخه تولیدی React وجود دارد که اکثر کدهای مفید را در طول توسعه حذف می کند، اما کد پروفایل را دست نخورده باقی می گذارد. این است
هنوز هم کمی کندتر است، اما بهترین ایده را از عملکرد اجزای ما به ما می دهد
اجرا در محیط تولید

راه های مختلفی برای انجام این کار وجود دارد، اما ساده ترین آن به روز رسانی بسته وب است
پیکربندی به نام مستعار هر وارد کردن ماژول های خاص به نسخه پروفایل
این ماژول دو ماژول از این دست وجود دارد:

• react-dom -> react-dom/profiling
• scheduler/tracing -> scheduler/tracing-profiling

هر دو پکیج React هستند و برای کارکردن پروفایلر به کد خاصی نیاز دارند.

نحوه به‌روزرسانی پیکربندی بسته وب بسته به این موضوع متفاوت است
چارچوبی که استفاده می کنید (create-react-app، next.js، gatsby.js یا s خودتان
بسته وب خام). در مورد ما از برنامه create-react-app استفاده می کنیم و هیچ کدام وجود ندارد
راه رسمی پشتیبانی شده برای گسترش یا تغییر پیکربندی بسته وب. خوشبختانه
برای ما، این فقط کاری است که می‌خواهیم به صورت محلی انجام دهیم، بنابراین یک مورد را انجام خواهیم داد
کمی طلسم در ما node_modules.

بنابراین اگر استفاده می کنید react-scripts@3.1.1 (یا جایی در آنجا)، سپس شما
می توانید پیکربندی بسته وب را در اینجا باز کنید:
./node_modules/react-scripts/config/webpack.config.js

سپس کدی را که به شکل زیر است پیدا کنید و خطوط مشخص شده را اضافه کنید:

// ... config ...
resolve: {
  // ... config ...
  alias: {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
    'react-dom$': 'react-dom/profiling',
    'scheduler/tracing': 'scheduler/tracing-profiling',
  },
  // ... more config ...
}
// ... more config ...

تولید پروفیل – ساخت و ساز پروفیل

عالی، حالا فرار کن npm run build، سپس npx serve -s build و بیایید نمایه کنیم
دوباره برنامه! من همان مراحل ثبت نام را که دفعه قبل انجام دادم دنبال می کنم. همین
من اومدم بیرون با:

خوب متوجه خواهید شد که این تعامل مشابه دفعه قبل است (یعنی
رندر صفحه پس از ثبت نام) و از 13.7 میلی‌ثانیه به 6.5 میلی‌ثانیه رسیدیم. خوب
بهبود!

ولی اوه این چیه Anonymous در همه جا چیزی جزئی تشکیل می دهد؟ و ما هستیمیک جزء به نام دریافت کنید ee دیگری زنگ زد Zاینجا چه خبره باشه
همانطور که برنامه خود را برای تولید می سازیم، کد خود را کوچک می کنیم تا بسازیم
بارگیری/تجزیه سریعتر که برای کاربران نهایی خوب است اما بد است
برای اندازه گیری عملکرد ما، زیرا تشخیص کدام یک از اینها برای ما دشوار است
اجزاء مقصر مشکلات عملکرد ما هستند.

غیرفعال کردن دستکاری نام تابع

React می داند که اجزای خود را بر اساس چه چیزی نامگذاری کند name متعلق به
جزء:

function AwesomeAppComponent() {
	return div>Awesomediv>
}
console.log(AwesomeAppComponent.name) // 

class LessAwesomeAppComponent extends React.Component {
	render() {
		return div>Less Awesomediv>
	}
}
console.log(LessAwesomeAppComponent.name) // 

با این حال، هنگامی که ما کد خود را با یک “Uglifier” یا “minifier” می سازیم، ابزار
این نام‌ها را طوری تغییر می‌دهد که باعث می‌شود کد ما مانند قبل کار کند، اما اندازه فایل فایل جاوا اسکریپت تولیدی ما را کاهش می‌دهد، که باعث بهبود می‌شود.
اجرا:

function a() {
	return div>Awesomediv>
}
console.log(a.name) // 

class b extends React.Component {
	render() {
		return div>Less Awesomediv>
	}
}
console.log(b.name) // 

به همین دلیل است که ما این نام های خنده دار را در اندازه گیری های عملکرد خود می بینیم. و همینطور
ما باید این ویژگی پاکسازی را غیرفعال کنیم.

Create React App از ابزاری به نام Terser via استفاده می کند
terser-webpack-plugin
برای انجام کوچک سازی، بنابراین ما فقط باید پیکربندی را به روز کنیم
حفظ نام توابع و کلاس ها

بنابراین در همان فایل پیکربندی بسته وب، به سمت پایین به جایی که پلاگین است بروید
به صورت زیر پیکربندی و اصلاح شد:

// ... some config ...
new TerserPlugin({
	terserOptions: {
		// ... some other config ...
		mangle: {
			safari10: true,
		},
		keep_classnames: true,
		keep_fnames: true,
		// ... some more config ...
	},
	// ... even more config ...
})

با keep_classnames و keep_fnames پیکربندی شده است true، حالا بیایید تلاش کنیم
کد برنامه خود را بسازیم و یک جلسه پروفایل را دوباره اجرا کنیم!

عالی ترین! اکنون یک جلسه نمایه داریم که نام همه افراد را به ما نشان می دهد
اجزای ما و آنها کدی را اجرا می کنند که شبیه کد ما است
کاربران نهایی بسیار نزدیک تر کار خواهند کرد!

من تضمین می‌کنم که اکثر شما که اکنون این مطلب را می‌خوانید در حال توسعه برنامه خود هستید
با دستگاهی که بسیار قدرتمندتر از اکثر افرادی است که از این برنامه استفاده می کنند. وجود دارد
هیچ جایگزینی برای آزمایش برنامه شما روی دستگاه هایی که کاربران استفاده می کنند وجود ندارد. این
گفت که شما می توانید ایده بسیار بهتری از عملکرد واقعی برنامه خود داشته باشید اگر
CPU خود را گاز بگیرید تا تجربه برخی از کاربران برنامه شما شبیه سازی شود.

پس بیایید آن را انجام دهیم. روی تب Performance در Chrome DevTools کلیک کنید و سپس روی آن کلیک کنیدنماد چرخ دنده برای نمایش تنظیمات، سپس در گزینه CPU “6x lag” را انتخاب کنید.

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

اوه 31.8 میلی‌ثانیه! این یک تاخیر است! درباره تاثیر این موضوع بیشتر بدانید
زمان در تجربه کاربر در این پست وبلاگ با عنوان
اجرای رندر.
شاید این چیزی باشد که ارزش بررسی را داشته باشد! اما ما آن را برای وبلاگ دیگری ذخیره می کنیم
پست 😉

ما فقط کارهایی را که برای شروع درست پروفایل React باید انجام دهید را پوشش داده ایم
اما امیدوارم به اندازه کافی یاد گرفته باشید که آن را در برنامه خود امتحان کنید و شروع کنید
بررسی پیامدهای عملکرد برنامه شما.

همچنین، اگر می خواهید کمی عمیق تر در React DevTools غواصی کنید،
این پست وبلاگ React ممکن است کمک کند.

موفق باشید!