????? ??? ??????? ???? ???? React?? ??? ?? ? ?? ??? ??? ????. ? ?? ??? ???? React ??? ?? ??? ??? ??? ?? ????. ????? ??? ??????? ??? ?? ??? ?? ???? ?? ??? ???? ?? ??? ?????.

??? ???? ?? ??? ?? ??????. ?? ? ????? ???? ? ???? ??? ? React ?? ??? ?? ???? HTML ??? ??????. ?? ?? ? ?? ???? ???? ????? ???? ???? JS ?? ??? ???? ?? ?? ???? ? ? ????.

??? ?? ?? ?? ??????. ?? ??? ???? ??? ?? ??? ???? ??? ?? ????? ? ??? ???? ???? ? ??? ?????. ??? ???????.

1. ?? ?? ? ?? ????

React ??? '???'? ?? ???? ? ??? ?? '??'??? ?? ??? ???? ?????. Webpack, Browserify ?? ?? ? ??? ???? ????.

Webpack?? ?? ??? ? ?? ???? ????, ???? ?? ????, '?? ?' ???? '?? ??'??? ??? ????. ?? ?????? ?? ??? ? ??? ????.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

React Suspense? ??? ?? ?? ?? ??(React 18): ?? ????? ???? ?? ?? ?? ??? ?? ?? ?????.

????? ?? ?? ?? ??? ?? ?? ??? ??? ? ???? ?????. ??? ????? ? ??? ? ?? ??? ???? ?? ???? ?? React Suspense? ?? ????? ???? ??? ? ????. React Suspense? ???? ?? ? ?? ??? ??? ? ????. ?? ?? ??? ???? ??? ? ????? ?? Fallback UI? ?????.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

2. ?? ???

?? ??? ???? ?? ???? ?? ??? ?? ???? ?? JavaScript ????? ???? ?????. ES6 ??? ?? ???? ? ????. ??? CommonJS? ???? ?? ??(?: 'require' ??)? ?? ???? ? ????.

Webpack Bundle Analyser? ??? ??? ?? ??? ??? ????? ? ??? ?? ???????.

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer

?? ?? ?? ??? ?????? ????? ??? ?????.

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];

Webpack? ????? ????? ???? ??? ?????.

"build": "webpack --config webpack.config.js --mode production"

? ??? ???? ?? ??? ????? ????? ? ??? ?? report.html? ?????.

??? ????.

3. ?? ???

Blocking Rendering? ?????? ???????. ??? ??? React? ??????? ? ??? ??? ???? ??? ?? ???(UX ????)? ???? ?????. React 16??? ?? ?? ?????.

React 18? ?? ??? ??????. ?? ??? ?????.

• ????? ???? ?? ??? ? ????? ??? ? ??? ?? ???? ???? ????? ??? ?? ??? ??? ??? ? ????.
• ?? ???? ?? ?? ?? ??: ?? ??? ??? ? ?? ?????? ???? ?? ?? ????? ?? ?? ????? ????? ?? ?????.

startTransition() ??? ???? React ????? ???? ?? ????? ???? React? ?? ?????? ??? ?? ? ?? ???? ??? ?? ??? ?? ?? ????? ?? ??? ??? ? ????.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

? ????? ?? ?? ???? handlerChange ??? ?????. startTransition ??? ?? ?? ????? ???? ?? ??? ???? ? ?????. ?? ?? React? ? ??? ?? ???? ????? ???? ??? ? ??? ??? ?? ????? ?????.

useDeferredValue ??? ???? UI ???? ??? ??? ?(????? ??? ?? ?? ??)? ?????.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

? ???? useDeferredValue ??? ???? UI ???? ??? ??? ? ??? ?????. ??? ?? ?? ????? ??? ??? ? ??? ???? ???? ?? ???? ???? ? ??? ???.

?? ???? ?? ??:

• ??? ???: React? ??? ??? ????? ?????? UI? ??? ?? ??? ?? ?????.
• ????: React? ???? ?? ?????? ?? ????? ????? ???? ?? ??? ??? ??? ??? ? ????.
• ??? ??: ??? ?? ?? ????? ???? ?? ???? ??? ??? ??? ?? ???? ??? ???? ? ????.

4. ??? ?? ?? ??(React 19)

??????? ???? ?? ???? ???? ?? ??? ?? ?? ??? ???? ?? ???? ?? ????. ??? ???? ??, ???, ????? ?? ? ? ????.

?? ??? ??? ????:

• ?? ?? ??? ???? ?????. ? ?? ?? ?? ??? ??? ???? ?? ??? ? ????.
• ? ???? ??? ???/?? ??? ?????? ??? ??? ?? ?? ?????. ??? ?? ??? ?? ?? ???? ??? ? ?? ?????.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

???? ??: ?? ??? ??? ? Shopify, Financial Times, Treebo? ??? ?? ????? ?? ?? ? ??? ?? ?? ??? ?? ??? ?? ??? 1? ???????.

---

??? ?????<3

? ???? ??? ???? ????! ??? ???? ??? ?? ??? ???? , ?? ??? ???? ??? ??? ?????.

? ?? ???? ????? ???? ???? LinkedIn?? ?? ??? ???. ?? ???? ?? ??? ??? ????!

? ??? ?? ? ??? ?? ReactJS ??????? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!