بهینه سازی React Application – DEV Community

Summarize this content to 400 words in Persian Lang
برای بهینه سازی الف واکنش نشان دهید برنامه، می توانید از چندین استراتژی کلیدی استفاده کنید که بر عملکرد، کاهش اندازه بسته نرم افزاری، رندر کارآمد و تجربه کلی کاربر تمرکز دارند. در اینجا خلاصه ای از تکنیک های بهینه سازی خاص React آورده شده است:

1. تقسیم کد

تقسیم کد به شما این امکان را می دهد که برنامه خود را به تکه های کوچکتر تقسیم کنید که می توانند در صورت نیاز بارگیری شوند، نه اینکه کل برنامه را یکجا بارگیری کنید. این باعث بهبود زمان بارگذاری اولیه می شود.

واکنش نشان بده تنبل: از ویژگی بارگذاری تنبل داخلی React برای وارد کردن پویا مؤلفه ها استفاده کنید.

const LazyComponent = React.lazy(() => import(‘./Component’));

function App() {
return (
React.Suspense fallback={div>Loading…div>}>
LazyComponent />
React.Suspense>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

React Loadable: همچنین می توانید از کتابخانه ای مانند استفاده کنید قابل بارگذاری با واکنش برای گزینه های پیشرفته تر تقسیم کد.

2. یادداشت کردن و جلوگیری از رندرهای غیر ضروری

اجتناب از رندرهای غیرضروری برای افزایش عملکرد در برنامه های React بسیار مهم است.

React.memo: اجزای کاربردی را با React.memo برای جلوگیری از رندر مجدد آنها در صورت تغییر نکردن قطعات.

const MyComponent = React.memo(({ value }) => {
return div>{value}div>;
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

useMemo: محاسبات گران قیمت را به خاطر بسپارید تا در هر رندر، مگر در موارد ضروری، دوباره محاسبه نشوند.

const computedValue = useMemo(() => expensiveComputation(value), [value]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از برگشت تماس: توابع را به خاطر بسپارید تا از ارسال مراجع جدید در هر بار جلوگیری کنید، به خصوص زمانی که به عنوان وابستگی در مؤلفه ها یا جلوه های فرزند استفاده می شود.

const handleClick = useCallback(() => {
console.log(‘Clicked’);
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. از مدیریت دولتی کارآمد استفاده کنید

مدیریت وضعیت به گونه ای که از رندرهای غیر ضروری جلوگیری شود، می تواند عملکرد را تا حد زیادی افزایش دهد.

استفاده از کاهش دهنده: برای منطق حالت پیچیده، استفاده را در نظر بگیرید useReducer به جای useState برای کنترل بیشتر بر تغییرات حالت

const [state, dispatch] = useReducer(reducer, initialState);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تقسیم کامپوننت: کامپوننت ها را به گونه ای تقسیم کنید که در صورت تغییر حالت، فقط قسمت ضروری دوباره رندر شود.

4. مجازی سازی لیست های طولانی

رندر کردن لیست ها یا جداول طولانی می تواند عملکرد را کاهش دهد. از تکنیک های مجازی سازی لیست استفاده کنید تا فقط آنچه را که روی صفحه قابل مشاهده است ارائه دهید.

پنجره واکنش یا واکنش مجازی شده: این کتابخانه ها به شما این امکان را می دهند که با مجازی سازی لیست ها، مجموعه داده های بزرگ را به طور موثر ارائه دهید.

import { FixedSizeList as List } from ‘react-window’;

const MyList = ({ items }) => (
List
height={500}
itemCount={items.length}
itemSize={35}
width={300}
>
{({ index, style }) => div style={style}>{items[index]}div>}
List>
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. تکان دادن درخت

اطمینان حاصل کنید که برنامه شما فقط بخش‌هایی از کتابخانه‌ها را وارد می‌کند که برای کاهش اندازه بسته‌ها استفاده می‌شوند.

واردات ES6: فقط ماژول های مورد نیاز خود را از کتابخانه ها (مانند lodash، moment.js و غیره) وارد کنید تا کل کتابخانه.

// Instead of this:
import _ from ‘lodash’;

// Do this:
import debounce from ‘lodash/debounce’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. تصاویر بارگذاری تنبل

تصاویر اغلب بزرگترین دارایی یک صفحه هستند. از بارگذاری تنبل برای به تاخیر انداختن بارگیری تصاویر تا زمانی که در قسمت دید قرار گیرند استفاده کنید.

واکنش تنبلی: از واکنش تنبلی کتابخانه برای بارگذاری ساده و تنبل تصاویر.

import LazyLoad from ‘react-lazyload’;

const ImageComponent = () => (
LazyLoad height={200} once>
img src=”image-url.jpg” alt=”example” />
LazyLoad>
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ناظر تقاطع: شما همچنین می توانید استفاده کنید Intersection Observer API برای بارگذاری تنبلی تصاویر هنگام مشاهده آنها.

const LazyImage = ({ src, alt }) => {
const [inView, setInView] = useState(false);
const imgRef = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setInView(true);
observer.disconnect();
}
});
observer.observe(imgRef.current);
}, []);

return img ref={imgRef} src={inView ? src : ”} alt={alt} />;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. جاوا اسکریپت را کوچک کنید

استفاده کنید ترسر یا کوچک سازی داخلی Webpack برای کاهش اندازه باندل های جاوا اسکریپت در طول فرآیند ساخت.
برنامه React ایجاد کنید به طور خودکار کدهای ساخت های تولیدی را کوچک می کند:

npm run build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. تجزیه و تحلیل بسته نرم افزاری

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

استفاده کنید webpack-bundle-analyzer تا بسته‌های خود را تجسم کنید و ببینید کدام کتابخانه‌ها بیشترین فضا را اشغال می‌کنند.

npm install –save-dev webpack-bundle-analyzer

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در پیکربندی Webpack شما:

const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer’);
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
] };

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

9. CSS استفاده نشده را کاهش دهید

از ابزارهایی مانند PurgeCSS برای حذف CSS استفاده نشده از بسته خود. می توانید آن را با پیکربندی Webpack یا PostCSS خود ادغام کنید.

npm install @fullhuman/postcss-purgecss

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به عنوان مثال پیکربندی PostCSS:

const purgecss = require(‘@fullhuman/postcss-purgecss’)({
content: [‘./src/**/*.js’, ‘./public/index.html’],
defaultExtractor: content => content.match(/[\w-/:]+(?!:)/g) || [] });

module.exports = {
plugins: [
require(‘tailwindcss’),
purgecss,
require(‘autoprefixer’)
] };

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

10. بهینه سازی درخواست های شبکه

کاهش تعداد درخواست های شبکه و بهینه سازی تماس های API می تواند منجر به بهبود عملکرد قابل توجهی شود.

تماس‌های API در حال حذف: برای محدود کردن تعداد دفعات ارسال درخواست‌های API در طول ورودی کاربر، از debouncing استفاده کنید.

const fetchResults = debounce((query) => {
// API call logic
}, 300);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ذخیره داده های API: از کتابخانه هایی مانند استفاده کنید SWR یا React Query برای کش کردن درخواست های API و اجتناب از واکشی مجدد داده ها به صورت غیر ضروری.

import useSWR from ‘swr’;

const fetcher = url => fetch(url).then(res => res.json());

const MyComponent = () => {
const { data, error } = useSWR(‘/api/data’, fetcher);

if (error) return div>Error loading datadiv>;
if (!data) return div>Loading…div>;
return div>{data.message}div>;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

11. از React Fragments استفاده کنید

با استفاده از آن از افزودن عناصر غیر ضروری به DOM خودداری کنید React Fragments ( and >) هنگام بسته بندی چندین عنصر.

const MyComponent = () => (

h1>Titleh1>
p>Contentp>
>
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

12. پروفایل و تست عملکرد

استفاده کنید React Developer Tools پروفایل برای شناسایی گلوگاه های عملکرد در برنامه شما.

React Profiler: در کروم یا فایرفاکس، React DevTools را باز کنید و به برگه «Profiler» بروید. یک جلسه را ضبط کنید و تجزیه و تحلیل کنید که در آن اجزای سازنده دوباره رندر می شوند و زمان بیشتری را صرف می کنند.

نتیجه گیری

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

  const LazyComponent = React.lazy(() => import('./Component'));

  function App() {
    return (
      React.Suspense fallback={div>Loading...div>}>
        LazyComponent />
      React.Suspense>
    );
  }

  const MyComponent = React.memo(({ value }) => {
    return div>{value}div>;
  });

  const computedValue = useMemo(() => expensiveComputation(value), [value]);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  const [state, dispatch] = useReducer(reducer, initialState);

  import { FixedSizeList as List } from 'react-window';

  const MyList = ({ items }) => (
    List
      height={500}
      itemCount={items.length}
      itemSize={35}
      width={300}
    >
      {({ index, style }) => div style={style}>{items[index]}div>}
    List>
  );

  // Instead of this:
  import _ from 'lodash';

  // Do this:
  import debounce from 'lodash/debounce';

  import LazyLoad from 'react-lazyload';

  const ImageComponent = () => (
    LazyLoad height={200} once>
      img src="image-url.jpg" alt="example" />
    LazyLoad>
  );

  const LazyImage = ({ src, alt }) => {
    const [inView, setInView] = useState(false);
    const imgRef = useRef(null);

    useEffect(() => {
      const observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.disconnect();
        }
      });
      observer.observe(imgRef.current);
    }, []);

    return img ref={imgRef} src={inView ? src : ''} alt={alt} />;
  };

  npm run build

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

  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  module.exports = {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  };

  npm install @fullhuman/postcss-purgecss

  const purgecss = require('@fullhuman/postcss-purgecss')({
    content: ['./src/**/*.js', './public/index.html'],
    defaultExtractor: content => content.match(/[\w-/:]+(?!:)/g) || []
  });

  module.exports = {
    plugins: [
      require('tailwindcss'),
      purgecss,
      require('autoprefixer')
    ]
  };

  const fetchResults = debounce((query) => {
    // API call logic
  }, 300);

  import useSWR from 'swr';

  const fetcher = url => fetch(url).then(res => res.json());

  const MyComponent = () => {
    const { data, error } = useSWR('/api/data', fetcher);

    if (error) return div>Error loading datadiv>;
    if (!data) return div>Loading...div>;
    return div>{data.message}div>;
  };

const MyComponent = () => (
  
    h1>Titleh1>
    p>Contentp>
  >
);