Skip to content

Translate Code-Splitting #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Feb 10, 2019
Merged

Translate Code-Splitting #58

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b790b03
WIP translating.
sugoikondo Feb 2, 2019
9d4aa3f
translate complete
sugoikondo Feb 3, 2019
9c920db
lint
sugoikondo Feb 3, 2019
6802a92
fix statements on Browserify.
sugoikondo Feb 3, 2019
936e9b0
delete unnessesary statements.
sugoikondo Feb 3, 2019
5cf1524
delete unnessesary statements.
sugoikondo Feb 3, 2019
6570f0a
fix typo
sugoikondo Feb 3, 2019
e0d0623
fix typo
sugoikondo Feb 3, 2019
bd73272
resolve conflicts
sugoikondo Feb 9, 2019
2ae259a
Apply suggestions from code review
koba04 Feb 9, 2019
34773ec
fix breakings.
sugoikondo Feb 9, 2019
92dc443
Apply suggestions from code review
smikitky Feb 9, 2019
2523d51
fix suggestions.
sugoikondo Feb 9, 2019
2e244fd
fix mistranslation on webpack configuration
sugoikondo Feb 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 56 additions & 67 deletions content/docs/code-splitting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
---
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/) などの
ツールを使ってファイルを「バンドル」しています。
バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。
このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。

#### Example {#example}
#### 例 {#example}

**App:**

Expand Down Expand Up @@ -40,42 +39,36 @@ 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 {#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](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:**

Expand All @@ -93,31 +86,29 @@ 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)の構文であり、
> 現時点ではまだ言語標準となっていません。
> 近い将来での標準化が期待されています。

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` {#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:**

Expand Down Expand Up @@ -147,13 +138,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 {#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'));
Expand All @@ -169,7 +160,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'));
Expand All @@ -191,7 +182,7 @@ function MyComponent() {

### Error boundaries {#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';
Expand All @@ -212,19 +203,17 @@ 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.
コード分割を導入するにあたって適している場所はルーティングです。
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';
Expand All @@ -245,9 +234,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` は現在デフォルトエクスポートのみサポートしています。インポートしたいモジュールが名前付きエクスポートを使用している場合、それをデフォルトとして再エクスポートする中間モジュールを作成できます。これにより、tree shaking が機能し未使用のコンポーネントを取り込まず済むようにできます。

```js
// ManyComponents.js
Expand Down