{"componentChunkName":"component---src-templates-docs-js","path":"/docs/code-splitting.html","result":{"data":{"markdownRemark":{"html":"
\n
\n

These docs are old and won’t be updated. Go to react.dev for the new React docs.

\n

These new documentation pages teach modern React and include live examples:

\n\n
\n
\n

Bundling

\n

Ихэнх React програмуудын файлууд нь Webpack эсвэл\nBrowserify гэх мэт хэрэгслүүд ашиглан “багцалсан”\nбайдаг. Багцлах гэдэг нь импортлогдсон файлууд болон файлуудыг нэг файл болгон\nнэгтгэх үйл явц юм: Энэ багц нь веб хуудас дээр нэмэгдэн бүхэл програмын нэг л\nудаа ачаалдаг.

\n

Example

\n

Програм:

\n
// app.js\nimport { add } from './math.js';\n\nconsole.log(add(16, 26)); // 42
\n
// math.js\nexport function add(a, b) {\n  return a + b;\n}
\n

Багц:

\n
function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add(16, 26)); // 42
\n
\n

Анхаар:

\n

Таны багцууд энэнээс өөр харагдаж болно.

\n
\n

Хэрэв Create React App, Next.js, Gatsby эсвэл төстэй хэрэгсэл ашигласан бол таны програмыг хайрцагнаас гадна багцлах Webpack тохиргоотой болно.

\n

Хэрэв ийм хэрэгслүүд ашиглаагүй бол та өөрөө багцлах тохиргоог хийх болно. Жишээ болгон Webpack-н суулгах болон Эхлэн суралцах заавруудын баримтжуулалтыг харна уу.

\n

Код салгах

\n

Багцлах нь сайн ч таны програм томрохын хэрээр даган томроно. Ялангуяа гуравдагч\nтом сангууд ашиглаж байгаа бол бүр их томроно. Та програмдаа юуг багтааж байгааг\nанзаарч байхгүй бол ачаалахад хэтэрхий удаан том багцтай болж болзошгүй.

\n

Эцэст нь том багцтай болохоос сэргийлэхийн тулд багцуудаа “салгаж” эхлэх хэрэгтэй.\nКод-салгах боломж нь Webpack болон Rollup, Browserify шиг хэрэгслүүдэд (via\nfactor-bundle) дэмжигддэг бөгөөд\nолон салгасан багцууд үүсгэн ажиллагааны үед динамикаар ачаалагддаг.

\n

Код-салгах нь хэрэглэгчид одоо хэрэгтэй байгаа ч энэ ачаалагдсан зүйл нь хэрэглэгчид\nдахин хэзээ хэрэг болохгүй бол эхлэлийн ачаалалт дээр дуудагдах кодын хэмжээг\nбууруулахад туслад үүднээс “залхуу-ачаалалт” дуудах боломжийг олгодог. Ингэснээр\nтаны програмын хурдыг гайхалтай нэмэгдүүлж болно.

\n

import()

\n

Код салгахийг өөрийн програмдаа хэрэгжүүлэх сайн арга бол динамик import() бичиглэл юм.

\n

Өмнө:

\n
import { add } from './math';\n\nconsole.log(add(16, 26));
\n

Дараа:

\n
import(\"./math\").then(math => {\n  console.log(math.add(16, 26));\n});
\n
\n

Анхаар:

\n

Динамик import() бичиглэл бол ECMAScript (JavaScript)\nсанал болголт бөгөөд одоогоор\nхэлний стандартын нэг хэсэг болоогүй байна. Энэ нь тун удахгүй хүлээн зөвшөөрөгдөхөөр\nбайгаа болно.

\n
\n

Webpack энэ бичиглэлтэй болох үед энэ нь таны прогамыг кодыг автоматаар салгаж\nэхэлэнэ. Хэрэв та Create React App ашиглаж байгаа бол энэ нь таньд аль хэдийн\nтохируулагдаж өгсөн байгаа бөгөөд та үүнийг даруйхан ашиглаж эхлэх\nхэрэгтэй. Энэ нь мөн хүрээнээс гаднах Next.js дээр ч дэмжигддэг.

\n

Хэрэв та Webpack өөртөө тохируулж байгаа бол та түүний\nкод салгах зааврыг унших нь зүйтэй. Таны Webpack тохиргоо иймэрхүү харагдах хэрэгтэй.

\n

React.lazy

\n

React.lazy функц нь танд энгийн компонентийн динамикаар импортлон дүрслэж боломжийг олгодог.

\n

Өмнө:

\n
import OtherComponent from './OtherComponent';
\n

Дараа:

\n
const OtherComponent = React.lazy(() => import('./OtherComponent'));
\n

Энэ нь OtherComponent агуулсан багцийг компонент дүрслэгдэх үед динамикаар импортлодог.

\n

React.lazy нь функц авдаг ба тэр нь динамик import()-г дуудах ёстой. Энэ нь Promise буцаах ёстой ба React компонент агуулсан модулийг хайж олдог.

\n

Suspense

\n

MyComponent дүрслэгдэх мөчид OtherComponent-г агуулсан модуль ачаалагдаагүй бол бид ямар нэг уншиж байгаа мэдээлэл гэх мэт ачаалагдаж байгааг нь илэрхийлэх агуулга харуулах хэрэгтэй. Үүнийг Suspense компонентоор хийдэг.

\n
import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Suspense fallback={<div>Loading...</div>}>\n        <OtherComponent />\n      </Suspense>\n    </div>\n  );\n}
\n

fallback шинж чанар нь ямар ч React элементүүд хүлээж авах ба та компонент ачаалагдах хүртэл юуг ч дүрсэлж болно. Та Suspense компонентийг ямар ч залхуу компонентийн дараа байрлуулж болно. Бүр та олон залхуу компонентуудыг хүртэл нэг Suspense компонентоор хүрээлүүлэн ашиглаж болно.

\n
import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() => import('./AnotherComponent'));\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Suspense fallback={<div>Loading...</div>}>\n        <section>\n          <OtherComponent />\n          <AnotherComponent />\n        </section>\n      </Suspense>\n    </div>\n  );\n}
\n

Avoiding fallbacks

\n

Any component may suspend as a result of rendering, even components that were already shown to the user. In order for screen content to always be consistent, if an already shown component suspends, React has to hide its tree up to the closest <Suspense> boundary. However, from the user’s perspective, this can be disorienting.

\n

Consider this tab switcher:

\n
import React, { Suspense } from 'react';\nimport Tabs from './Tabs';\nimport Glimmer from './Glimmer';\n\nconst Comments = React.lazy(() => import('./Comments'));\nconst Photos = React.lazy(() => import('./Photos'));\n\nfunction MyComponent() {\n  const [tab, setTab] = React.useState('photos');\n  \n  function handleTabSelect(tab) {\n    setTab(tab);\n  };\n\n  return (\n    <div>\n      <Tabs onTabSelect={handleTabSelect} />\n      <Suspense fallback={<Glimmer />}>\n        {tab === 'photos' ? <Photos /> : <Comments />}\n      </Suspense>\n    </div>\n  );\n}
\n

In this example, if tab gets changed from 'photos' to 'comments', but Comments suspends, the user will see a glimmer. This makes sense because the user no longer wants to see Photos, the Comments component is not ready to render anything, and React needs to keep the user experience consistent, so it has no choice but to show the Glimmer above.

\n

However, sometimes this user experience is not desirable. In particular, it is sometimes better to show the “old” UI while the new UI is being prepared. You can use the new startTransition API to make React do this:

\n
function handleTabSelect(tab) {\n  startTransition(() => {\n    setTab(tab);\n  });\n}
\n

Here, you tell React that setting tab to 'comments' is not an urgent update, but is a transition that may take some time. React will then keep the old UI in place and interactive, and will switch to showing <Comments /> when it is ready. See Transitions for more info.

\n

Алдааны зааг(boundaries)

\n

Хэрэв бусад модуль ачаалагдаж чадахгүй бол(жишээ нь сүлжээны доголдлоос) алдаа гарна. Та эдгээр алдаануудыг удирдан хэрэглэгчид мэдэгдэх болон дахин сэргээх үйлдлийг алдааны зааг-р хийж болно. Алдааны заагаа үүсгэсний дараа та үүнийг залхуу компонентуудынхаа доор хаана ч ашиглан сүлжээний алдаа гарсан үед алдааны төлвөө дүрсэлж болно.

\n
import React, { Suspense } from 'react';\nimport MyErrorBoundary from './MyErrorBoundary';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() => import('./AnotherComponent'));\n\nconst MyComponent = () => (\n  <div>\n    <MyErrorBoundary>\n      <Suspense fallback={<div>Loading...</div>}>\n        <section>\n          <OtherComponent />\n          <AnotherComponent />\n        </section>\n      </Suspense>\n    </MyErrorBoundary>\n  </div>\n);
\n

Чиглэлд тулгуурласан код салгалт(Route-based code splitting)

\n

Таны програмын хаана код салгахийг шийдэх нь хэцүү байдаг. Та магадгүй багцуудыг\nтэнцүү байдлаар салгахийг хүсэх ч дэлгэцийн үйл ажиллагаанд саад учруулахгүй байхийг\nхүсэж болно.

\n

Хамгийн сайн эхлэх газар бол чиглэлүүд(routes) юм. Веб үзэж байгаа хүмүүс\nхуудас солигдох үед ачаалагдахдаа бага зэрэг цаг авахад дассан байдаг. Мөн та\nбүхэл хуудсийг дахин нэг удаа дүрслэхийг илүүд үздэг бол таны хэрэглэгчид\nхуудас дээр байгаа бусад элементүүдтэй харьцах нь цөөн байдаг.

\n

Энэ нь хэрхэн чиглэл дээр тулгуурласан код салгалт хийх жишээг React Router шиг санг React.lazy-тэй хамт ашиглан харуулжээ.

\n
import React, { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nconst Home = lazy(() => import('./routes/Home'));\nconst About = lazy(() => import('./routes/About'));\n\nconst App = () => (\n  <Router>\n    <Suspense fallback={<div>Loading...</div>}>\n      <Routes>\n        <Route path=\"/\" element={<Home />} />\n        <Route path=\"/about\" element={<About />} />\n      </Routes>\n    </Suspense>\n  </Router>\n);
\n

Нэрлэсэн экспортууд

\n

React.lazy нь одоогоор зөвхөн default экспортууд дээр дэмжигддэг. Хэрэв таний импортлохийг хүсэж буй модуль нэрлэсэн экспортууд ашигладаг бол та дундын модуль үүсгэн дахин default-руу экспортлож болно. Энэ нь танд ашиглагдаагүй компонентийг ачаалаагдахгүй байх баталгааг олгодог.

\n
// ManyComponents.js\nexport const MyComponent = /* ... */;\nexport const MyUnusedComponent = /* ... */;
\n
// MyComponent.js\nexport { MyComponent as default } from \"./ManyComponents.js\";
\n
// MyApp.js\nimport React, { lazy } from 'react';\nconst MyComponent = lazy(() => import(\"./MyComponent.js\"));
","frontmatter":{"title":"Код салгах","next":null,"prev":null},"fields":{"path":"content/docs/code-splitting.md","slug":"docs/code-splitting.html"}}},"pageContext":{"slug":"docs/code-splitting.html"}},"staticQueryHashes":[]}