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
+71-70
Original file line number
Diff line number
Diff line change
@@ -4,15 +4,14 @@ title: Code-Splitting
4
4
permalink: docs/code-splitting.html
5
5
---
6
6
7
-
## Bundling {#bundling}
7
+
## Đóng Gói (Bundling) {#bundling}
8
8
9
-
Most React apps will have their files "bundled" using tools like
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.
9
+
Hầu hết files trong các ứng dụng React sẽ được "đóng gói" bằng cách
10
+
sử dụng những công cụ như [Webpack](https://webpack.js.org/) hay [Browserify](http://browserify.org/).
11
+
Đóng gói là quá trình xử lý những files đã được import và kết hợp chúng thành một file duy nhất: File đóng gói này
12
+
sau đó có thể được trang web tải lên chỉ một lần.
14
13
15
-
#### Example {#example}
14
+
#### Ví Dụ {#example}
16
15
17
16
**App:**
18
17
@@ -40,86 +39,81 @@ function add(a, b) {
40
39
console.log(add(16, 26)); // 42
41
40
```
42
41
43
-
> Note:
42
+
> Chú ý:
44
43
>
45
-
> Your bundles will end up looking a lot different than this.
44
+
> Bundle của bạn có thể sẽ trông rất khác bên trên.
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
+
Nếu bạn đang sử dụng [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), hay một công cụ tương tự,
47
+
bạn sẽ được thiết lập sẵn webpack để đóng gói ứng dụng của mình.
49
48
50
-
If you aren't, you'll need to setup bundling yourself. For example, see the
Bundling is great, but as your app grows, your bundle will grow too. Especially
58
-
if you are including large third-party libraries. You need to keep an eye on
59
-
the code you are including in your bundle so that you don't accidentally make
60
-
it so large that your app takes a long time to load.
56
+
Đóng gói hẵn rất tuyệt vời, nhưng khi ứng dụng của bạn trở nên lớn hơn,
57
+
file đóng gói của bạn cũng sẽ lớn theo. Đặc biệt khi bạn sử dụng third-party library (thư viện bên thứ 3) lớn.
58
+
Bạn cần phải cẩn thận với những đoạn code bạn đang include vào bundle của mình, bằng cách đó bạn sẽ không
59
+
vô tình làm nó trở nên quá lớn khiến ứng dụng mất nhiều thời gian để tải.
61
60
62
-
To avoid winding up with a large bundle, it's good to get ahead of the problem
63
-
and start "splitting" your bundle.
64
-
[Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature
65
-
supported by bundlers like Webpack and Browserify (via
66
-
[factor-bundle](https://github.com/browserify/factor-bundle)) which can create
67
-
multiple bundles that can be dynamically loaded at runtime.
61
+
Để tránh việc hỏng bundle vì file đóng gói quá lớn. Bạn nên chủ động bắt đầu "phân chia" bundle của mình ngay từ đầu.
62
+
[Code-Splitting](https://webpack.js.org/guides/code-splitting/) là một tính năng được hỗ trợ bởi nhiều bundlers như Webpack và
63
+
Browserfy (bằng [factor-bundle](https://github.com/browserify/factor-bundle)) có thể tạo ra nhiều bundles để load động tại thời điểm
64
+
runtime.
68
65
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.
66
+
Phân chia code cho ứng dụng giúp "lazy-load" chỉ những phần người dùng đang cần, tăng đáng kể hiệu suất mà không cần phải giảm số lượng
67
+
code trong ứng dụng, bạn đã tránh phải tải những đoạn code người dùng có thể sẽ không bao giờ cần đến,
68
+
và giảm số lượng code cần tải lên trong lần đầu tiên.
74
69
75
70
## `import()` {#import}
76
71
77
-
The best way to introduce code-splitting into your app is through the dynamic
78
-
`import()` syntax.
72
+
Phương pháp tốt nhất để sử dụng code-splitting trong ứng dụng là thông qua cú pháp `import()` động.
79
73
80
-
**Before:**
74
+
**Trước:**
81
75
82
76
```js
83
77
import { add } from'./math';
84
78
85
79
console.log(add(16, 26));
86
80
```
87
81
88
-
**After:**
82
+
**Sau:**
89
83
90
84
```js
91
85
import("./math").then(math=> {
92
86
console.log(math.add(16, 26));
93
87
});
94
88
```
95
89
96
-
> Note:
90
+
> Chú ý:
97
91
>
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.
92
+
> Cú pháp `import()` động là một đoạn ECMAScript (JavaScript)
93
+
> [proposal](https://github.com/tc39/proposal-dynamic-import) hiện tại chưa được xem
94
+
> như một phần tiêu chuẩn của ngôn ngữ. Nó mong đợi sẽ được chấp nhận trong tương lai gần.
102
95
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).
96
+
Khi Webpack chạy đến cú pháp này, nó sẽ tự động phân chia code trong ứng dụng của bạn. Nếu bạn sử dụng Create React App,
97
+
việc này đã được thiết lập sẵn cho bạn và bạn có thể [bắt đầu sử dụng](https://facebook.github.io/create-react-app/docs/code-splitting)
98
+
ngay. Nó cũng được hỗ trợ sẵn trong [Next.js](https://github.com/zeit/next.js/#dynamic-import).
107
99
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).
100
+
Nếu bạn đang tự mình cấu hình Webpack, bạn có thể sẽ muốn tham khảo Webpack's
101
+
[hướng dẫn phân chia code](https://webpack.js.org/guides/code-splitting/). Cấu hình Webpack của bạn có thể sẽ trông mơ hồ [như thế này](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
110
102
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).
103
+
Khi sử dụng [Babel](https://babeljs.io/), bạn sẽ cần phải chắc chắn rằng Babel có thể phân giải cú pháp import động nhưng không làm nó
104
+
bị biến đổi. Bạn sẽ cần[babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
113
105
114
106
## `React.lazy` {#reactlazy}
115
107
116
-
> Note:
108
+
> Chú ý:
117
109
>
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).
110
+
> `React.lazy` và Suspense chưa có sẵn cho server-side rendering. Nếu bạn muốn phân chia code ở những ứng dụng render tại server,
111
+
chúng tôi xin giới thiệu [Loadable Components](https://github.com/smooth-code/loadable-components). Nó có [hướng dẫn phân chia code với
This will automatically load the bundle containing the`OtherComponent`when this component gets rendered.
144
+
Nó sẽ tự động tải bundle có chứa`OtherComponent`khi component này được gọi đến.
151
145
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.
146
+
`React.lazy` chỉ lấy một function mà nó được gọi `import()` động. Nó phải trả về một `Promise` và phân giải thành một module với một
147
+
`default` export có chứa một React component.
153
148
154
149
### Suspense {#suspense}
155
150
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.
151
+
Nếu module có chứa `OtherComponent` mà nó chưa được tải lên tại thời điểm `MyComponent` renders,
152
+
chúng ta phải hiển thị một số nội dung fallback trong khi chờ đợi nó hiển thị - ví dụ như một loading indicator.
153
+
Việc này có thể thực hiện nhờ vào `Suspense` component.
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.
169
+
Thuộc tính `fallback` chấp nhận bất kỳ React elements nào bạn muốn render trong khi chờ component được tải lên.
170
+
Bạn có thể đặt `Suspense` component bất kỳ nơi nào bên trên lazy component.
171
+
Bạn thậm chí có thể bọc nhiều lazy component với duy nhất một `Suspense` component.
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.
193
+
Nếu `OtherComponent` không thể tải lên (Ví dụ, lỗi mạng), nó sẽ kích hoạt lỗi.
194
+
Bạn có thể điều khiển những lỗi đó để hiển thị một trải nghiệm người dùng tốt hơn và quản lý phục hồi với [Error Boundaries](/docs/error-boundaries.html). Một khi bạn đã tạo Error Boundary, bạn có thể sử dụng nó bất kỳ nơi nào bên trên lazy components của bạn
## Named Exports (Đặt tên Export) {#named-exports}
249
250
250
-
`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.
251
+
`React.lazy`hiện tại chỉ hỗ trợ default export. Nếu module bạn muốn import sử dụng named export, bạn có thể tạo một module trung gian và sau đó export dưới dạng export default. Điều này chắc đảm bảo rằng treeshaking vẫn hoạt động và bạn không kéo những component chưa được sử dụng.
0 commit comments