[Документація/Просунуті теми/Розбиття коду] Вичитка (#257)

* Бандлінг

* Розбиття коду та import()

* Заголовок

* React.lazy

* Розбиття коду на основі маршрутів

* Іменовані експорти

Author: Maximaximum

content/docs/code-splitting.md

@@ -1,21 +1,21 @@
 ---
 id: code-splitting
-title: Code-Splitting
+title: Розбиття коду
 permalink: docs/code-splitting.html
 ---
 
-## Розбиття по модулям {#bundling}
+## Зшивання файлів {#bundling}
 
-Більшість React додатків мають власні розбиті за "бандлами" файли використовуючи такі інструменти, як
-[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) або 
+Файли більшості React-додатків зшиваються разом за допомогою таких інструментів, як
+[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) та 
 [Browserify](http://browserify.org/).
-Бандлінг – це процес імпортування файлів та об'єднання їх в один файл – бандл (модуль).
-Цей бандл може потім бути включений до веб-сторінки для завантаження всього додатку
+Зшивання (бандлінг) – це процес об'єднання імпортованих файлів в один файл – бандл.
+Цей бандл потім може бути включений до веб-сторінки для завантаження всього додатку
 одночасно.
 
 #### Приклад {#example}
 
-**App:**
+**Застосунок:**
 
 ```js
 // app.js
@@ -31,7 +31,7 @@ export function add(a, b) {
 }
 ```
 
-**Bundle:**
+**Бандл:**
 
 ```js
 function add(a, b) {
@@ -45,38 +45,36 @@ console.log(add(16, 26)); // 42
 >
 > Наприкінці ваші бандли будуть значно відрізнятися від наведених прикладів.
 
-Якщо ви використовуєте [Create React App](https://create-react-app.dev/), [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/) чи подібний інструмент, ви матимете налаштування Webpack за замовчуванням для бандлінгу вашого 
-додатку.
+Якщо ви використовуєте [Create React App](https://create-react-app.dev/), [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/) чи подібний інструмент, Webpack за замовчуванням налаштований для бандлінгу вашого додатку.
 
-Якщо ви не використовуєте нічого з наведеного чи подібного, вам доведеться налаштовувати бандлінг самостійно. Для прикладів ознайомтеся зі
+Якщо ви не використовуєте нічого з наведеного чи подібного, вам доведеться налаштувати бандлінг самостійно. Для прикладів ознайомтеся зі
 [Встановленням](https://webpack.js.org/guides/installation/) та
-[Початком роботи](https://webpack.js.org/guides/getting-started/) на офіційній 
+[Початком роботи](https://webpack.js.org/guides/getting-started/) в офіційній 
 документації Webpack.
 
 ## Розбиття Коду {#code-splitting}
 
-Розбиття по бандлам – це прекрасно, але з темпом росту вашого додатку, бандли теж зростають.
-Це особливо помітно, якщо ви встановили та використовуєте великі сторонні бібліотеки. Вам потрібно
-стежити за кодом, який потрапляє у ваш бандл для того, щоб в один момент не зробити цей бандл настільки
-великим, що для завантаження вашого додатку знадобиться чимало часу.
+Зшивання файлів – це прекрасно, але з ростом вашого додатку розмір бандлу теж зростатиме.
+Особливо якщо ви використовуєте великі сторонні бібліотеки. Вам потрібно
+стежити за кодом, який ви включаєте у свій бандл, щоб випадково не зробити його настільки великим, що завантаження вашого застосунку займатиме багато часу.
 
-Щоб уникнути розростання бандла, варто почати "розділяти" ваш бандл. 
-Поділ коду - це функціонал, який підтримується такими бандлерами,
+Щоб уникнути розростання бандла, варто заздалегідь почати його розбивати на шматки.
+Розбиття коду - це функціонал, який підтримується такими бандлерами,
 як [Webpack](https://webpack.js.org/guides/code-splitting/),
 [Rollup](https://rollupjs.org/guide/en/#code-splitting) та Browserify (з
 [factor-bundle](https://github.com/browserify/factor-bundle)), що можуть створювати
-декілька бандлів та завантажувати їх у разі потреби.
+декілька окремих бандлів, які можна динамічно завантажувати під час виконання застосунку.
 
-Розбиття коду вашого додатку може допомогти поступово завантажити тільки те,
+Розбиття коду вашого додатку може допомогти "ліниво" завантажувати (lazy load) тільки те,
 що необхідно користувачеві в цей момент. Це може значно покращити продуктивність вашого
-додатку. Хоча ви не скоротили кількість коду вашого додатку, ви уникнули завантаження
-коду, який може ніколи не знадобитись користувачеві та скоротили об'єм коду, що необхідний
+додатку. Хоч ви й не скорочуєте обсяг коду вашого додатку, ви уникаєте завантаження
+того коду, який може ніколи не знадобитись користувачеві, а також скорочуєте обсяг коду, що необхідний
 на початку завантаження додатку.
 
 ## `import()` {#import}
 
 Найращий спосіб впровадження розбиття коду — через синтаксис 
-динамічних `import()`
+динамічного `import()`
 
 **До:**
 
@@ -94,24 +92,22 @@ import("./math").then(math => {
 });
 ```
 
-В той момент, коли Webpack стикається з таким синтаксисом, він автоматично починає розбивати код вашого додатку.
-Якщо ви вже користуєтесь Create React App, це вже налаштовано для вас
-та ви можете одразу [почати користуватися цим](https://facebook.github.io/create-react-app/docs/code-splitting). Це також підтримується
-у [Next.js](https://nextjs.org/docs/advanced-features/dynamic-import) за замовчуванням.
+Коли Webpack стикається з таким синтаксисом, він автоматично починає розбивати код вашого додатку.
+Якщо ви користуєтесь Create React App, він вже налаштований відповідним чином, і ви можете одразу почати [користуватися розбиттям коду](https://facebook.github.io/create-react-app/docs/code-splitting). У [Next.js](https://nextjs.org/docs/advanced-features/dynamic-import) розбиття коду також підтримується за замовчуванням.
 
 Під час самостійного налаштування Webpack, скоріш за все, у вас з'явиться бажання прочитати
 [інструкцію з розбиття коду](https://webpack.js.org/guides/code-splitting/) від Webpack. Конфігурація вашого Webpack повинна мати вигляд, [схожий на цей](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
 
-Під час використання [Babel](https://babeljs.io/), ви маєте пересвідчитись в тому, що Babel може парсити синтаксис динамічних import, виключаючи можливість його перетворення.
+В разі використання [Babel](https://babeljs.io/) ви маєте пересвідчитись в тому, що Babel може парсити синтаксис динамічного import(), але не перетворює його.
 Для цього вам знадобиться [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
 
 ## `React.lazy` {#reactlazy}
 
 > Примітка:
 >
-> `React.lazy` та Suspense ще не доступні для рендерингу на стороні сервера. Якщо ви хочете використовувати розбиття коду в додатках відрендерених на сервері, ми рекомендуємо [Loadable Components](https://github.com/gregberge/loadable-components). Він має гарну [інструкцію для розбиття на бандли, використовуючи серверний рендеринг](https://loadable-components.com/docs/server-side-rendering/).
+> `React.lazy` та Suspense ще не доступні для рендерингу на стороні сервера. Якщо ви хочете використовувати розбиття коду в додатках, відрендерених на сервері, ми рекомендуємо [Loadable Components](https://github.com/gregberge/loadable-components). Вони мають гарну [інструкцію для розбиття на бандли з використанням серверного рендерингу](https://loadable-components.com/docs/server-side-rendering/).
 
-Функція `React.lazy` дозволяє вам рендерити динамічний import, як звичайний компонент
+Функція `React.lazy` дозволяє вам рендерити динамічний import як звичайний компонент
 
 **До:**
 
@@ -125,11 +121,11 @@ import OtherComponent from './OtherComponent';
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 ```
 
-Цей код автоматично завантажить бандл, що містить `OtherComponent` коли цей компонент відрендеритися вперше.
+Цей код автоматично завантажить бандл, що містить `OtherComponent`, коли цей компонент буде рендеритися вперше.
 
-`React.lazy` приймає функцію, яка має викликати динамічний `import()`. Потім повертається `Promise`, який при успішному виконанні поверне модуль з `default` експортом, а у цьому модулі у свою чергу знаходитиметься React-компонент.
+`React.lazy` приймає функцію, яка має викликати динамічний `import()`. Вона має повернути `Promise`, який при вирішенні поверне модуль з `default`-експортом, який містить React-компонент.
 
-Ледачий компонент потім повинен відрендеритися у тілі компонента `Suspense`. Це дозволить нам показати резервний контент (наприклад, індикатор завантаження), поки ми чекаємо коли ледачий компонент завантажиться.
+Ледачий компонент потім повинен відрендеритися у тілі компонента `Suspense`. Це дозволяє нам показати резервний контент (наприклад, індикатор завантаження), поки ми чекаємо на завантаження ледачого компонента.
 
 ```js
 import React, { Suspense } from 'react';
@@ -147,7 +143,7 @@ function MyComponent() {
 }
 ```
 
-`fallback` приймає будь-який React елемент, поки чекає повного завантаження компонента. Компонент `Suspense` можна розмістити де завгодно над "ледачим" компонентом. Ви навіть можете обернути кілька "ледачих" компонентів за допомогою одного `Suspense` компонента
+Проп `fallback` приймає будь-який елемент React, який слід відобразити до повного завантаження компонента. Компонент `Suspense` можна розмістити де завгодно над "ледачим" компонентом. Ви навіть можете обгорнути кілька "ледачих" компонентів одним компонентом `Suspense`.
 
 ```js
 import React, { Suspense } from 'react';
@@ -171,7 +167,7 @@ function MyComponent() {
 
 ### Запобіжники {#error-boundaries}
 
-Якщо інший модуль не завантажився (наприклад, через виключений інтернет) — це призведе до помилки. Ви можете обробити ці помилки, щоб створити гарний досвід користування і керувати відновленням за допомогою [Запобіжників](/docs/error-boundaries.html). Після створення запобіжника, його можна використати де завгодно над "ледачим" компонентами для того, щоб показати стан помилки, коли виникає проблема з мережою.
+Якщо інший модуль не зміг завантажитися (наприклад, через вимкнений інтернет), це призведе до помилки. Ви можете обробляти такі помилки, щоб створити гарний досвід користування і керувати відновленням за допомогою [Запобіжників](/docs/error-boundaries.html). Після створення запобіжника, його можна використовувати де завгодно над "ледачими" компонентами для того, щоб показати стан помилки, коли виникає проблема з мережею.
 
 ```js
 import React, { Suspense } from 'react';
@@ -196,16 +192,16 @@ const MyComponent = () => (
 
 ## Розбиття коду на основі маршрутів {#route-based-code-splitting}
 
-Рішення стосовно того, де саме вводити розбиття коду може бути доволі складним.
-Ви хочете переконатися, що ви обираєте місця, які рівномірно розділять ваші бандли,
-але в жодному разі не порушуватимуть роботу користувача.
+Вирішувати, де саме запроваджувати розбиття коду, часом буває непросто.
+Слід намагатися обирати місця для розбиття таким чином, щоб розбивати бандли рівномірно,
+але при цьому не створювати проблем для користувача.
 
-Вдалим місцем для початку може бути ваш файл з маршрутами додатку. Більшість людей
+Почати можна із маршрутів додатку. Більшість людей
 звикли до того, що перехід між сторінками займає певний час. Крім того, ви часто
 перезавантажуєте цілу сторінку одразу, тому користувачі навряд чи будуть взаємодіяти
 з іншими елементами на сторінці в цей час.
 
-Нижче наведено приклад налаштування розбиття коду файла з маршрутами додатку, використовуючи
+Нижче наведено приклад налаштування розбиття коду на основі маршрутів, використовуючи
 бібліотеку [React Router](https://reacttraining.com/react-router/) за допомогою `React.lazy`.
 
 ```js
@@ -229,7 +225,7 @@ const App = () => (
 
 ## Іменовані Експорти {#named-exports}
 
-Наразі `React.lazy` підтримує тількі експорти за замовчуванням. Якщо модуль, який ви імпортуєте використовує іменовані експорти, можна створити проміжний модуль, який повторно експортуватиме його за замовчуванням. Це гарантує працездатність tree shaking - механізма усунення невикористаного коду.
+Наразі `React.lazy` підтримує тільки експорти за замовчуванням. Якщо модуль, який ви імпортуєте, використовує іменовані експорти, можна створити проміжний модуль, який повторно експортуватиме потрібний компонент за замовчуванням. Це гарантуватиме працездатність tree shaking - механізму усунення невикористаного коду.
 
 ```js
 // ManyComponents.js