React? ?? ?? ?? ??

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

React? ?? ??? ???? ?? React.lazy ??? Suspense ????? ?????.

---

?? ??? ?? ??

1. React.lazy: ?? ??? ???? ?????.
2. Suspense: ????? ???? ?? ??(?: ?? ???)? ?????.

---

???

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

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

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

---

?? 1: ?? ?? ??

?? ?? ??

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

? ???? HeavyComponent? ?? ???? ???? ?? ????? ?? ?? ??? ?????.

?? ?? ??

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

?? HeavyComponent? ???? ?? ?????. ?? ??? ???? ?? ?? UI(?: "??? ?? ?? ?? ?...")? ?????.

---

? 2: React Router? ??? ?? ??

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

import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

• React.lazy: /about ? /contact? ?? ??? ?? ?? ??? ?? ?????.
• Suspense: ?? ??? ???? ?? ?? UI? ?????.

---

?? ??? ??

1. ?? ??: ???? ?? ??? ??? ???? ?? ?? ??? ?????.
2. ? ?? ??? ??: ?? ??? ???? ???? ??? ?? ??? ? ??? ???.
3. ?? ?? ??: ??? ? ?? ???? ???? ??? ???? JavaScript ??? ??? ??????.

---

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

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

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

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

---

?? ??? ?? ?? ??

?? ?? ?? ??? ??? ???? ??(?: ???? ??) React? ?? ??? ?? ?? ?? ?? ??? ???? ????. ErrorBoundary? ???? ??? ????? ??? ? ????.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

?? ?? ?? ??

1. ??? ???? ?????: ???? ?? ???? ?? ??? ?? UI? ?????.
2. ???? ???? ??: ??? ?? ?? ???? ????? ????? ?????.
3. ?? ??? ??: ???? ?? ??? ?? Webpack ?? Vite? ?? ??? ?????.

---

??

React? ?? ??? ?????? ??? ???? ??? ??? ????? ??? ?????. React.lazy ? Suspense? ???? ?? ??? ???? ???? ?? ?? ??? ??? ???????? ??? ??? ????? ? ? ????.

---

? ??? ?? ?? ?? ??? React ? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!