From 50565afc7050c041d7d42539d9709211fc3d7f21 Mon Sep 17 00:00:00 2001 From: ph1p Date: Sat, 28 Sep 2019 15:17:29 +0000 Subject: [PATCH 01/17] Start translation Signed-off-by: ph1p --- content/docs/code-splitting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index c049fc498..ff1801f43 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -7,13 +7,13 @@ permalink: docs/code-splitting.html ## Bundling {#bundling} Most React apps will have their files "bundled" using tools like -[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) or +[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.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. -#### Example {#example} +#### Beispiel {#example} **App:** From 5ca83614067d15b256228b020acae2402df19bca Mon Sep 17 00:00:00 2001 From: ph1p Date: Wed, 23 Oct 2019 10:10:30 +0000 Subject: [PATCH 02/17] Update text Signed-off-by: ph1p --- content/docs/code-splitting.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index ff1801f43..51521c9f9 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,17 +1,13 @@ --- id: code-splitting -title: Code-Splitting +title: Code-Aufteilung permalink: docs/code-splitting.html --- ## Bundling {#bundling} -Most React apps will have their files "bundled" using tools like -[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.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. +Die meisten React Anwendungen haben ihre Dateien durch Tools wie [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) oder [Browserify](http://browserify.org/) zusammenführen lassen. +Bundling nennt sich der Prozess, in dem importierte Dateien zu einer Datei zusammengefügt werden: ein "Bündel (engl. bundle)". Dieses Bündel kann dann in eine Webseite eingebettet werden um eine komplette Anwendung auf einmal zu laden. #### Beispiel {#example} @@ -31,7 +27,7 @@ export function add(a, b) { } ``` -**Bundle:** +**Bündel:** ```js function add(a, b) { @@ -78,7 +74,7 @@ of code needed during the initial load. The best way to introduce code-splitting into your app is through the dynamic `import()` syntax. -**Before:** +**Vorher:** ```js import { add } from './math'; @@ -86,7 +82,7 @@ import { add } from './math'; console.log(add(16, 26)); ``` -**After:** +**Nachher:** ```js import("./math").then(math => { From d98235f2c53a74f80786010cf53ed25538869fcf Mon Sep 17 00:00:00 2001 From: ph1p Date: Sun, 17 Nov 2019 23:51:21 +0100 Subject: [PATCH 03/17] Update texts Signed-off-by: ph1p --- content/docs/code-splitting.md | 43 ++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 51521c9f9..81e3189ab 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -7,7 +7,7 @@ permalink: docs/code-splitting.html ## Bundling {#bundling} Die meisten React Anwendungen haben ihre Dateien durch Tools wie [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) oder [Browserify](http://browserify.org/) zusammenführen lassen. -Bundling nennt sich der Prozess, in dem importierte Dateien zu einer Datei zusammengefügt werden: ein "Bündel (engl. bundle)". Dieses Bündel kann dann in eine Webseite eingebettet werden um eine komplette Anwendung auf einmal zu laden. +Bundling nennt sich der Prozess, in dem importierte Dateien zu einer Datei zusammengefügt werden: ein "Bündel (engl. bundle)". Dieses Bundle kann dann in eine Webseite eingebettet werden um eine komplette Anwendung auf einmal zu laden. #### Beispiel {#example} @@ -37,19 +37,19 @@ function add(a, b) { console.log(add(16, 26)); // 42 ``` -> Note: +> Hinweis: > -> Your bundles will end up looking a lot different than this. +> Deine Bundles werden am Ende ganz anders aussehen als das hier. -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. +Wenn du [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), oder ein ähnliches Tool benutzt, wirdt du ein Webpack-Setup haben welches sofort einsatzbereit ist um deine Anwendung zu +bundlen. -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. +Wenn nicht, musst du das Bundling selbst einrichten. Siehe z. B. die Abschnitte +[Installation](https://webpack.js.org/guides/installation/) und +[Erste Schritte](https://webpack.js.org/guides/getting-started/) in der +Webpack-Dokumentation. -## Code Splitting {#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 @@ -71,8 +71,8 @@ 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. +Der beste Weg Code-Splitting in deiner Anwendung einzuführen, ist durch die dynamische +`import()`-Syntax. **Vorher:** @@ -90,12 +90,15 @@ import("./math").then(math => { }); ``` -> Note: +> Hinweis: > +> Die dynamische `import()`-Syntax ist ein ECMAScript (JavaScript) +> [Vorschlag](https://github.com/tc39/proposal-dynamic-import) der aktuell nicht +> Teil des Sprachenstandards ist. Es wird > 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. +> part of the language standard. Es wird erwartet, dass dieser in naher Zukunft +> akzeptiert wird. 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 @@ -110,11 +113,11 @@ parse the dynamic import syntax but is not transforming it. For that you will ne ## `React.lazy` {#reactlazy} -> Note: +> Hinweis: > -> `React.lazy` and Suspense are 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` und Suspense sind noch nicht für das serverseitige Rendering verfügbar. Wenn du Code-Splitting von deiner serverseitig gerenderten Anwendung durchführen möchtest, empfehlen wir dir [Loadable Components](https://github.com/smooth-code/loadable-components). Es gibt einen schönen [Leitfaden für das Bundle-Splitting mit serverseitigem Rendern](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. +Mit der Funktion `React.lazy` kannst du einen dynamischen Import als reguläre Komponente rendern. **Before:** @@ -128,7 +131,7 @@ import OtherComponent from './OtherComponent'; const OtherComponent = React.lazy(() => import('./OtherComponent')); ``` -This will automatically load the bundle containing the `OtherComponent` when this component is first rendered. +Dadurch wird automatisch das Bundle geladen, dass `OtherComponent` enthält, wenn die Komponente das erste Mal gerendert wird. `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. @@ -191,7 +194,7 @@ const MyComponent = () => ( ); ``` -## Route-based code splitting {#route-based-code-splitting} +## Routen basiertes 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 From 4e111d5970998766ff0b1be8844c1d20316db557 Mon Sep 17 00:00:00 2001 From: ph1p Date: Mon, 18 Nov 2019 01:08:11 +0100 Subject: [PATCH 04/17] Update texts Signed-off-by: ph1p --- content/docs/code-splitting.md | 62 ++++++++++++++++------------------ 1 file changed, 30 insertions(+), 32 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 81e3189ab..d1d2831ff 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -51,23 +51,22 @@ Webpack-Dokumentation. ## 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. - -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. +Bundling ist großartig, aber sobald deine Anwendung wächst, wird dein Bundle es auch. +Insbesondere wenn du größere Bibliotheken von Drittanbietern einbeziehst. Du musst +ein Auge auf den Code haben, den du im Bundle enthälst, damit du ihn nicht versehentlich +so groß machst und deine Anwendung zu lange Zeit zum Laden benötigt. + +Um zu vermeiden, dass du mit einem großen Bundle endest, ist es gut, dem Problem +voraus zu sein und mit dem "Aufteilen" seines Bundles zu beginnen. +Code-Splitting ist eine Funktion, die von Bundlern wie [Webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://rollupjs.org/guide/en/#code-splitting) und Browserify unterstützt wird (via +[factor-bundle](https://github.com/browserify/factor-bundle)) und kann dadruch mehrere Bundles erzeugen, +die zur Laufzeit dynamisch geladen werden können. + +Code-Splitting deiner Anwendung kann dir Helfen genau die Dinge "lazy zu laden", +die der Benutzer gerade benötigt, was die Performance deiner Anwendung drastisch +verbessern kann. Du hast zwar die Gesamtmenge an Code nicht verringert, du hast aber +das Laden von Code vermieden, den der Benutzer möglicherweise nie benötigen wird, zusätzlich +reduzierst du die Menge an Code die benötigt wird beim initialen Laden. ## `import()` {#import} @@ -100,16 +99,15 @@ import("./math").then(math => { > part of the language standard. Es wird erwartet, dass dieser in naher Zukunft > akzeptiert wird. -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). +Wenn Webpack auf diese Syntax stößt, fängt es automatisch mit dem Code-Splitting +deiner Anwendung an. Wenn du Create-React-App verwendest, ist dies alles vorkonfiguriert und du kannst [direkt loslegen](https://facebook.github.io/create-react-app/docs/code-splitting). +[Next.js](https://github.com/zeit/next.js/#dynamic-import) unterstützt dies auch direkt out of the box. -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). +Wenn du Webpack selbst einrichtest, wirst du wahrschenlich Webpack's +[Code-Splitting Leitfaden](https://webpack.js.org/guides/code-splitting/) lesem wollen. Deine Webpack-Konfiguration sollte in etwa [so aussehen](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). -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). +Wenn du [Babel](https://babeljs.io/) verwendest, müsstest du sicherstellen, dass Babel +die Dynamic-Import-Syntax parsen kann, sie aber nicht transformiert. Für all die benötigst du [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import). ## `React.lazy` {#reactlazy} @@ -133,9 +131,9 @@ const OtherComponent = React.lazy(() => import('./OtherComponent')); Dadurch wird automatisch das Bundle geladen, dass `OtherComponent` enthält, wenn die Komponente das erste Mal gerendert wird. -`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` nimmt eine Funktion entgegen, die tein dynamisches `import()` aufrufen muss. Dies muss ein `Promise` zurückgeben, welches eine Modul auflöst, dass eine React-Komponenten im `default` Export enthält. -The lazy component should then be rendered inside a `Suspense` component, which allows us to show some fallback content (such as a loading indicator) while we're waiting for the lazy component to load. +Die Lazy-Komponente sollte dann in einer `Suspense`-Komponente gerendert werden, was es uns ermöglicht ein wenig Fallback-Inhalt anzuzeigen (z. B. eine Ladeanzeige), während wir darauf warten, dass die Lazy-Komponente lädt. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -151,7 +149,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. +Das `fallback`-Prop akzeptiert jede React-Element, die du rendern möchtest, während du drauf wartest, dass die Komponente geladen wird. Du kannst die `Suspense`-Komponente überall über der Lazy-Komponente platzieren. Du kannst sogar mehrere Lazy-Komponenten mit einer einzigen `Suspense`-Komponente umhüllen. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -171,9 +169,9 @@ function MyComponent() { } ``` -### Error boundaries {#error-boundaries} +### Fehlergrenzen {#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. +Wenn das andere Modul nicht lädt (z. B. aufgrund eines Netzwerkausfalls), löst es einen Fehler aus. Du kannst diese Fehler behandeln, um eine schönere Benutzererfahrung zu bieten und die Wiederherstellung mit [Fehlergrenzen](/docs/error-boundaries.html) zu verwalten. Sobald du deine Fehlergrenze erstellt hast, kannst du sie überall über deinen Lazy-Komponenten verwenden, um einen Fehlerstatus anzuzeigem, wenn ein Netzwerkfehler vorliegt. ```js import MyErrorBoundary from './MyErrorBoundary'; @@ -227,9 +225,9 @@ const App = () => ( ); ``` -## Named Exports {#named-exports} +## Benannte Exporte {#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 tree shaking keeps working and that you don't pull in unused components. +`React.lazy` unterstützt derzeit nur `default` Exporte. Wenn das Module, welches du importieren möchtest benannte `exports` enthält, kannst du ein Zwischenmodul erstellen, das es als `default` wieder exportiert. Dies stellt sicher, dass das Tree-Shaking weiter funktioniert und es keine unbenutzten Komponenten mit einbezieht. ```js // ManyComponents.js From 8588d81ce450e985db6b1a80b829aa7e6f6a165b Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:50:23 +0100 Subject: [PATCH 05/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 3d2382a6f..a17ad74f7 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -53,7 +53,7 @@ Webpack-Dokumentation. Bundling ist großartig, aber sobald deine Anwendung wächst, wird dein Bundle es auch. Insbesondere wenn du größere Bibliotheken von Drittanbietern einbeziehst. Du musst -ein Auge auf den Code haben, den du im Bundle enthälst, damit du ihn nicht versehentlich +ein Auge auf den Code haben, den du im Bundle hast, damit du ihn nicht versehentlich so groß machst und deine Anwendung zu lange Zeit zum Laden benötigt. Um zu vermeiden, dass du mit einem großen Bundle endest, ist es gut, dem Problem From d1465d9f21884abb2d7096c31749082795e3e75a Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:50:31 +0100 Subject: [PATCH 06/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 a17ad74f7..7e36e28d3 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -54,7 +54,7 @@ Webpack-Dokumentation. Bundling ist großartig, aber sobald deine Anwendung wächst, wird dein Bundle es auch. Insbesondere wenn du größere Bibliotheken von Drittanbietern einbeziehst. Du musst ein Auge auf den Code haben, den du im Bundle hast, damit du ihn nicht versehentlich -so groß machst und deine Anwendung zu lange Zeit zum Laden benötigt. +so groß machst und deine Anwendung zu lange zum Laden benötigt. Um zu vermeiden, dass du mit einem großen Bundle endest, ist es gut, dem Problem voraus zu sein und mit dem "Aufteilen" seines Bundles zu beginnen. From 18d0dd647278456a45a019688bb015c4a5bcfa69 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:50:49 +0100 Subject: [PATCH 07/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 7e36e28d3..760e8fc8b 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -150,7 +150,7 @@ function MyComponent() { } ``` -Das `fallback`-Prop akzeptiert jede React-Element, die du rendern möchtest, während du drauf wartest, dass die Komponente geladen wird. Du kannst die `Suspense`-Komponente überall über der Lazy-Komponente platzieren. Du kannst sogar mehrere Lazy-Komponenten mit einer einzigen `Suspense`-Komponente umhüllen. +Das `fallback`-Prop akzeptiert jedes React-Element, das du rendern möchtest, während du drauf wartest, dass die Komponente geladen wird. Du kannst die `Suspense`-Komponente überall über der Lazy-Komponente platzieren. Du kannst sogar mehrere Lazy-Komponenten mit einer einzigen `Suspense`-Komponente umhüllen. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); From 0bee9058490471d6c4da1d6bc222a31cc56c621a Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:51:02 +0100 Subject: [PATCH 08/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 760e8fc8b..cc61a4e0e 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -108,7 +108,7 @@ Wenn du Webpack selbst einrichtest, wirst du wahrschenlich Webpack's [Code-Splitting Leitfaden](https://webpack.js.org/guides/code-splitting/) lesem wollen. Deine Webpack-Konfiguration sollte in etwa [so aussehen](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). Wenn du [Babel](https://babeljs.io/) verwendest, müsstest du sicherstellen, dass Babel -die Dynamic-Import-Syntax parsen kann, sie aber nicht transformiert. Für all die benötigst du [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import). +die Dynamic-Import-Syntax parsen kann, sie aber nicht transformiert. Für all das benötigst du [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import). ## `React.lazy` {#reactlazy} From 3c308626ad76968c5cff04970b27d6ed8e0221b3 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:51:12 +0100 Subject: [PATCH 09/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 cc61a4e0e..dd07bfbb0 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -57,7 +57,7 @@ ein Auge auf den Code haben, den du im Bundle hast, damit du ihn nicht versehent so groß machst und deine Anwendung zu lange zum Laden benötigt. Um zu vermeiden, dass du mit einem großen Bundle endest, ist es gut, dem Problem -voraus zu sein und mit dem "Aufteilen" seines Bundles zu beginnen. +voraus zu sein und mit dem "Aufteilen" deines Bundles zu beginnen. Code-Splitting ist eine Funktion, die von Bundlern wie [Webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://rollupjs.org/guide/en/#code-splitting) und Browserify unterstützt wird (via [factor-bundle](https://github.com/browserify/factor-bundle)) und kann dadruch mehrere Bundles erzeugen, From 8487ec72f44947d62bcab0a8802cd9b69e940bc7 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:51:19 +0100 Subject: [PATCH 10/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 dd07bfbb0..cd631e4bb 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -132,7 +132,7 @@ const OtherComponent = React.lazy(() => import('./OtherComponent')); Dadurch wird automatisch das Bundle geladen, dass `OtherComponent` enthält, wenn die Komponente das erste Mal gerendert wird. -`React.lazy` nimmt eine Funktion entgegen, die tein dynamisches `import()` aufrufen muss. Dies muss ein `Promise` zurückgeben, welches eine Modul auflöst, dass eine React-Komponenten im `default` Export enthält. +`React.lazy` nimmt eine Funktion entgegen, die ein dynamisches `import()` aufrufen muss. Dies muss ein `Promise` zurückgeben, welches eine Modul auflöst, dass eine React-Komponenten im `default` Export enthält. Die Lazy-Komponente sollte dann in einer `Suspense`-Komponente gerendert werden, was es uns ermöglicht ein wenig Fallback-Inhalt anzuzeigen (z. B. eine Ladeanzeige), während wir darauf warten, dass die Lazy-Komponente lädt. From d1e83c3103ce035f4fcf7d6ed2239bfb3a684811 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:51:39 +0100 Subject: [PATCH 11/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 cd631e4bb..036baa056 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -172,7 +172,7 @@ function MyComponent() { ### Fehlergrenzen {#error-boundaries} -Wenn das andere Modul nicht lädt (z. B. aufgrund eines Netzwerkausfalls), löst es einen Fehler aus. Du kannst diese Fehler behandeln, um eine schönere Benutzererfahrung zu bieten und die Wiederherstellung mit [Fehlergrenzen](/docs/error-boundaries.html) zu verwalten. Sobald du deine Fehlergrenze erstellt hast, kannst du sie überall über deinen Lazy-Komponenten verwenden, um einen Fehlerstatus anzuzeigem, wenn ein Netzwerkfehler vorliegt. +Wenn das andere Modul nicht lädt (z. B. aufgrund eines Netzwerkausfalls), löst es einen Fehler aus. Du kannst diese Fehler behandeln, um eine schönere Benutzererfahrung zu bieten und die Wiederherstellung mit [Fehlergrenzen](/docs/error-boundaries.html) zu verwalten. Sobald du deine Fehlergrenze erstellt hast, kannst du sie überall oberhalb deinen Lazy-Komponenten verwenden, um einen Fehlerstatus anzuzeigem, wenn ein Netzwerkfehler vorliegt. ```js import MyErrorBoundary from './MyErrorBoundary'; From 779346c420341372cee04aec1741647ff89a1eb7 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 18:59:11 +0100 Subject: [PATCH 12/17] Update text --- content/docs/code-splitting.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 036baa056..4bf1246f7 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -6,7 +6,7 @@ permalink: docs/code-splitting.html ## Bundling {#bundling} -Die meisten React Anwendungen haben ihre Dateien durch Tools wie [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) oder [Browserify](http://browserify.org/) zusammenführen lassen. +Die meisten React Anwendungen werden ihre Dateien durch Tools wie [Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/) oder [Browserify](http://browserify.org/) zusammengeführt haben. Bundling nennt sich der Prozess, in dem importierte Dateien zu einer Datei zusammengefügt werden: ein "Bündel (engl. bundle)". Dieses Bundle kann dann in eine Webseite eingebettet werden um eine komplette Anwendung auf einmal zu laden. #### Beispiel {#example} @@ -58,16 +58,15 @@ so groß machst und deine Anwendung zu lange zum Laden benötigt. Um zu vermeiden, dass du mit einem großen Bundle endest, ist es gut, dem Problem voraus zu sein und mit dem "Aufteilen" deines Bundles zu beginnen. -Code-Splitting ist eine Funktion, -die von Bundlern wie [Webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://rollupjs.org/guide/en/#code-splitting) und Browserify unterstützt wird (via -[factor-bundle](https://github.com/browserify/factor-bundle)) und kann dadruch mehrere Bundles erzeugen, +Code-Splitting ist eine Funktion, die von Bundlern wie [Webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://rollupjs.org/guide/en/#code-splitting) und Browserify unterstützt wird (via +[factor-bundle](https://github.com/browserify/factor-bundle)). Durch sie werden mehrere Bundles erzeugt, die zur Laufzeit dynamisch geladen werden können. Code-Splitting deiner Anwendung kann dir Helfen genau die Dinge "lazy zu laden", die der Benutzer gerade benötigt, was die Performance deiner Anwendung drastisch verbessern kann. Du hast zwar die Gesamtmenge an Code nicht verringert, du hast aber -das Laden von Code vermieden, den der Benutzer möglicherweise nie benötigen wird, zusätzlich -reduzierst du die Menge an Code die benötigt wird beim initialen Laden. +das Laden von Code vermieden, den der Benutzer möglicherweise nie brauchen wird. Zusätzlich +reduzierst du die Menge an Code beim initialen Laden. ## `import()` {#import} From 569d3248e88484294182f7951f03c091ed043cd2 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 19:09:06 +0100 Subject: [PATCH 13/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 4bf1246f7..29d19d374 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -64,7 +64,7 @@ die zur Laufzeit dynamisch geladen werden können. Code-Splitting deiner Anwendung kann dir Helfen genau die Dinge "lazy zu laden", die der Benutzer gerade benötigt, was die Performance deiner Anwendung drastisch -verbessern kann. Du hast zwar die Gesamtmenge an Code nicht verringert, du hast aber +verbessern kann. Du hast zwar die Gesamtmenge an Code nicht verringert, aber du hast das Laden von Code vermieden, den der Benutzer möglicherweise nie brauchen wird. Zusätzlich reduzierst du die Menge an Code beim initialen Laden. From 4d199cbb9058e1522c7223e89ca1ef5a2f652ee2 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 18 Nov 2019 19:09:25 +0100 Subject: [PATCH 14/17] Update content/docs/code-splitting.md Co-Authored-By: Chris Ben --- 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 29d19d374..ac6ef39cd 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -104,7 +104,7 @@ deiner Anwendung an. Wenn du Create-React-App verwendest, ist dies alles vorkonf [Next.js](https://github.com/zeit/next.js/#dynamic-import) unterstützt dies auch direkt out of the box. Wenn du Webpack selbst einrichtest, wirst du wahrschenlich Webpack's -[Code-Splitting Leitfaden](https://webpack.js.org/guides/code-splitting/) lesem wollen. Deine Webpack-Konfiguration sollte in etwa [so aussehen](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). +[Code-Splitting Leitfaden](https://webpack.js.org/guides/code-splitting/) lesen wollen. Deine Webpack-Konfiguration sollte in etwa [so aussehen](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). Wenn du [Babel](https://babeljs.io/) verwendest, müsstest du sicherstellen, dass Babel die Dynamic-Import-Syntax parsen kann, sie aber nicht transformiert. Für all das benötigst du [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import). From f2809624a0e9588e69993c3bb6694d1b96baea13 Mon Sep 17 00:00:00 2001 From: ph1p Date: Tue, 19 Nov 2019 19:10:37 +0100 Subject: [PATCH 15/17] Add missing paragraph Signed-off-by: ph1p --- content/docs/code-splitting.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index ac6ef39cd..9d365fe0b 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -194,17 +194,17 @@ const MyComponent = () => ( ## Routen basiertes 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. +Die Entscheidung wo in deiner Anwendung Code-Splitting einzuführen ist, kann etwas schwierig sein. +Du solltest sicherstellen, dass du Orte wählst, die die Bundles gleichmäßig aufteilen, aber nicht +die Benutzererfahrung beeinträchtigen. -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. +Ein guter Ausgangspunkt sind Routen. Die meisten Leute im Web sind es +gewohnt Page-Transitions zu erstellen, die einige Zeit zum Laden benötigen. +Sie neigen auch dazu, die gesamte Seite auf einmal neu zu rendern, so dass die Benutzer +wahrscheinlich nicht gleichzeitig mit anderen Elementen auf der Seite interagieren. -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`. +Hier ist ein Beispiel wie du ein routenbasiertes Code-Splitting in deiner Anwendung +mit Hilfe von Bibliotheken, wie [React Router](https://reacttraining.com/react-router/) mit `React.lazy` einrichtest. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -215,7 +215,7 @@ const About = lazy(() => import('./routes/About')); const App = () => ( - Loading...}> + Lade...}> @@ -227,7 +227,7 @@ const App = () => ( ## Benannte Exporte {#named-exports} -`React.lazy` unterstützt derzeit nur `default` Exporte. Wenn das Module, welches du importieren möchtest benannte `exports` enthält, kannst du ein Zwischenmodul erstellen, das es als `default` wieder exportiert. Dies stellt sicher, dass das Tree-Shaking weiter funktioniert und es keine unbenutzten Komponenten mit einbezieht. +`React.lazy` unterstützt derzeit nur `default` Exporte. Wenn das Modul, welches du importieren möchtest benannte `exports` enthält, kannst du ein Zwischenmodul erstellen, das es als `default` wieder exportiert. Dies stellt sicher, dass das Tree-Shaking weiter funktioniert und es keine unbenutzten Komponenten mit einbezieht. ```js // ManyComponents.js From 9b8da6ef7ae0e3f47ab861b64853ee2ab7e0d811 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 7 Jan 2020 12:44:41 +0100 Subject: [PATCH 16/17] Resolve merge conflicts and update translation --- content/docs/code-splitting.md | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 9d365fe0b..f3562dbc9 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -57,12 +57,12 @@ ein Auge auf den Code haben, den du im Bundle hast, damit du ihn nicht versehent so groß machst und deine Anwendung zu lange zum Laden benötigt. Um zu vermeiden, dass du mit einem großen Bundle endest, ist es gut, dem Problem -voraus zu sein und mit dem "Aufteilen" deines Bundles zu beginnen. +voraus zu sein und mit dem "Splitten" (dt. aufteilen) deines Bundles zu beginnen. Code-Splitting ist eine Funktion, die von Bundlern wie [Webpack](https://webpack.js.org/guides/code-splitting/), [Rollup](https://rollupjs.org/guide/en/#code-splitting) und Browserify unterstützt wird (via [factor-bundle](https://github.com/browserify/factor-bundle)). Durch sie werden mehrere Bundles erzeugt, die zur Laufzeit dynamisch geladen werden können. -Code-Splitting deiner Anwendung kann dir Helfen genau die Dinge "lazy zu laden", +Code-Splitting deiner Anwendung kann dir helfen genau die Dinge "lazy zu laden", die der Benutzer gerade benötigt, was die Performance deiner Anwendung drastisch verbessern kann. Du hast zwar die Gesamtmenge an Code nicht verringert, aber du hast das Laden von Code vermieden, den der Benutzer möglicherweise nie brauchen wird. Zusätzlich @@ -89,18 +89,9 @@ import("./math").then(math => { }); ``` -> Hinweis: -> -> Die dynamische `import()`-Syntax ist ein ECMAScript (JavaScript) -> [Vorschlag](https://github.com/tc39/proposal-dynamic-import) der aktuell nicht -> Teil des Sprachenstandards ist. Es wird -> The dynamic `import()` syntax is a ECMAScript (JavaScript) -> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently -> part of the language standard. Es wird erwartet, dass dieser in naher Zukunft -> akzeptiert wird. - Wenn Webpack auf diese Syntax stößt, fängt es automatisch mit dem Code-Splitting -deiner Anwendung an. Wenn du Create-React-App verwendest, ist dies alles vorkonfiguriert und du kannst [direkt loslegen](https://facebook.github.io/create-react-app/docs/code-splitting). +deiner Anwendung an. Wenn du Create-React-App verwendest, ist dies alles vorkonfiguriert +und du kannst [direkt loslegen](https://facebook.github.io/create-react-app/docs/code-splitting). [Next.js](https://github.com/zeit/next.js/#dynamic-import) unterstützt dies auch direkt out of the box. Wenn du Webpack selbst einrichtest, wirst du wahrschenlich Webpack's @@ -113,7 +104,7 @@ die Dynamic-Import-Syntax parsen kann, sie aber nicht transformiert. Für all da > Hinweis: > -> `React.lazy` und Suspense sind noch nicht für das serverseitige Rendering verfügbar. Wenn du Code-Splitting von deiner serverseitig gerenderten Anwendung durchführen möchtest, empfehlen wir dir [Loadable Components](https://github.com/smooth-code/loadable-components). Es gibt einen schönen [Leitfaden für das Bundle-Splitting mit serverseitigem Rendern](https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/). +> `React.lazy` und Suspense sind noch nicht für das serverseitige Rendering verfügbar. Wenn du Code-Splitting von deiner serverseitig gerenderten Anwendung durchführen möchtest, empfehlen wir dir [Loadable Components](https://github.com/gregberge/loadable-components). Es gibt einen schönen [Leitfaden für das Bundle-Splitting mit serverseitigem Rendern](https://loadable-components.com/docs/server-side-rendering/). Mit der Funktion `React.lazy` kannst du einen dynamischen Import als reguläre Komponente rendern. @@ -195,7 +186,7 @@ const MyComponent = () => ( ## Routen basiertes Code-Splitting {#route-based-code-splitting} Die Entscheidung wo in deiner Anwendung Code-Splitting einzuführen ist, kann etwas schwierig sein. -Du solltest sicherstellen, dass du Orte wählst, die die Bundles gleichmäßig aufteilen, aber nicht +Du solltest sicherstellen, dass du Orte wählst, die die Bundles gleichmäßig splitten, aber nicht die Benutzererfahrung beeinträchtigen. Ein guter Ausgangspunkt sind Routen. Die meisten Leute im Web sind es From 3591ef18b7c84ed8b35d6bfbc2b211600cdda3d2 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 8 Jan 2020 14:35:21 +0100 Subject: [PATCH 17/17] Update text --- 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 f3562dbc9..b4b48988e 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -218,7 +218,7 @@ const App = () => ( ## Benannte Exporte {#named-exports} -`React.lazy` unterstützt derzeit nur `default` Exporte. Wenn das Modul, welches du importieren möchtest benannte `exports` enthält, kannst du ein Zwischenmodul erstellen, das es als `default` wieder exportiert. Dies stellt sicher, dass das Tree-Shaking weiter funktioniert und es keine unbenutzten Komponenten mit einbezieht. +`React.lazy` unterstützt derzeit nur `default` Exporte. Wenn das Modul, das du importieren möchtest, benannte `exports` enthält, kannst du ein Zwischenmodul erstellen, das es als `default` wieder exportiert. Dies stellt sicher, dass das Tree-Shaking weiter funktioniert und es keine unbenutzten Komponenten mit einbezieht. ```js // ManyComponents.js