You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/code-splitting.md
+88-72Lines changed: 88 additions & 72 deletions
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,17 @@
1
1
---
2
2
id: code-splitting
3
-
title: Code-Splitting
3
+
title: Dzielenie kodu
4
4
permalink: docs/code-splitting.html
5
5
---
6
6
7
-
## Bundling {#bundling}
7
+
## Pakowanie {#bundling}
8
8
9
-
Most React apps will have their files "bundled" using tools like
9
+
Większość Reactowych aplikacji będzie "dołączała" swoje pliki przez narzędzia takie jak
10
10
[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/).
11
-
Bundling is the process of following imported files and merging them into a
12
-
single file: a "bundle". This bundle can then be included on a webpage to load
13
-
an entire app at once.
11
+
Pakowanie to proces śledzenia zaimportowanych plików i łączenia je w pojedynczy plik "bundle".
12
+
Tak zbudowany pakiet jest gotowy do umieszczenia na stronie aby załadować całą aplikację.
14
13
15
-
#### Example {#example}
14
+
#### Przykład {#example}
16
15
17
16
**App:**
18
17
@@ -40,86 +39,90 @@ function add(a, b) {
40
39
console.log(add(16, 26)); // 42
41
40
```
42
41
43
-
> Note:
42
+
> Notatka:
44
43
>
45
-
> Your bundles will end up looking a lot different than this.
44
+
> Twoje pakiety prawdopodobnie będą wyglądać znacznie inaczej
46
45
47
-
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
48
-
app.
46
+
Jeśli używasz [Create React App](https://github.com/facebookincubator/create-react-app),
wspierana przez narzędzia takie jak Webpack oraz Browserify (przez
67
+
[factor-bundle](https://github.com/browserify/factor-bundle)) które mogą tworzyć
68
+
wiele dynamicznie ładujących się pakietów w czasie wykonania.
68
69
69
-
Code-splitting your app can help you "lazy-load" just the things that are
70
-
currently needed by the user, which can dramatically improve the performance of
71
-
your app. While you haven't reduced the overall amount of code in your app,
72
-
you've avoided loading code that the user may never need, and reduced the amount
73
-
of code needed during the initial load.
70
+
Dzielenie kodu ułatwi ci "leniwe ładowanie" tylko aktualnie wymaganych przez
71
+
użytkownika zasobów, co może znacznie poprawić wydajność twojej aplikacji.
72
+
Mimo, że sumarycznie nie zmniejszasz ilości kodu, unikasz ładowania
73
+
w danym momencie zbędnych dla użytkownika funkcji, co przekłada się na mniejszą ilość kodu do pobrania.
74
74
75
75
## `import()` {#import}
76
76
77
-
The best way to introduce code-splitting into your app is through the dynamic
78
-
`import()` syntax.
77
+
Najlepszym sposobem na wprowadzenie podziału kodu do twojej aplikacji jest dynamiczna składnia
78
+
`import()`.
79
79
80
-
**Before:**
80
+
**Przed:**
81
81
82
82
```js
83
83
import { add } from'./math';
84
84
85
85
console.log(add(16, 26));
86
86
```
87
87
88
-
**After:**
88
+
**Po:**
89
89
90
90
```js
91
91
import("./math").then(math=> {
92
92
console.log(math.add(16, 26));
93
93
});
94
94
```
95
95
96
-
> Note:
96
+
> Notatka:
97
97
>
98
-
> The dynamic `import()` syntax is a ECMAScript (JavaScript)
99
-
> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently
100
-
> part of the language standard. It is expected to be accepted in the
101
-
> near future.
98
+
> Dynamiczna składnia `import()` to [propozycja](https://github.com/tc39/proposal-dynamic-import)
99
+
> ECMAScript (JavaScript), która aktualnie nie jest częścią standardu językowego. Oczekuje się natomiast,
100
+
> że wkrótce zostanie zaakceptowana jako powszechny standard.
102
101
103
-
When Webpack comes across this syntax, it automatically starts code-splitting
104
-
your app. If you're using Create React App, this is already configured for you
105
-
and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
106
-
out of the box in[Next.js](https://github.com/zeit/next.js/#dynamic-import).
102
+
Gdy Webpack natknie się na taką składnie, automatycznie zacznie dzielić kod w twojej aplikacji.
103
+
Jeśli używasz Create React App, posiadasz już gotową konfigurację i możesz natychmiast
104
+
[zacząć z niego korzystać](https://facebook.github.io/create-react-app/docs/code-splitting).
105
+
Również gotowo obsługuje to[Next.js](https://github.com/zeit/next.js/#dynamic-import).
107
106
108
-
If you're setting up Webpack yourself, you'll probably want to read Webpack's
109
-
[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).
107
+
Jeśli konfigurujesz Webpacka samodzielnie, prawdopodobnie chcesz przeczytać
108
+
[przewodnik po dzieleniu kodu Webpack](https://webpack.js.org/guides/code-splitting/).
109
+
Twoja konfiguracja Webpacka powinna wyglądać podobnie [do tego](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
110
110
111
-
When using[Babel](https://babeljs.io/), you'll need to make sure that Babel can
112
-
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).
111
+
Kiedy używasz[Babel](https://babeljs.io/), musisz się upewnić, że Babel może analizować dynamiczną
112
+
składnie importu, ale jej nie przekształca. Do tego będziesz potrzebować[babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
113
113
114
114
## `React.lazy` {#reactlazy}
115
115
116
-
> Note:
116
+
> Notatka:
117
117
>
118
-
> `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).
118
+
> `React.lazy` i Suspense nie jest jeszcze dostępne dla renderowania po stronie serwera
119
+
> Jeśli chcesz dzielić kod dla aplikacji renderowanej na serwerze zalecamy [Komponenty Ładowalne
> Mają przyjemny [przewodnik do dzielenia pakietów przy renderowaniu po stronie serwera](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).
119
122
120
-
The`React.lazy`function lets you render a dynamic import as a regular component.
123
+
Funkcja`React.lazy`pozwala ci dynamicznie renderować importy jako regularne komponenty.
This will automatically load the bundle containing the `OtherComponent`when this component gets rendered.
153
+
To automatycznie załaduje paczke zawierającą `OtherComponent`kiedy komponent będzie renderowany.
151
154
152
-
`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.
155
+
`React.lazy` przyjmuje funkcję, która dynamicznie woła `import()`.
156
+
Musi zwrócić obietnicę (`Promise`) który rozstrzyga moduł z domyślnym (`default`) eksportem zawierający
157
+
komponent Reactowy.
153
158
154
-
### Suspense {#suspense}
159
+
### Zawieszenie {#suspense}
155
160
156
-
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.
161
+
Jeśli moduł zawierający `OtherComponent` nie zostanie jeszcze załadowany na czas renderowania
162
+
`MyComponent`, musimy wyświetlić zapasową zawartość, dopóki trwa ładowanie - na przykład
163
+
wskaźnik ładowania. Robimy to za pomocą komponentu `Suspense`.
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.
179
+
Props `fallback` akceptuje wszystkie elementy Reactowe, które chcesz wyświetlić
180
+
w trakcie oczekiwania na załadowanie komponentu. Możesz umieścić komponent `Suspense`
181
+
w dowolnym miejscu nad "leniwym" komponentem. Możesz nawet zawijać wiele "leniwych komponentów"
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.
204
+
Jeśli inny moduł się nie doładuje (na przykład z powodu awarii sieci), spowoduje to błąd.
205
+
Możesz je obsługiwać aby zapewnić najlepsze doświadczenia użytkownika i zarządzać ratunkiem z pomocą
206
+
[Granic Błędów](/docs/error-boundaries.html). Po utworzeniu granic możesz ich użyć w dowolnym
207
+
miejscu nad "leniwymi" komponentami, aby wyświetlić stan błędu gdy sieć jest niedostępna.
`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.
263
+
`React.lazy` obecnie obsługuje tylko domyślne eksporty. Jeśli moduł, który chcesz zaimportowac,
264
+
używa nazwanych eksportów, możesz utworzyć moduł pośredni, który ponownie eksportuje je jako
265
+
domyślny eksport. Gwarantuje to, utrzymanie działającego drzewa oraz niepobieranie nieuzywanych
0 commit comments