From b790b0387e269ede6c08676c98fddaf36000f62b Mon Sep 17 00:00:00 2001 From: atsu Date: Sat, 2 Feb 2019 19:31:30 +0900 Subject: [PATCH 01/13] WIP translating. --- content/docs/code-splitting.md | 66 +++++++++++----------------------- 1 file changed, 20 insertions(+), 46 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index d779273f5..535f23e60 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -4,15 +4,11 @@ title: Code-Splitting permalink: docs/code-splitting.html --- -## 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/) などのツールを使ってファイルを「バンドル」しています。バンドリングはインポートされたファイルをたどって、それらを一つのファイルにまとめるプロセスです。このバンドルされたファイルをWebページ内に置くことによって、アプリ全体を一度に読み込むことができます。 -#### Example +#### 例 **App:** @@ -40,42 +36,28 @@ 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のドキュメントにある [Installation](https://webpack.js.org/guides/installation/) や [Getting Started](https://webpack.js.org/guides/getting-started/) などを参照してみてください。 -## 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](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()` -The best way to introduce code-splitting into your app is through the dynamic -`import()` syntax. +コード分割をアプリに導入する最も良い手段は動的インポート`import()`を使用することです。 **Before:** @@ -93,23 +75,15 @@ 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) が提案している、現時点(2018年2月)ではまだ言語標準として実装されていない構文です。近い将来に標準化される予定です。 -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://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported -out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import). +Webpackがこの構文を見つけると、自動的にアプリのコードを分割します。Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)Next.jsも同様です。 -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). +もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。きっとあなたの Webpack の設定は[これくらい](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)がらんとしているでしょうから。 -When using [Babel](http://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). +もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換しないようにする必要があります。そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 ## `React.lazy` From 9d4aa3fb1f1af9377f563985e7bfbbf55f8564bf Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:07:34 +0900 Subject: [PATCH 02/13] translate complete --- content/docs/code-splitting.md | 54 ++++++++++++++++------------------ 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 535f23e60..29d787754 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,12 +1,12 @@ --- id: code-splitting -title: Code-Splitting +title: コード分割 permalink: docs/code-splitting.html --- ## バンドル -多くの React アプリケーションは、[Webpack](https://webpack.js.org/)や [Browserify](http://browserify.org/) などのツールを使ってファイルを「バンドル」しています。バンドリングはインポートされたファイルをたどって、それらを一つのファイルにまとめるプロセスです。このバンドルされたファイルをWebページ内に置くことによって、アプリ全体を一度に読み込むことができます。 +多くの React アプリケーションは、[Webpack](https://webpack.js.org/)や [Browserify](http://browserify.org/) などのツールを使ってファイルを「バンドル」しています。バンドルはインポートされたファイルをたどって、それらを一つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 #### 例 @@ -36,24 +36,24 @@ function add(a, b) { 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 は自動的にそれらをバンドルしてくれます。 -そうでない場合は、自分でバンドルを設定する必要があります。設定方法に関しては、Webpackのドキュメントにある [Installation](https://webpack.js.org/guides/installation/) や [Getting Started](https://webpack.js.org/guides/getting-started/) などを参照してみてください。 +そうでない場合は、自分でバンドルを設定する必要があります。設定方法に関しては、Webpack のドキュメントにある [Installation](https://webpack.js.org/guides/installation/) や [Getting Started](https://webpack.js.org/guides/getting-started/) などを参照してみてください。 ## コード分割 バンドルは確かに素晴らしいですが、アプリが大きくなるにつれて、バンドルのサイズも大きくなります。特にサイズの大きなサードパーティ製のライブラリを含む場合は顕著にサイズが増大します。 不用意に大きなバンドルを作成してしまいアプリの読み込みに多くの時間がかかってしまうという事態にならないためにも、常に注意を払い続けなければなりません。 -大きなバンドルに巻き込まれないためには、コードを"分割"して問題を回避しましょう。 -[Code-Splitting](https://webpack.js.org/guides/code-splitting/) は、実行時にロードする複数のバンドルを生成できる Webpack や Browserify などのバンドル(但し [factor-bundle](https://github.com/browserify/factor-bundle) が必要)によってサポートされている機能です。 +大きなバンドルを不注意に生成してしまわないように、コードを「分割」して問題を回避しましょう。 +[Code-Splitting](https://webpack.js.org/guides/code-splitting/) は、実行時にロードする複数のバンドルを生成できる Webpack や Browserify などのバンドル（但し [factor-bundle](https://github.com/browserify/factor-bundle) が必要）によってサポートされている機能です。 -コード分割することによって"遅延ロード"が可能となり、アプリのパフォーマンスを劇的に向上させることができます。 -アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードをロードしなくて済むため、初期ロードの際にロードするコード量を削減することができます。 +コード分割することによって「遅延読み込み」が可能となり、アプリのパフォーマンスを劇的に向上させることができます。 +アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードを読み込まなくて済むため、初期ロードの際に読む込むコード量を削減でき、読み込みにかかる時間を短縮できます。 ## `import()` @@ -75,7 +75,7 @@ import("./math").then(math => { }); ``` -> 補足: +> 補足： > > `import()` 構文はECMAScript (JavaScript) が提案している、現時点(2018年2月)ではまだ言語標準として実装されていない構文です。近い将来に標準化される予定です。 @@ -83,15 +83,15 @@ Webpackがこの構文を見つけると、自動的にアプリのコードを もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。きっとあなたの Webpack の設定は[これくらい](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)がらんとしているでしょうから。 -もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換しないようにする必要があります。そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 +もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換してしまわないようにする必要があります。そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 ## `React.lazy` -> 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:** @@ -121,13 +121,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()` を呼び出す関数を引数として取ります。これは React コンポーネントを含む `default` export を持つモジュールに解決される `Promise` を返さなければなりません。 ### 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. +`MyComponent` がレンダリングされるまでに、`OtherComponent` を含むモジュールがまだロードされていない場合、例えばロードインジケータなどのようなフォールバックコンテンツをロードが完了するまで表示する必要があります。これは `Suspense` コンポーネントを使って実装することができます。 ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -143,7 +143,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')); @@ -165,7 +165,7 @@ function MyComponent() { ### 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. +もし他のモジュールがロードに失敗した場合(例えば、ネットワークの障害など)、エラーが発生します。その際には [Error Boundaries](/docs/error-boundaries.html) を使用することによってこれらのエラーをハンドリングし、エラーの回復やユーザ体験の向上に繋げることができます。Error Boundary を作成したら、遅延コンポーネントより上位のあらゆる場所で使用でき、ネットワークエラーが発生した際にエラー内容を表示することができます。 ```js import MyErrorBoundary from './MyErrorBoundary'; @@ -186,19 +186,13 @@ const MyComponent = () => ( ); ``` -## 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. +コード分割を導入するにあたって適している場所はルートです。Webを使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。また、ユーザはページ全体を一度に再描画する傾向にあるため、同時に他の要素を同時に見る機会はほとんどありません。 -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`. +これは [React Router](https://reacttraining.com/react-router/) のようなライブラリを `React.lazy` を使用することでアプリにルートベースのコード分割を導入する方法の例です。 ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -219,10 +213,12 @@ const App = () => ( ); ``` -## 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 export const MyComponent = /* ... */; From 9c920db8ace3d5886fa55e3e4df090abe1705ce5 Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:09:04 +0900 Subject: [PATCH 03/13] lint --- 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 29d787754..3ed2f4601 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -6,7 +6,7 @@ permalink: docs/code-splitting.html ## バンドル -多くの React アプリケーションは、[Webpack](https://webpack.js.org/)や [Browserify](http://browserify.org/) などのツールを使ってファイルを「バンドル」しています。バンドルはインポートされたファイルをたどって、それらを一つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 +多くの React アプリケーションは、[Webpack](https://webpack.js.org/)や [Browserify](http://browserify.org/) などのツールを使ってファイルを「バンドル」しています。バンドルはインポートされたファイルをたどって、それらを1つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 #### 例 @@ -165,7 +165,7 @@ function MyComponent() { ### Error boundaries -もし他のモジュールがロードに失敗した場合(例えば、ネットワークの障害など)、エラーが発生します。その際には [Error Boundaries](/docs/error-boundaries.html) を使用することによってこれらのエラーをハンドリングし、エラーの回復やユーザ体験の向上に繋げることができます。Error Boundary を作成したら、遅延コンポーネントより上位のあらゆる場所で使用でき、ネットワークエラーが発生した際にエラー内容を表示することができます。 +もし他のモジュールがロードに失敗した場合（例えば、ネットワークの障害など）、エラーが発生します。その際には [Error Boundaries](/docs/error-boundaries.html) を使用することによってこれらのエラーをハンドリングし、エラーの回復やユーザ体験の向上に繋げることができます。Error Boundary を作成したら、遅延コンポーネントより上位のあらゆる場所で使用でき、ネットワークエラーが発生した際にエラー内容を表示することができます。 ```js import MyErrorBoundary from './MyErrorBoundary'; From 6802a92ddff771ffeccf9ae2a89193596a1603ed Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:12:28 +0900 Subject: [PATCH 04/13] fix statements on Browserify. --- 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 3ed2f4601..b2d4bd79b 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -50,7 +50,7 @@ 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) が必要）によってサポートされている機能です。 +[Code-Splitting](https://webpack.js.org/guides/code-splitting/) は、実行時にロードする複数のバンドルを生成できる Webpack や Browserify（[factor-bundle](https://github.com/browserify/factor-bundle) を使用）などのバンドルによってサポートされている機能です。 コード分割することによって「遅延読み込み」が可能となり、アプリのパフォーマンスを劇的に向上させることができます。 アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードを読み込まなくて済むため、初期ロードの際に読む込むコード量を削減でき、読み込みにかかる時間を短縮できます。 From 936e9b03a860f939439d0b69c1bc022ee30f8f68 Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:33:13 +0900 Subject: [PATCH 05/13] delete unnessesary statements. --- content/docs/code-splitting.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index b2d4bd79b..2f18c1383 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -215,8 +215,6 @@ const App = () => ( ## 名前付きエクスポート -`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 From 5cf15247a59e5cc5fa3a863a9d7572adcc3100c2 Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:36:01 +0900 Subject: [PATCH 06/13] delete unnessesary statements. --- 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 2f18c1383..c5a3c223a 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -77,7 +77,7 @@ import("./math").then(math => { > 補足： > -> `import()` 構文はECMAScript (JavaScript) が提案している、現時点(2018年2月)ではまだ言語標準として実装されていない構文です。近い将来に標準化される予定です。 +> `import()` 構文はECMAScript (JavaScript) が提案している、現時点ではまだ言語標準として実装されていない構文です。近い将来に標準化される予定です。 Webpackがこの構文を見つけると、自動的にアプリのコードを分割します。Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)Next.jsも同様です。 From 6570f0abf765a2d48d48250b2dc9a8e93ae65292 Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:48:43 +0900 Subject: [PATCH 07/13] fix typo --- 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 c5a3c223a..b547376d6 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -215,7 +215,7 @@ const App = () => ( ## 名前付きエクスポート -`React.lazy` は現在デフォルトエクスポートのみサポートしています。インポートしたいモジュールが名前付きエクスポートを使用している場合、それを背フォルトとして最エクスポートする中間モジュールを作成できます。これにより、treeshaking が機能し未使用のコンポーネントを取り込まず済むようにできます。 +`React.lazy` は現在デフォルトエクスポートのみサポートしています。インポートしたいモジュールが名前付きエクスポートを使用している場合、それをデフォルトとして再エクスポートする中間モジュールを作成できます。これにより、treeshaking が機能し未使用のコンポーネントを取り込まず済むようにできます。 ```js // ManyComponents.js From e0d0623a59292befe5fe90d74a7cee5b2aaefeba Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 3 Feb 2019 23:50:28 +0900 Subject: [PATCH 08/13] fix typo --- 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 b547376d6..7a2283f6a 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -188,7 +188,7 @@ const MyComponent = () => ( ## ルート単位でのコード分割 -アプリ内のどこにコード分割を導入するかを決めるのは少し面倒です。バンドルを均等に分割する場所を確実に選択したいところですが、ユーザ体験を妨げてななりません。 +アプリ内のどこにコード分割を導入するかを決めるのは少し面倒です。バンドルを均等に分割する場所を確実に選択したいところですが、ユーザ体験を妨げてはなりません。 コード分割を導入するにあたって適している場所はルートです。Webを使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。また、ユーザはページ全体を一度に再描画する傾向にあるため、同時に他の要素を同時に見る機会はほとんどありません。 From 2ae259a0ec1cfc58573ffe1553fade3cf9498da0 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 9 Feb 2019 13:46:55 +0900 Subject: [PATCH 09/13] Apply suggestions from code review Co-Authored-By: atsumine --- 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 77e84dd27..fa2aefe73 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -38,9 +38,9 @@ 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 のドキュメントにある [Installation](https://webpack.js.org/guides/installation/) や [Getting Started](https://webpack.js.org/guides/getting-started/) などを参照してみてください。 @@ -50,14 +50,14 @@ 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) を使用）などのバンドルによってサポートされている機能です。 +[Code-Splitting](https://webpack.js.org/guides/code-splitting/) は、実行時にロードする複数のバンドルを生成できる Webpack や Browserify（[factor-bundle](https://github.com/browserify/factor-bundle) を使用）などのバンドラによってサポートされている機能です。 -コード分割することによって「遅延読み込み」が可能となり、アプリのパフォーマンスを劇的に向上させることができます。 -アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードを読み込まなくて済むため、初期ロードの際に読む込むコード量を削減でき、読み込みにかかる時間を短縮できます。 +コード分割は、ユーザが必要とするコードだけを「遅延読み込み」する手助けとなり、アプリのパフォーマンスを劇的に向上させることができます。 +アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードを読み込まなくて済むため、初期ロードの際に読む込むコード量を削減できます。 ## `import()` {#import} -コード分割をアプリに導入する最も良い手段は動的インポート`import()`を使用することです。 +コード分割をアプリに導入する最も良い手段は動的インポート `import()` を使用することです。 **Before:** @@ -77,11 +77,11 @@ import("./math").then(math => { > 補足： > -> `import()` 構文はECMAScript (JavaScript) が提案している、現時点ではまだ言語標準として実装されていない構文です。近い将来に標準化される予定です。 +> `import()` 構文は ECMAScript (JavaScript) が提案している、現時点ではまだ言語標準として実装されていない構文です。近い将来での標準化が期待されています。 Webpackがこの構文を見つけると、自動的にアプリのコードを分割します。Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)Next.jsも同様です。 -もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。きっとあなたの Webpack の設定は[これくらい](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)がらんとしているでしょうから。 +もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。きっとあなたの Webpack の設定はおよそ[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なっているはずでしょうから。 もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換してしまわないようにする必要があります。そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 @@ -89,7 +89,7 @@ Webpackがこの構文を見つけると、自動的にアプリのコードを > 補足: > -> `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)も提供していくれているので、参考にしてみてください。 +> `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)も提供していくれているので、参考にしてみてください。 `React.lazy` 関数を使用すると、動的インポートを通常のコンポーネントとしてレンダリングすることができます。 @@ -190,9 +190,9 @@ const MyComponent = () => ( アプリ内のどこにコード分割を導入するかを決めるのは少し面倒です。バンドルを均等に分割する場所を確実に選択したいところですが、ユーザ体験を妨げてはなりません。 -コード分割を導入するにあたって適している場所はルートです。Webを使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。また、ユーザはページ全体を一度に再描画する傾向にあるため、同時に他の要素を同時に見る機会はほとんどありません。 +コード分割を導入するにあたって適している場所はルーティングです。Web を使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。また、ユーザーはページ上の他の要素を同時に操作しないだろうと、ページ全体を一度に再描画する傾向があります。 -これは [React Router](https://reacttraining.com/react-router/) のようなライブラリを `React.lazy` を使用することでアプリにルートベースのコード分割を導入する方法の例です。 +これは [React Router](https://reacttraining.com/react-router/) のようなライブラリを使ったアプリに `React.lazy` を使用することでルーティングベースのコード分割を導入する方法の例です。 ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; From 34773ecc13b1cb1fc85651e6af94fa7f884d2dbe Mon Sep 17 00:00:00 2001 From: atsu Date: Sat, 9 Feb 2019 22:49:23 +0900 Subject: [PATCH 10/13] fix breakings. --- content/docs/code-splitting.md | 49 ++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index fa2aefe73..8ba827f7e 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -6,7 +6,10 @@ permalink: docs/code-splitting.html ## バンドル {#bundling} -多くの React アプリケーションは、[Webpack](https://webpack.js.org/)や [Browserify](http://browserify.org/) などのツールを使ってファイルを「バンドル」しています。バンドルはインポートされたファイルをたどって、それらを1つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 +多くの React アプリケーションは、[Webpack](https://webpack.js.org/)や [Browserify](http://browserify.org/) などの +ツールを使ってファイルを「バンドル」しています。 +バンドルはインポートされたファイルをたどって、それらを1つのファイルにまとめるプロセスです。 +このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 #### 例 {#example} @@ -40,20 +43,28 @@ 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 のドキュメントにある [Installation](https://webpack.js.org/guides/installation/) や [Getting Started](https://webpack.js.org/guides/getting-started/) などを参照してみてください。 +そうでない場合は、自分でバンドルを設定する必要があります。 +設定方法に関しては、Webpack のドキュメントにある [Installation](https://webpack.js.org/guides/installation/) や + [Getting Started](https://webpack.js.org/guides/getting-started/) などを + 参照してみてください。 ## コード分割 {#code-splitting} -バンドルは確かに素晴らしいですが、アプリが大きくなるにつれて、バンドルのサイズも大きくなります。特にサイズの大きなサードパーティ製のライブラリを含む場合は顕著にサイズが増大します。 -不用意に大きなバンドルを作成してしまいアプリの読み込みに多くの時間がかかってしまうという事態にならないためにも、常に注意を払い続けなければなりません。 +バンドルは確かに素晴らしいですが、アプリが大きくなるにつれて、バンドルのサイズも大きくなります。 +特にサイズの大きなサードパーティ製のライブラリを含む場合は顕著にサイズが増大します。 +不用意に大きなバンドルを作成してしまいアプリの読み込みに多くの時間がかかってしまうという事態にならないためにも、 +常に注意を払い続けなければなりません。 大きなバンドルを不注意に生成してしまわないように、コードを「分割」して問題を回避しましょう。 [Code-Splitting](https://webpack.js.org/guides/code-splitting/) は、実行時にロードする複数のバンドルを生成できる Webpack や Browserify（[factor-bundle](https://github.com/browserify/factor-bundle) を使用）などのバンドラによってサポートされている機能です。 -コード分割は、ユーザが必要とするコードだけを「遅延読み込み」する手助けとなり、アプリのパフォーマンスを劇的に向上させることができます。 -アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードを読み込まなくて済むため、初期ロードの際に読む込むコード量を削減できます。 +コード分割は、ユーザが必要とするコードだけを「遅延読み込み」する手助けとなり、 +アプリのパフォーマンスを劇的に向上させることができます。 +アプリの全体的なコード量を減らすことはできませんが、ユーザが必要としないコードを読み込まなくて済むため、 +初期ロードの際に読む込むコード量を削減できます。 ## `import()` {#import} @@ -77,13 +88,19 @@ import("./math").then(math => { > 補足： > -> `import()` 構文は ECMAScript (JavaScript) が提案している、現時点ではまだ言語標準として実装されていない構文です。近い将来での標準化が期待されています。 +> `import()` 構文は ECMAScript (JavaScript) が[提案](https://github.com/tc39/proposal-dynamic-import)している、 +> 現時点ではまだ言語標準として実装されていない構文です。 +> 近い将来での標準化が期待されています。 -Webpackがこの構文を見つけると、自動的にアプリのコードを分割します。Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)Next.jsも同様です。 +Webpackがこの構文を見つけると、自動的にアプリのコードを分割します。 +Create React App を使用している場合はすでに設定がされているため、[すぐに使用を開始することができます。](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) +Next.jsも同様です。 -もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。きっとあなたの Webpack の設定はおよそ[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なっているはずでしょうから。 +もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。 +きっとあなたの Webpack の設定はおよそ[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なっているはずでしょうから。 -もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換してしまわないようにする必要があります。そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 +もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換してしまわないようにする必要があります。 +そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 ## `React.lazy` {#reactlazy} @@ -188,11 +205,15 @@ const MyComponent = () => ( ## ルート単位でのコード分割 {#route-based-code-splitting} -アプリ内のどこにコード分割を導入するかを決めるのは少し面倒です。バンドルを均等に分割する場所を確実に選択したいところですが、ユーザ体験を妨げてはなりません。 +アプリ内のどこにコード分割を導入するかを決めるのは少し面倒です。 +バンドルを均等に分割する場所を確実に選択したいところですが、ユーザ体験を妨げてはなりません。 -コード分割を導入するにあたって適している場所はルーティングです。Web を使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。また、ユーザーはページ上の他の要素を同時に操作しないだろうと、ページ全体を一度に再描画する傾向があります。 +コード分割を導入するにあたって適している場所はルーティングです。 +Web を使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。 +また、ユーザーはページ上の他の要素を同時に操作しないだろうと、ページ全体を一度に再描画sする傾向があります。 -これは [React Router](https://reacttraining.com/react-router/) のようなライブラリを使ったアプリに `React.lazy` を使用することでルーティングベースのコード分割を導入する方法の例です。 +これは [React Router](https://reacttraining.com/react-router/) のようなライブラリを使ったアプリに `React.lazy` を使用することで +ルーティングベースのコード分割を導入する方法の例です。 ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; From 92dc443a913bbeb4bbb1627f6eaa18b10e49d6c9 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sat, 9 Feb 2019 22:51:26 +0900 Subject: [PATCH 11/13] Apply suggestions from code review Co-Authored-By: atsumine --- content/docs/code-splitting.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 8ba827f7e..a1a2a2c71 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 の設定が、追加の設定なしにすぐに手に入るでしょう。 @@ -58,7 +58,7 @@ 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) を使用）などのバンドラによってサポートされている機能です。 コード分割は、ユーザが必要とするコードだけを「遅延読み込み」する手助けとなり、 @@ -68,7 +68,7 @@ console.log(add(16, 26)); // 42 ## `import()` {#import} -コード分割をアプリに導入する最も良い手段は動的インポート `import()` を使用することです。 +コード分割をアプリに導入する最も良い手段は動的な `import()` 構文を使用することです。 **Before:** @@ -140,7 +140,7 @@ function MyComponent() { このコンポーネントがレンダリングされる際には、`OtherComponent` を含むバンドルを自動的にロードしてくれます。 -`React.lazy` は動的インポート構文 `import()` を呼び出す関数を引数として取ります。これは React コンポーネントを含む `default` export を持つモジュールに解決される `Promise` を返さなければなりません。 +`React.lazy` は動的インポート構文 `import()` を呼び出す関数を引数として取ります。この関数は React コンポーネントを含む `default` export を持つモジュールに解決される `Promise` を返さなければなりません。 ### Suspense {#suspense} @@ -160,7 +160,7 @@ function MyComponent() { } ``` -`fallback` プロパティはコンポーネントがロードされるのを待っている間に表示したいあらゆる React 要素を受け取ります。`Suspense` コンポーネントは遅延コンポーネントより上位のどこにでも配置することができます。また、複数の遅延コンポーネントを単一の`Suspense` コンポーネントでラップすることもできます。 +`fallback` プロパティはコンポーネントがロードされるのを待っている間に表示したいあらゆる React 要素を受け取ります。`Suspense` コンポーネントは遅延コンポーネントより上位のどこにでも配置することができます。また、複数の遅延コンポーネントを単一の `Suspense` コンポーネントでラップすることもできます。 ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -236,7 +236,7 @@ const App = () => ( ## 名前付きエクスポート {#named-exports} -`React.lazy` は現在デフォルトエクスポートのみサポートしています。インポートしたいモジュールが名前付きエクスポートを使用している場合、それをデフォルトとして再エクスポートする中間モジュールを作成できます。これにより、treeshaking が機能し未使用のコンポーネントを取り込まず済むようにできます。 +`React.lazy` は現在デフォルトエクスポートのみサポートしています。インポートしたいモジュールが名前付きエクスポートを使用している場合、それをデフォルトとして再エクスポートする中間モジュールを作成できます。これにより、tree shaking が機能し未使用のコンポーネントを取り込まず済むようにできます。 ```js // ManyComponents.js From 2523d512c404c3513463a4862bc3834deb4c6c28 Mon Sep 17 00:00:00 2001 From: atsu Date: Sat, 9 Feb 2019 22:57:32 +0900 Subject: [PATCH 12/13] fix suggestions. --- content/docs/code-splitting.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index a1a2a2c71..7fd789bd0 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/) などの ツールを使ってファイルを「バンドル」しています。 -バンドルはインポートされたファイルをたどって、それらを1つのファイルにまとめるプロセスです。 +バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。 このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 #### 例 {#example} @@ -88,8 +88,8 @@ import("./math").then(math => { > 補足： > -> `import()` 構文は ECMAScript (JavaScript) が[提案](https://github.com/tc39/proposal-dynamic-import)している、 -> 現時点ではまだ言語標準として実装されていない構文です。 +> `import()` 構文は ECMAScript (JavaScript) における[提案中](https://github.com/tc39/proposal-dynamic-import)の構文であり、 +> 現時点ではまだ言語標準となっていません。 > 近い将来での標準化が期待されています。 Webpackがこの構文を見つけると、自動的にアプリのコードを分割します。 @@ -99,7 +99,7 @@ Next.jsも同様です。 もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。 きっとあなたの Webpack の設定はおよそ[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なっているはずでしょうから。 -もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文を解析できても変換してしまわないようにする必要があります。 +もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文をパースできても変換してしまわないようにする必要があります。 そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。 ## `React.lazy` {#reactlazy} @@ -203,14 +203,14 @@ const MyComponent = () => ( ); ``` -## ルート単位でのコード分割 {#route-based-code-splitting} +## ルーティング単位でのコード分割 {#route-based-code-splitting} アプリ内のどこにコード分割を導入するかを決めるのは少し面倒です。 バンドルを均等に分割する場所を確実に選択したいところですが、ユーザ体験を妨げてはなりません。 コード分割を導入するにあたって適している場所はルーティングです。 -Web を使用するほとんどの人は、ロード時間がかかるページ遷移に慣れています。 -また、ユーザーはページ上の他の要素を同時に操作しないだろうと、ページ全体を一度に再描画sする傾向があります。 +Web を使用するほとんどの人は、多少のロード時間がかかるページ遷移に慣れています。 +また、ユーザがページ上の他の要素を同時に操作する可能性を減らすよう、ページ全体を一度に再レンダーすることが多いでしょう。 これは [React Router](https://reacttraining.com/react-router/) のようなライブラリを使ったアプリに `React.lazy` を使用することで ルーティングベースのコード分割を導入する方法の例です。 From 2e244fdd9093d832cc83d8231d8c02231acbff7c Mon Sep 17 00:00:00 2001 From: atsu Date: Sun, 10 Feb 2019 10:20:17 +0900 Subject: [PATCH 13/13] fix mistranslation on webpack configuration --- 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 7fd789bd0..330cf678a 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -97,7 +97,7 @@ Create React App を使用している場合はすでに設定がされている Next.jsも同様です。 もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。 -きっとあなたの Webpack の設定はおよそ[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なっているはずでしょうから。 +きっとあなたの Webpack の設定はだいたい[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なると思います。 もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文をパースできても変換してしまわないようにする必要があります。 そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。