Add bundle, bundler, package fixes

alinkedd · alinkedd · commit 46a10b297e49 · 2025-02-24T00:47:55.000+01:00
diff --git a/TRANSLATION.md b/TRANSLATION.md
@@ -74,12 +74,23 @@
 | Орудний | _пропом_ | _пропсами_ |
 | Місцевий | _пропі_ | _пропсах_ |
 
+Бандл
+
+| Відмінок | Однина | Множина |
+| -------- | ------ | ------- |
+| Називний | _бандл_ | _бандли_ |
+| Родовий | _бандла_ | _бандлів_ |
+| Давальний | _бандлу_ | _бандлам_ |
+| Знахідний | _бандл_ | _бандли_ |
+| Орудний | _бандлом_ | _бандлами_ |
+| Місцевий | _бандлі_ | _бандлах_ |
+
 Бандлер
 
 | Відмінок | Однина | Множина |
 | -------- | ------ | ------- |
 | Називний | _бандлер_ | _бандлери_ |
-| Родовий | _бандлеру_ | _бандлерів_ |
+| Родовий | _бандлера_ | _бандлерів_ |
 | Давальний | _бандлеру_ | _бандлерам_ |
 | Знахідний | _бандлер_ | _бандлери_ |
 | Орудний | _бандлером_ | _бандлерами_ |
@@ -108,9 +119,11 @@
 | batch | група оновлень |
 | batching | групування |
 | browser | браузер |
+| build | збірка |
 | build tool | інструмент збирання |
 | build tooling | інструменти збирання |
 | bug | помилка, дефект |
+| bundle | бандл; запаковувати |
 | bundler | бандлер |
 | callback | функція зворотного виклику |
 | camelCase | *camelCase* |
@@ -163,6 +176,7 @@
 | online | онлайн |
 | online playground | онлайн пісочниця |
 | package manager | менеджер пакетів |
+| package registry | реєстр пакетів |
 | paint | фарбування, перефарбування |
 | prop | проп |
 | props | пропси |
diff --git a/src/content/learn/building-a-react-framework.md b/src/content/learn/building-a-react-framework.md
@@ -78,7 +78,7 @@ Rsbuild відразу підтримує такі функції React, як ш
 
 * **Стратегії рендерингу**, щоб увімкнути різні стратегії рендерингу на різних маршрутах, щоб ви могли додавати нові стратегії без переписування всього застосунку. Це може зменшити час до завантаження першого байта вмісту ([час до першого байта, TTFB](https://web.dev/articles/ttfb)), рендерингу першого фрагмента вмісту ([малювання першого вмісту, FCP](https://web.dev/articles/fcp)) і рендерингу найбільшого видимого вмісту застосунку ([малювання найбільшого вмісту, LCP](https://web.dev/articles/lcp)).
 * **Отримання даних**, щоб увімкнути отримання даних перед завантаженням сторінки за певним маршрутом. Це може запобігти зсувам макета ([кумулятивний зсув макета, CLS](https://web.dev/articles/cls)) та   зменшити час до рендерингу найбільшого видимого вмісту застосунку ([малювання найбільшого вмісту, LCP](https://web.dev/articles/lcp))
-* **Розділення коду**, щоб зменшити розмір JavaScript-бандлу, який надсилається клієнту, і підвищити швидкодію на малопотужних пристроях. Це може зменшити час, потрібний браузеру для відповіді на взаємодію користувача ([затримка після першого введення, FID](https://web.dev/articles/fid)) і рендерингу найбільшого видимого вмісту застосунку ([малювання найбільшого вмісту, LCP](https://web.dev/articles/lcp)).
+* **Розділення коду**, щоб зменшити розмір JavaScript-бандла, який надсилається клієнту, і підвищити швидкодію на малопотужних пристроях. Це може зменшити час, потрібний браузеру для відповіді на взаємодію користувача ([затримка після першого введення, FID](https://web.dev/articles/fid)) і рендерингу найбільшого видимого вмісту застосунку ([малювання найбільшого вмісту, LCP](https://web.dev/articles/lcp)).
 
 Якщо ви не впевнені, як працювати з маршрутизацією, рекомендуємо використати [React Router](https://reactrouter.com/start/framework/custom) або [Tanstack Router](https://tanstack.com/router/latest).
 
diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md
@@ -107,7 +107,7 @@ React Router v7 — це фреймворк на основі Vite, який д
 
 Ми також рекомендуємо використовувати Vite під час [додавання React до наявного проєкту](/learn/add-react-to-an-existing-project) або [побудови фреймворку](/learn/building-a-react-framework).
 
-Подібно до того, як у Svelte є Sveltekit, у Vue — Nuxt, а у Solid — SolidStart, React рекомендує використовувати для нових проєктів фреймворк, який легко інтегрується з інструментами збірки, як-от Vite.
+Подібно до того, як у Svelte є Sveltekit, у Vue — Nuxt, а у Solid — SolidStart, React рекомендує використовувати для нових проєктів фреймворк, який легко інтегрується з інструментами збирання, як-от Vite.
 
 </Note>
 
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
@@ -546,7 +546,7 @@ React використовує дерева для моделювання зв'
 
 </Diagram>
 
-Дерево залежностей часто використовується бандлерами, щоб запакувати весь актуальний код JavaScript для завантаження та рендерингу клієнтом. Великий розмір бандлу погіршує досвід користування React-застосунками. Розуміння дерева залежностей модулів корисно для усунення таких проблем.
+Дерево залежностей часто використовується бандлерами, щоб запакувати весь актуальний код JavaScript для завантаження та рендерингу клієнтом. Великий розмір бандла погіршує досвід користування React-застосунками. Розуміння дерева залежностей модулів корисно для усунення таких проблем.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
@@ -111,7 +111,7 @@ function AboutPage() {
 ```
 
 
-React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збірки або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проєкту.
+React не вказує, як додавати файли CSS. У найпростішому випадку ви додасте тег [`<link>`](https://webdoky.org/uk/docs/Web/HTML/Element/link) до свого HTML. Якщо ви використовуєте інструмент збирання або фреймворк, зверніться до його документації, щоб дізнатися, як додати файл CSS до вашого проєкту.
 
 ## Відображення даних {/*displaying-data*/}
 
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -281,7 +281,7 @@ export default [
 
 Дерева залежностей корисні для визначення, які модулі необхідні для запуску вашого React-застосунку. Під час побудови готового до впровадження React-застосунку зазвичай є етап, який запакує (bundle) весь необхідний JavaScript-код для доставлення клієнту. Інструмент, що за це відповідає, називається [бандлер](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), і бандлери використовують дерево залежностей для визначення, які модулі повинно бути включено.
 
-Відповідно до того, як зростає ваш застосунок, збільшується і розмір запакованого застосунку — бандлу. Великі розміри бандлів є "дорогими" для завантаження та виконання клієнтом. Великі розміри бандлів можуть затримувати час відображення вашого UI. Розуміння дерева залежностей вашого застосунку може допомогти з налагодженням цих проблем.
+Відповідно до того, як зростає ваш застосунок, збільшується і розмір запакованого застосунку — бандла. Великі розміри бандлів є "дорогими" для завантаження та виконання клієнтом. Великі розміри бандлів можуть затримувати час відображення вашого UI. Розуміння дерева залежностей вашого застосунку може допомогти з налагодженням цих проблем.
 
 [comment]: <> (perhaps we should also deep dive on conditional imports)
 
@@ -293,7 +293,7 @@ export default [
 * Дерева рендерингу допомагають ідентифікувати, які компоненти є внутрішніми, а які — зовнішніми (листи). Внутрішні компоненти впливають на продуктивність рендерингу всіх компонентів-нащадків, а компоненти-листи часто піддаються повторному рендерингу. Їх ідентифікація корисна для розуміння та налагодження продуктивності рендерингу.
 * Дерева залежностей відображають залежності модулів у React-застосунку.
 * Дерева залежностей використовуються бандлерами, щоб запакувати необхідний код для доставлення застосунку.
-* Дерева залежностей корисні для налагодження великих розмірів бандлів, які збільшують час до появи першого вмісту та показують можливі оптимізації відносно того, який код додається до бандлу.
+* Дерева залежностей корисні для налагодження великих розмірів бандлів, які збільшують час до появи першого вмісту та показують можливі оптимізації відносно того, який код додається до бандла.
 
 </Recap>
 
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
@@ -350,7 +350,7 @@ p {
 const [popupContainer, setPopupContainer] = useState(null);
 ```
 
-При створенні віджета з допомогою стороннього пакету, зберігайте повернений віджетом DOM-вузол, щоб мати змогу рендерити контент в середину нього:
+Під час створення стороннього віджета зберігайте повернений віджетом DOM-вузол, щоб мати змогу рендерити контент в середину нього:
 
 ```js {5-6}
 useEffect(() => {
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
@@ -44,7 +44,7 @@ function MyComponent() {
 
 * Eлементи-провайдери не впливають на виклик `useContext()` у компоненті, з якого й повертаються. Відповідний `<Context.Provider>` **повинен бути розташований *вище*** компонента, що викликає `useContext()`.
 * React **автоматично оновлює** всі дочірні компоненти, які використовують певний контекст, починаючи з провайдера, що отримує змінене значення `value`. Попереднє та наступне значення порівнюються за допомогою [`Object.is`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/is/). Пропуск повторних рендерів за допомогою [`memo`](/reference/react/memo) не заважає дочірнім компонентам отримувати оновлене значення контексту.
-* Якщо ваша система збірки створює дублікати модулів у вихідному коді (що може статися через символьні посилання), це може порушити контекст. Передавання через контекст працює тільки у разі, якщо `SomeContext` для надання контексту та `SomeContext` для його зчитування є ***точно* тим самим об'єктом**, що визначається порівнянням `===`.
+* Якщо ваша система збирання створює дублікати модулів у вихідному коді (що може статися через символьні посилання), це може порушити контекст. Передавання через контекст працює тільки у разі, якщо `SomeContext` для надання контексту та `SomeContext` для його зчитування є ***точно* тим самим об'єктом**, що визначається порівнянням `===`.
 
 ---
 
@@ -1351,7 +1351,7 @@ function MyApp() {
 
 1. Ви розміщуєте `<SomeContext.Provider>` у тому ж компоненті або нижче, ніж компонент, де викликано `useContext()`. Перемістіть `<SomeContext.Provider>` *вище і зовні* компонента, який викликає `useContext()`.
 2. Можливо, ви забули обгорнути свій компонент у `<SomeContext.Provider>` або розмістили його в іншій, ніж задумали, частині дерева. Переконайтеся за допомогою [React DevTools](/learn/react-developer-tools), що ієрархія компонентів налаштована правильно.
-3. Можливо, ви зіткнулися з проблемою збірки, через яку `SomeContext` із компонента-провайдера і `SomeContext` компонента-читача є різними об'єктами. Це може статися, наприклад, якщо ви використовуєте символьні посилання. Можете перевірити це, присвоївши їх глобальним змінним, як-от `window.SomeContext1` і `window.SomeContext2`, а потім порівняти `window.SomeContext1 === window.SomeContext2` в консолі. Якщо вони не тотожні, виправте цю проблему на рівні збірки.
+3. Можливо, ви зіткнулися з проблемою збирання, через яку `SomeContext` із компонента-провайдера і `SomeContext` компонента-читача є різними об'єктами. Це може статися, наприклад, якщо ви використовуєте символьні посилання. Можете перевірити це, присвоївши їх глобальним змінним, як-от `window.SomeContext1` і `window.SomeContext2`, а потім порівняти `window.SomeContext1 === window.SomeContext2` в консолі. Якщо вони не тотожні, виправте цю проблему на рівні збирання.
 
 ### Я завжди отримую `undefined` із контексту, хоча початкове значення інше {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
 
