From 34af8f7970b9c983f658f6e1a6b979cce92f0cd6 Mon Sep 17 00:00:00 2001 From: avevlad Date: Tue, 12 Mar 2019 00:11:54 +0300 Subject: [PATCH 01/40] Translate "Code-Splitting" into Russian --- content/docs/code-splitting.md | 141 +++++++++++++++------------------ content/docs/nav.yml | 2 +- 2 files changed, 67 insertions(+), 76 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 32483c5f2..92f5678b7 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,20 +1,19 @@ --- id: code-splitting -title: Code-Splitting +title: Разделение кода permalink: docs/code-splitting.html --- -## Bundling {#bundling} +## Бандлинг модулей {#bundling} -Most React apps will have their files "bundled" using tools like -[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). -Bundling is the process of following imported files and merging them into a -single file: a "bundle". This bundle can then be included on a webpage to load -an entire app at once. +Большинство React приложений собираются инструментами типа +[Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/) и состоят из нескольких "бандл" файлов. +Бандлинг -- это процесс группировки файлов с модулями и их зависимостями в один "бандл" файл. +Этот бандл после подключения на веб странице загружает всё приложение за один раз. -#### Example {#example} +#### Пример {#example} -**App:** +**Приложение:** ```js // app.js @@ -30,7 +29,7 @@ export function add(a, b) { } ``` -**Bundle:** +**Бандл:** ```js function add(a, b) { @@ -40,44 +39,37 @@ function add(a, b) { console.log(add(16, 26)); // 42 ``` -> Note: +> Примечание: > -> Your bundles will end up looking a lot different than this. +> Ваши бандлы будут выглядеть иначе, чем это. -If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your -app. +Если вы используете [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), или похожие инструменты, вы можете не задумываться о настройках, webpack там настроен из коробки. -If you aren't, you'll need to setup bundling yourself. For example, see the -[Installation](https://webpack.js.org/guides/installation/) and -[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the -Webpack docs. +Иначе, вам нужно будет настроить webpack самостоятельно. +Для этого ознакомьтесь со страницами +[Установка](https://webpack.js.org/guides/installation/) и +[Начала работы](https://webpack.js.org/guides/getting-started/) в документации по Webpack. -## Code Splitting {#code-splitting} +## Разделение кода {#code-splitting} -Bundling is great, but as your app grows, your bundle will grow too. Especially -if you are including large third-party libraries. You need to keep an eye on -the code you are including in your bundle so that you don't accidentally make -it so large that your app takes a long time to load. +Бандлинг это отлично, но по мере того как ваше приложение растет, ваш бандл тоже растет. +Особенно если вы подключаете крупные сторонние библиотеки. +Вам нужно следить за тем что вы подключаете, чтобы случайно не сделать приложение настолько большим, +что его загрузка займет слишком много времени. -To avoid winding up with a large bundle, it's good to get ahead of the problem -and start "splitting" your bundle. - [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature -supported by bundlers like Webpack and Browserify (via -[factor-bundle](https://github.com/browserify/factor-bundle)) which can create -multiple bundles that can be dynamically loaded at runtime. +Чтобы предотвратить разрастание бандла, хорошо начать “разделять” ваш бандл. +[Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность которая поддерживается такими бандлерами +как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), она может разделить +ваш бандл на несколькокусочков и загружать их по мере необходимости. -Code-splitting your app can help you "lazy-load" just the things that are -currently needed by the user, which can dramatically improve the performance of -your app. While you haven't reduced the overall amount of code in your app, -you've avoided loading code that the user may never need, and reduced the amount -of code needed during the initial load. +Хоть вы и не уменьшите общий объем кода вашего приложения, но вы избежите загрузки кода, который +может никогда не понадобиться пользователю и уменьшите объем кода необходимый для начальной загрузки. ## `import()` {#import} -The best way to introduce code-splitting into your app is through the dynamic -`import()` syntax. +Лучший способ внедрить разделение кода в приложение -- использовать синтаксис динамического импорта: `import()`. -**Before:** +**До:** ```js import { add } from './math'; @@ -85,7 +77,7 @@ import { add } from './math'; console.log(add(16, 26)); ``` -**After:** +**После:** ```js import("./math").then(math => { @@ -93,33 +85,36 @@ import("./math").then(math => { }); ``` -> Note: -> -> The dynamic `import()` syntax is a ECMAScript (JavaScript) -> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently -> part of the language standard. It is expected to be accepted in the -> near future. +> Примечание: +> +> Синтаксис динамического импорта `import()` -- это ECMAScript (JavaScript) +> [предложение](https://github.com/tc39/proposal-dynamic-import), +> которое в данный момент не входит в стандарт языка. Ожидается, что он будет принят в ближайшем будущем. + +Когда Webpack сталкивается с таким синтаксисом, он автоматически запускает разделение кода вашего приложения. +Если вы используете Create React App, то он уже настроен, +вы можете [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) этот синтаксис прямо сейчас. +Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). -When Webpack comes across this syntax, it automatically starts code-splitting -your app. If you're using Create React App, this is already configured for you -and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported -out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import). +Если вы настраиваете Webpack самостоятельно, то вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). +Ваш Webpack конфиг должен выглядеть [примерно так](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). -If you're setting up Webpack yourself, you'll probably want to read Webpack's -[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). +Если вы используете [Babel](https://babeljs.io/), вам необходимо убедиться, что он понимает синтаксис динамического импорта. +Для этого вам необходимо установить плагин [@babel/plugin-syntax-dynamic-import](https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import). -When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can -parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import). ## `React.lazy` {#reactlazy} -> Note: +> Примечание: > -> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). +> `React.lazy` и Suspense пока недоступны для рендеринга на стороне сервера. +> Если вам нужно разделение кода в серверном приложении, мы рекомендуем [Loadable Components](https://github.com/smooth-code/loadable-components). +> У них есть хорошее [руководство по разделению бандла](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) с серверным рендерингом. + -The `React.lazy` function lets you render a dynamic import as a regular component. +Функция `React.lazy` позволяет рендерить динамический импорт как обычный компонент. -**Before:** +**До:** ```js import OtherComponent from './OtherComponent'; @@ -133,7 +128,7 @@ function MyComponent() { } ``` -**After:** +**После:** ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -147,13 +142,13 @@ function MyComponent() { } ``` -This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. +Она автоматически загрузит бандл содержащий `OtherComponent`, когда этот компонент будет отрендерен. -`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. +`React.lazy` принимает функцию, которая должна вызвать динамический `import()`. ### Suspense {#suspense} -If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component. +Если модуль, содержащий `OtherComponent`, еще не загружен к моменту рендеринга `MyComponent`, мы должны показать запасное содержимое, пока ожидаем загрузки, например индикатор загрузки. Это можно сделать с помощью компонента `Suspense`. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -169,7 +164,7 @@ function MyComponent() { } ``` -The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component. +Этот `fallback` проп принимает любой React-элемент, который вы хотите показать во время ожидания загрузки компонента. Компонент `Suspense` можно разместить в любом месте над ленивым компонентом. Кроме того, можно обернуть несколько ленивых компонентов одним компонентом `Suspense`. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -189,9 +184,10 @@ function MyComponent() { } ``` -### Error boundaries {#error-boundaries} +### Предохранители (компоненты Error Boundary) {#error-boundaries} -If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error. + +Если какой-то модуль не загружается (например, из-за сбоя сети), это вызовет ошибку. Вы можете обрабатывать эти ошибки ради хорошего пользовательского опыта с помощью [Предохранителей](/docs/error-boundaries.html). Создав предохранитель, вы можете использовать его в любом месте над ленивыми компонентами для отображения состояния ошибки. ```js import MyErrorBoundary from './MyErrorBoundary'; @@ -212,19 +208,14 @@ const MyComponent = () => ( ); ``` -## Route-based code splitting {#route-based-code-splitting} +## Разделение кода на основе маршрутов {#route-based-code-splitting} + +Решение о том, где в вашем приложении ввести разделение кода, может быть немного сложным. -Deciding where in your app to introduce code splitting can be a bit tricky. You -want to make sure you choose places that will split bundles evenly, but won't -disrupt the user experience. +Хороший вариант чтобы начать это -- маршруты. Большинство людей в интернете привыкли к переходам страниц, которые занимают некоторое время. Вы также склонны повторно рендерить всю страницу сразу, поэтому ваши пользователи вряд ли будут взаимодействовать с другими элементами на странице одновременно. -A good place to start is with routes. Most people on the web are used to -page transitions taking some amount of time to load. You also tend to be -re-rendering the entire page at once so your users are unlikely to be -interacting with other elements on the page at the same time. +Вот пример того, как организовать разделение кода на основе маршрутов в приложении с помощью библиотек, таких как [React Router](https://reacttraining.com/react-router/) с `React.lazy`. -Here's an example of how to setup route-based code splitting into your app using -libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -245,9 +236,9 @@ const App = () => ( ); ``` -## Named Exports {#named-exports} +## Именованный Экспорт {#named-exports} -`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components. +`React.lazy` в настоящее время поддерживает только экспорт по умолчанию. Если модуль, который требуется импортировать, использует именованный экспорт, можно создать промежуточный модуль, который повторно экспортирует его как модуль по умолчанию. Это гарантирует что treeshaking будет работать. ```js // ManyComponents.js diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 5c3067a3d..95e928ad6 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -40,7 +40,7 @@ - id: accessibility title: Accessibility - id: code-splitting - title: Code-Splitting + title: Разделение кода - id: context title: Контекст - id: error-boundaries From 5285951e9c87719e55500637ffdc92b9abdd893a Mon Sep 17 00:00:00 2001 From: avevlad Date: Tue, 12 Mar 2019 10:45:36 +0300 Subject: [PATCH 02/40] Typo fix "Code-Splitting" #246 --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 92f5678b7..a0bb85ae8 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -60,7 +60,7 @@ console.log(add(16, 26)); // 42 Чтобы предотвратить разрастание бандла, хорошо начать “разделять” ваш бандл. [Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность которая поддерживается такими бандлерами как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), она может разделить -ваш бандл на несколькокусочков и загружать их по мере необходимости. +ваш бандл на несколько кусочков и загружать их по мере необходимости. Хоть вы и не уменьшите общий объем кода вашего приложения, но вы избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объем кода необходимый для начальной загрузки. From 505785e032cce960f9b641108b8a28820916b574 Mon Sep 17 00:00:00 2001 From: avevlad Date: Tue, 12 Mar 2019 11:58:19 +0300 Subject: [PATCH 03/40] =?UTF-8?q?Typo=20fix=20=D0=B5=20->=20=D1=91=20"Code?= =?UTF-8?q?-Splitting"=20#246?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/code-splitting.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index a0bb85ae8..811528704 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -52,18 +52,18 @@ console.log(add(16, 26)); // 42 ## Разделение кода {#code-splitting} -Бандлинг это отлично, но по мере того как ваше приложение растет, ваш бандл тоже растет. +Бандлинг это отлично, но по мере того как ваше приложение растёт, ваш бандл тоже растёт. Особенно если вы подключаете крупные сторонние библиотеки. Вам нужно следить за тем что вы подключаете, чтобы случайно не сделать приложение настолько большим, -что его загрузка займет слишком много времени. +что его загрузка займёт слишком много времени. Чтобы предотвратить разрастание бандла, хорошо начать “разделять” ваш бандл. [Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность которая поддерживается такими бандлерами как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), она может разделить ваш бандл на несколько кусочков и загружать их по мере необходимости. -Хоть вы и не уменьшите общий объем кода вашего приложения, но вы избежите загрузки кода, который -может никогда не понадобиться пользователю и уменьшите объем кода необходимый для начальной загрузки. +Хоть вы и не уменьшите общий объём кода вашего приложения, но вы избежите загрузки кода, который +может никогда не понадобиться пользователю и уменьшите объём кода необходимый для начальной загрузки. ## `import()` {#import} @@ -148,7 +148,7 @@ function MyComponent() { ### Suspense {#suspense} -Если модуль, содержащий `OtherComponent`, еще не загружен к моменту рендеринга `MyComponent`, мы должны показать запасное содержимое, пока ожидаем загрузки, например индикатор загрузки. Это можно сделать с помощью компонента `Suspense`. +Если модуль, содержащий `OtherComponent`, ещё не загружен к моменту рендеринга `MyComponent`, мы должны показать запасное содержимое, пока ожидаем загрузки, например индикатор загрузки. Это можно сделать с помощью компонента `Suspense`. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); From 81be3a04922d4f4a6aade8d9947a8d9c7dfff163 Mon Sep 17 00:00:00 2001 From: rlax Date: Wed, 13 Mar 2019 11:22:23 +0300 Subject: [PATCH 04/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 811528704..ec758a98f 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -96,7 +96,7 @@ import("./math").then(math => { вы можете [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) этот синтаксис прямо сейчас. Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). -Если вы настраиваете Webpack самостоятельно, то вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). +Если вы настраиваете Webpack самостоятельно, то, вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). Ваш Webpack конфиг должен выглядеть [примерно так](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). Если вы используете [Babel](https://babeljs.io/), вам необходимо убедиться, что он понимает синтаксис динамического импорта. From ec9da5e5d8066c6ff60dbb0d5743d52a3ba5dd9c Mon Sep 17 00:00:00 2001 From: rlax Date: Wed, 13 Mar 2019 11:23:40 +0300 Subject: [PATCH 05/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index ec758a98f..eb8651443 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -43,7 +43,7 @@ console.log(add(16, 26)); // 42 > > Ваши бандлы будут выглядеть иначе, чем это. -Если вы используете [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), или похожие инструменты, вы можете не задумываться о настройках, webpack там настроен из коробки. +Если вы используете [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) или похожие инструменты, то у вас уже будет настроенный Webpack для бандлинга приложения. Иначе, вам нужно будет настроить webpack самостоятельно. Для этого ознакомьтесь со страницами From 4675e425c4abeddda1ffc41535783524e077d58d Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:23:56 +0300 Subject: [PATCH 06/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index eb8651443..8f0e0854c 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -146,7 +146,7 @@ function MyComponent() { `React.lazy` принимает функцию, которая должна вызвать динамический `import()`. -### Suspense {#suspense} +### Задержка {#suspense} Если модуль, содержащий `OtherComponent`, ещё не загружен к моменту рендеринга `MyComponent`, мы должны показать запасное содержимое, пока ожидаем загрузки, например индикатор загрузки. Это можно сделать с помощью компонента `Suspense`. From d049c8aee458ece83b13095a4f7dd9269e738488 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:24:05 +0300 Subject: [PATCH 07/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 8f0e0854c..f3c26988c 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -236,7 +236,7 @@ const App = () => ( ); ``` -## Именованный Экспорт {#named-exports} +## Именованный экспорт {#named-exports} `React.lazy` в настоящее время поддерживает только экспорт по умолчанию. Если модуль, который требуется импортировать, использует именованный экспорт, можно создать промежуточный модуль, который повторно экспортирует его как модуль по умолчанию. Это гарантирует что treeshaking будет работать. From 9ae689547e6935854412812ad1de9f27b4dad9ef Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:24:14 +0300 Subject: [PATCH 08/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index f3c26988c..1cd79de08 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -184,7 +184,7 @@ function MyComponent() { } ``` -### Предохранители (компоненты Error Boundary) {#error-boundaries} +### Предохранители {#error-boundaries} Если какой-то модуль не загружается (например, из-за сбоя сети), это вызовет ошибку. Вы можете обрабатывать эти ошибки ради хорошего пользовательского опыта с помощью [Предохранителей](/docs/error-boundaries.html). Создав предохранитель, вы можете использовать его в любом месте над ленивыми компонентами для отображения состояния ошибки. From cc3ee66622f5e58b4fd6f771bccbb6bdbcfff6cf Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:24:24 +0300 Subject: [PATCH 09/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 1cd79de08..5a988427f 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -57,7 +57,7 @@ console.log(add(16, 26)); // 42 Вам нужно следить за тем что вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени. -Чтобы предотвратить разрастание бандла, хорошо начать “разделять” ваш бандл. +Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл. [Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность которая поддерживается такими бандлерами как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), она может разделить ваш бандл на несколько кусочков и загружать их по мере необходимости. From 94f12198d1ea3848b3b18d45708d971486ca6ba4 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:24:38 +0300 Subject: [PATCH 10/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 5a988427f..8d9e61714 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -52,7 +52,7 @@ console.log(add(16, 26)); // 42 ## Разделение кода {#code-splitting} -Бандлинг это отлично, но по мере того как ваше приложение растёт, ваш бандл тоже растёт. +Бандлинг это хорошо, но по мере роста вашего приложения, ваш бандл также будет расти. Особенно если вы подключаете крупные сторонние библиотеки. Вам нужно следить за тем что вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени. From 6b505484ae621485fc36a9c74d7a49e56cf17c6d Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:25:13 +0300 Subject: [PATCH 11/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 8d9e61714..50e4bd456 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -9,7 +9,7 @@ permalink: docs/code-splitting.html Большинство React приложений собираются инструментами типа [Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/) и состоят из нескольких "бандл" файлов. Бандлинг -- это процесс группировки файлов с модулями и их зависимостями в один "бандл" файл. -Этот бандл после подключения на веб странице загружает всё приложение за один раз. +Этот бандл после подключения на веб-страницу загружает всё приложение за один раз. #### Пример {#example} From 2627a7a9dc63763743895c8febf326ac99d86a7e Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:25:32 +0300 Subject: [PATCH 12/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 50e4bd456..88375e2ff 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -4,7 +4,7 @@ title: Разделение кода permalink: docs/code-splitting.html --- -## Бандлинг модулей {#bundling} +## Бандлинг {#bundling} Большинство React приложений собираются инструментами типа [Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/) и состоят из нескольких "бандл" файлов. From 16c8d4a856d67d2da4c2abfa072e8d19ce6c6d52 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:46:59 +0300 Subject: [PATCH 13/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 88375e2ff..37c017d2d 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -6,7 +6,7 @@ permalink: docs/code-splitting.html ## Бандлинг {#bundling} -Большинство React приложений собираются инструментами типа +Большинство React-приложений «собирают» свои файлы такими инструментами, как [Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/) и состоят из нескольких "бандл" файлов. Бандлинг -- это процесс группировки файлов с модулями и их зависимостями в один "бандл" файл. Этот бандл после подключения на веб-страницу загружает всё приложение за один раз. From af87cacf4ada8186f353171001a528d2467e3577 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:47:08 +0300 Subject: [PATCH 14/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 37c017d2d..beedd941c 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -8,7 +8,7 @@ permalink: docs/code-splitting.html Большинство React-приложений «собирают» свои файлы такими инструментами, как [Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/) и состоят из нескольких "бандл" файлов. -Бандлинг -- это процесс группировки файлов с модулями и их зависимостями в один "бандл" файл. +Бандлинг -- это процесс отслеживания импортированных файлов и их объединения их в один «бандл-файл». Этот бандл после подключения на веб-страницу загружает всё приложение за один раз. #### Пример {#example} From fe9a5dd1b13bd7a6939587d35d020288db199c69 Mon Sep 17 00:00:00 2001 From: Anton Ahatov Date: Wed, 13 Mar 2019 11:47:15 +0300 Subject: [PATCH 15/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index beedd941c..9600647fc 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -7,7 +7,7 @@ permalink: docs/code-splitting.html ## Бандлинг {#bundling} Большинство React-приложений «собирают» свои файлы такими инструментами, как -[Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/) и состоят из нескольких "бандл" файлов. +[Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/). Бандлинг -- это процесс отслеживания импортированных файлов и их объединения их в один «бандл-файл». Этот бандл после подключения на веб-страницу загружает всё приложение за один раз. From e9bbbbe118fd9b08ae71b8ad846a1b2fd5c6e148 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:14:50 +0300 Subject: [PATCH 16/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 9600647fc..5c961336a 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -41,7 +41,7 @@ console.log(add(16, 26)); // 42 > Примечание: > -> Ваши бандлы будут выглядеть иначе, чем это. +> Ваши бандлы будут выглядеть не так, как мы только что показали. Если вы используете [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) или похожие инструменты, то у вас уже будет настроенный Webpack для бандлинга приложения. From 72067d951b693e782394514dc1ae165c1c3fac60 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:15:08 +0300 Subject: [PATCH 17/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 5c961336a..321de5c03 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -48,7 +48,7 @@ console.log(add(16, 26)); // 42 Иначе, вам нужно будет настроить webpack самостоятельно. Для этого ознакомьтесь со страницами [Установка](https://webpack.js.org/guides/installation/) и -[Начала работы](https://webpack.js.org/guides/getting-started/) в документации по Webpack. +[Начало работы](https://webpack.js.org/guides/getting-started/) в документации по Webpack. ## Разделение кода {#code-splitting} From 3b07732b10d605f24530880c28451b450b25d1ab Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:15:27 +0300 Subject: [PATCH 18/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 321de5c03..6a8d87b10 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -54,7 +54,7 @@ console.log(add(16, 26)); // 42 Бандлинг это хорошо, но по мере роста вашего приложения, ваш бандл также будет расти. Особенно если вы подключаете крупные сторонние библиотеки. -Вам нужно следить за тем что вы подключаете, чтобы случайно не сделать приложение настолько большим, +Вам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени. Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл. From 8967e86c003fb45fe0c17f9cc28560e9fec4ae1b Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:15:48 +0300 Subject: [PATCH 19/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 6a8d87b10..73f8547ca 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -52,7 +52,7 @@ console.log(add(16, 26)); // 42 ## Разделение кода {#code-splitting} -Бандлинг это хорошо, но по мере роста вашего приложения, ваш бандл также будет расти. +Бандлинг это хорошо, но по мере роста вашего приложения, ваш бандл тоже будет расти. Особенно если вы подключаете крупные сторонние библиотеки. Вам нужно следить за кодом, который вы подключаете, чтобы случайно не сделать приложение настолько большим, что его загрузка займёт слишком много времени. From 060ba89af2746576d4beb927b63b7874cbf0042e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:16:10 +0300 Subject: [PATCH 20/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 73f8547ca..30d049e0d 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -58,7 +58,7 @@ console.log(add(16, 26)); // 42 что его загрузка займёт слишком много времени. Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл. -[Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность которая поддерживается такими бандлерами +[Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность, поддерживаемая такими бандлерами как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), она может разделить ваш бандл на несколько кусочков и загружать их по мере необходимости. From ffdd9318b9444eea882e98a68de6615091ec2efd Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:18:13 +0300 Subject: [PATCH 21/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 30d049e0d..6205afad3 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -59,7 +59,7 @@ console.log(add(16, 26)); // 42 Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл. [Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность, поддерживаемая такими бандлерами -как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), она может разделить +как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), которая может создавать ваш бандл на несколько кусочков и загружать их по мере необходимости. Хоть вы и не уменьшите общий объём кода вашего приложения, но вы избежите загрузки кода, который From cd88754a6f0cf3be67b39fdc384068840e071005 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:20:58 +0300 Subject: [PATCH 22/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 6205afad3..24e61367a 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -187,7 +187,7 @@ function MyComponent() { ### Предохранители {#error-boundaries} -Если какой-то модуль не загружается (например, из-за сбоя сети), это вызовет ошибку. Вы можете обрабатывать эти ошибки ради хорошего пользовательского опыта с помощью [Предохранителей](/docs/error-boundaries.html). Создав предохранитель, вы можете использовать его в любом месте над ленивыми компонентами для отображения состояния ошибки. +Если какой-то модуль не загружается (например, из-за сбоя сети), это вызовет ошибку. Вы можете обрабатывать эти ошибки для улучшения пользовательского опыта с помощью [Предохранителей](/docs/error-boundaries.html). После создания предохранителя, его можно использовать в любом месте над ленивыми компонентами для отображения состояния ошибки. ```js import MyErrorBoundary from './MyErrorBoundary'; From c631fbc49ad91a7e5e2e71739c00f8c1cc94c06f Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:24:09 +0300 Subject: [PATCH 23/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 24e61367a..0e1de7721 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -60,7 +60,7 @@ console.log(add(16, 26)); // 42 Чтобы предотвратить разрастание бандла, стоит начать «разделять» ваш бандл. [Разделение кода](https://webpack.js.org/guides/code-splitting/) это возможность, поддерживаемая такими бандлерами как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), которая может создавать -ваш бандл на несколько кусочков и загружать их по мере необходимости. +несколько бандлов и загружать их по мере необходимости. Хоть вы и не уменьшите общий объём кода вашего приложения, но вы избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объём кода необходимый для начальной загрузки. From 3745a6d5b2d13bb491f1376fb7a4aa1a9e77c2b8 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:24:28 +0300 Subject: [PATCH 24/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 0e1de7721..1f077bc48 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -63,7 +63,7 @@ console.log(add(16, 26)); // 42 несколько бандлов и загружать их по мере необходимости. Хоть вы и не уменьшите общий объём кода вашего приложения, но вы избежите загрузки кода, который -может никогда не понадобиться пользователю и уменьшите объём кода необходимый для начальной загрузки. +может никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки. ## `import()` {#import} From 5c4b54ed3e6f44ab1bd0e8076ab2309e3ffa83e4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:24:54 +0300 Subject: [PATCH 25/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 1f077bc48..89de10032 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -62,7 +62,7 @@ console.log(add(16, 26)); // 42 как Webpack или Browserify (с [factor-bundle](https://github.com/browserify/factor-bundle)), которая может создавать несколько бандлов и загружать их по мере необходимости. -Хоть вы и не уменьшите общий объём кода вашего приложения, но вы избежите загрузки кода, который +Хоть вы и не уменьшите общий объём кода вашего приложения, но избежите загрузки кода, который может никогда не понадобиться пользователю и уменьшите объём кода, необходимый для начальной загрузки. ## `import()` {#import} From 2035406d888bf30f7c4df8dfc8f722614aac441f Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:30:04 +0300 Subject: [PATCH 26/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 89de10032..7add460c7 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -212,7 +212,7 @@ const MyComponent = () => ( Решение о том, где в вашем приложении ввести разделение кода, может быть немного сложным. -Хороший вариант чтобы начать это -- маршруты. Большинство людей в интернете привыкли к переходам страниц, которые занимают некоторое время. Вы также склонны повторно рендерить всю страницу сразу, поэтому ваши пользователи вряд ли будут взаимодействовать с другими элементами на странице одновременно. +Часто таким удобным местом оказываются маршруты. Большинство интернет-пользователей привыкли к задержкам во время переходов между страницами. Поэтому и вам может быть выгодно повторно отрендерить всю страницу целиком. Это не позволит пользователиям взаимодействовать с другими элементами на странице, пока происходит обновление. Вот пример того, как организовать разделение кода на основе маршрутов в приложении с помощью библиотек, таких как [React Router](https://reacttraining.com/react-router/) с `React.lazy`. From f59e2dbbef43c8136c7ce80b9d1fac53f1373ae2 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:30:21 +0300 Subject: [PATCH 27/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 7add460c7..651bf90c8 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -214,7 +214,7 @@ const MyComponent = () => ( Часто таким удобным местом оказываются маршруты. Большинство интернет-пользователей привыкли к задержкам во время переходов между страницами. Поэтому и вам может быть выгодно повторно отрендерить всю страницу целиком. Это не позволит пользователиям взаимодействовать с другими элементами на странице, пока происходит обновление. -Вот пример того, как организовать разделение кода на основе маршрутов в приложении с помощью библиотек, таких как [React Router](https://reacttraining.com/react-router/) с `React.lazy`. +Вот пример того, как организовать разделение кода на основе маршрутов с помощью `React.lazy` и таких библиотек как [React Router](https://reacttraining.com/react-router/). ```js From 30d6888a06c7aef67eb07d92d13b08408fbebc2e Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:30:51 +0300 Subject: [PATCH 28/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 651bf90c8..546f56061 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -238,7 +238,7 @@ const App = () => ( ## Именованный экспорт {#named-exports} -`React.lazy` в настоящее время поддерживает только экспорт по умолчанию. Если модуль, который требуется импортировать, использует именованный экспорт, можно создать промежуточный модуль, который повторно экспортирует его как модуль по умолчанию. Это гарантирует что treeshaking будет работать. +`React.lazy` в настоящее время поддерживает только экспорт по умолчанию. Если модуль, который требуется импортировать, использует именованный экспорт, можно создать промежуточный модуль, который повторно экспортирует его как модуль по умолчанию. Это гарантирует работоспособность treeshaking -- механизма устранения неиспользуемого кода. ```js // ManyComponents.js From 2fef9b156c72a711436a9c40a82ef17ed3f0e129 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:32:05 +0300 Subject: [PATCH 29/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 546f56061..777b34ff6 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -210,7 +210,7 @@ const MyComponent = () => ( ## Разделение кода на основе маршрутов {#route-based-code-splitting} -Решение о том, где в вашем приложении ввести разделение кода, может быть немного сложным. +Решение о том, где в вашем приложении ввести разделение кода, может быть непростым. В идеале, следует выбрать такие места, чтобы код разделялся на бандлы примерно одного размера, тем самым поддерживая хороший пользовательский опыт. Часто таким удобным местом оказываются маршруты. Большинство интернет-пользователей привыкли к задержкам во время переходов между страницами. Поэтому и вам может быть выгодно повторно отрендерить всю страницу целиком. Это не позволит пользователиям взаимодействовать с другими элементами на странице, пока происходит обновление. From bec28edaff1d439f69b02ab9f561812cdae41570 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:38:03 +0300 Subject: [PATCH 30/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 777b34ff6..824753ef5 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -164,7 +164,7 @@ function MyComponent() { } ``` -Этот `fallback` проп принимает любой React-элемент, который вы хотите показать во время ожидания загрузки компонента. Компонент `Suspense` можно разместить в любом месте над ленивым компонентом. Кроме того, можно обернуть несколько ленивых компонентов одним компонентом `Suspense`. +Проп `fallback` принимает любой React-элемент, который вы хотите показать, пока происходит загрузка компонента. Компонент `Suspense` можно разместить в любом месте над ленивым компонентом. Кроме того, можно обернуть несколько ленивых компонентов одним компонентом `Suspense`. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); From 79b556fda70e0322b4d344bf781e7c3034940b10 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:38:57 +0300 Subject: [PATCH 31/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 824753ef5..732a682f5 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -144,7 +144,7 @@ function MyComponent() { Она автоматически загрузит бандл содержащий `OtherComponent`, когда этот компонент будет отрендерен. -`React.lazy` принимает функцию, которая должна вызвать динамический `import()`. +`React.lazy` принимает функцию, которая должна вызвать динамический `import()`. Результатом возвращённого Promise является модуль, который экспортирует по умолчанию React-компонент (`export default`). ### Задержка {#suspense} From 64ce5f01e1c24b4de256ce15986c0beac2af4754 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:39:27 +0300 Subject: [PATCH 32/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 732a682f5..f8435d019 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -107,7 +107,7 @@ import("./math").then(math => { > Примечание: > -> `React.lazy` и Suspense пока недоступны для рендеринга на стороне сервера. +> Возможности `React.lazy` и задержки (suspense) пока недоступны для рендеринга на стороне сервера. > Если вам нужно разделение кода в серверном приложении, мы рекомендуем [Loadable Components](https://github.com/smooth-code/loadable-components). > У них есть хорошее [руководство по разделению бандла](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md) с серверным рендерингом. From 42dd234171bc0fc3902caadc41fefefc5142a057 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:39:51 +0300 Subject: [PATCH 33/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index f8435d019..7cdeedb88 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -97,7 +97,7 @@ import("./math").then(math => { Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). Если вы настраиваете Webpack самостоятельно, то, вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). -Ваш Webpack конфиг должен выглядеть [примерно так](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). +Файл конфигурации Webpack должен выглядеть [примерно так](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). Если вы используете [Babel](https://babeljs.io/), вам необходимо убедиться, что он понимает синтаксис динамического импорта. Для этого вам необходимо установить плагин [@babel/plugin-syntax-dynamic-import](https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import). From 29b83b7a6651a13cc97ac751354d930eee96db04 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:40:20 +0300 Subject: [PATCH 34/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 7cdeedb88..7939c6787 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -93,7 +93,7 @@ import("./math").then(math => { Когда Webpack сталкивается с таким синтаксисом, он автоматически запускает разделение кода вашего приложения. Если вы используете Create React App, то он уже настроен, -вы можете [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) этот синтаксис прямо сейчас. +вы можете сразу [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) синтаксис динамического импорта. Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). Если вы настраиваете Webpack самостоятельно, то, вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). From dc82ecb1eff4a7a02b424fa48504562f5564feb0 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:40:40 +0300 Subject: [PATCH 35/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 7939c6787..9deadd669 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -91,7 +91,7 @@ import("./math").then(math => { > [предложение](https://github.com/tc39/proposal-dynamic-import), > которое в данный момент не входит в стандарт языка. Ожидается, что он будет принят в ближайшем будущем. -Когда Webpack сталкивается с таким синтаксисом, он автоматически запускает разделение кода вашего приложения. +Когда Webpack сталкивается с таким синтаксисом, он автоматически начинает разделять код вашего приложения. Если вы используете Create React App, то он уже настроен, вы можете сразу [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) синтаксис динамического импорта. Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). From 9a2217b8c01d32c13f73b4f9fbfc1912ba81535d Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:40:56 +0300 Subject: [PATCH 36/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 9deadd669..0fcab2e10 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -92,7 +92,7 @@ import("./math").then(math => { > которое в данный момент не входит в стандарт языка. Ожидается, что он будет принят в ближайшем будущем. Когда Webpack сталкивается с таким синтаксисом, он автоматически начинает разделять код вашего приложения. -Если вы используете Create React App, то он уже настроен, +Если вы используете Create React App, то всё уже настроено и вы можете сразу [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) синтаксис динамического импорта. Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). From 50dc2728d8f391ff49ab45b6965edf1b6af4e09c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:41:12 +0300 Subject: [PATCH 37/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 0fcab2e10..356c84e8a 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -94,7 +94,7 @@ import("./math").then(math => { Когда Webpack сталкивается с таким синтаксисом, он автоматически начинает разделять код вашего приложения. Если вы используете Create React App, то всё уже настроено и вы можете сразу [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) синтаксис динамического импорта. -Он также поддерживается из коробки в [Next.js](https://github.com/zeit/next.js/#dynamic-import). +Он также поддерживается «из коробки» в [Next.js](https://github.com/zeit/next.js/#dynamic-import). Если вы настраиваете Webpack самостоятельно, то, вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). Файл конфигурации Webpack должен выглядеть [примерно так](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). From 6f48dc80eb70c1f058662e04a5b285900371d2c4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Thu, 14 Mar 2019 18:41:33 +0300 Subject: [PATCH 38/40] Update content/docs/code-splitting.md Co-Authored-By: avevlad --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 356c84e8a..65985e236 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -96,7 +96,7 @@ import("./math").then(math => { вы можете сразу [начать использовать](https://facebook.github.io/create-react-app/docs/code-splitting) синтаксис динамического импорта. Он также поддерживается «из коробки» в [Next.js](https://github.com/zeit/next.js/#dynamic-import). -Если вы настраиваете Webpack самостоятельно, то, вероятно, вы захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). +Если вы настраиваете Webpack самостоятельно, то, вероятно, захотите прочитать [руководство Webpack по разделению кода](https://webpack.js.org/guides/code-splitting/). Файл конфигурации Webpack должен выглядеть [примерно так](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). Если вы используете [Babel](https://babeljs.io/), вам необходимо убедиться, что он понимает синтаксис динамического импорта. From cfbd4f3f4477673d5ecb5a71c688588465d2ea66 Mon Sep 17 00:00:00 2001 From: avevlad Date: Thu, 14 Mar 2019 19:05:14 +0300 Subject: [PATCH 39/40] =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC=D1=83=D0=BB?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20"=D0=91=D0=B0=D0=BD?= =?UTF-8?q?=D0=B4=D0=BB=D0=B8=D0=BD=D0=B3"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 65985e236..0c9037640 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -8,7 +8,7 @@ permalink: docs/code-splitting.html Большинство React-приложений «собирают» свои файлы такими инструментами, как [Webpack](https://webpack.js.org/) или [Browserify](http://browserify.org/). -Бандлинг -- это процесс отслеживания импортированных файлов и их объединения их в один «бандл-файл». +Сборка (или «бандлинг») — это процесс выявления импортированных файлов и объединения их в один «собранный» файл (часто называемый «bundle» или «бандл»). Этот бандл после подключения на веб-страницу загружает всё приложение за один раз. #### Пример {#example} From e2804028b8f963df7492e29711be170e8a16cfad Mon Sep 17 00:00:00 2001 From: avevlad Date: Thu, 14 Mar 2019 19:35:30 +0300 Subject: [PATCH 40/40] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B5=D1=80=D0=B6?= =?UTF-8?q?=D0=BA=D0=B0,=20=D0=BE=D0=B6=D0=B8=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 0c9037640..6233320ad 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -148,7 +148,7 @@ function MyComponent() { ### Задержка {#suspense} -Если модуль, содержащий `OtherComponent`, ещё не загружен к моменту рендеринга `MyComponent`, мы должны показать запасное содержимое, пока ожидаем загрузки, например индикатор загрузки. Это можно сделать с помощью компонента `Suspense`. +Если модуль, содержащий `OtherComponent`, ещё не загружен к моменту рендеринга `MyComponent`, пока ожидаем, мы должны показать запасное содержимое, например индикатор загрузки. Это можно сделать с помощью компонента `Suspense`. ```js const OtherComponent = React.lazy(() => import('./OtherComponent'));