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
Remove section about ES modules and tree-shaking (#3410)
In practice, tree-shaking does not currently allow for the kind of
bundle size reduction achievable using direct module imports, so we
shouldn't encourage it as an option for minimizing bundle size.
For convenience, React Router exposes its full API on the top-level `react-router` import. However, this causes the entire React Router library and its dependencies to be included in client bundles that include code that makes any imports from the top-level CommonJS bundle.
3
+
For convenience, React Router exposes its full API on the top-level `react-router` import. However, this causes the entire React Router library and its dependencies to be included in client bundles that include code that imports from the top-level CommonJS bundle.
4
4
5
-
There are two options for minimizing client bundle size by excluding unused modules.
5
+
Instead, the bindings exported from `react-router`are also available in `react-router/lib`. When using CommonJS models, you can import directly from `react-router/lib` to avoid pulling in unused modules.
6
6
7
-
8
-
## Import from `react-router/lib`
9
-
10
-
Bindings exported from `react-router` are also available in `react-router/lib`. When using CommonJS models, you can import directly from `react-router/lib` to avoid pulling in unused modules.
11
-
12
-
Assuming you are transpiling ES2015 modules into CommonJS modules, instead of
7
+
Assuming you are transpiling ES2015 modules into CommonJS modules, instead of:
13
8
14
9
```js
15
10
import { Link, Route, Router } from'react-router'
16
11
```
17
12
18
-
use
13
+
use:
19
14
20
15
```js
21
16
importLinkfrom'react-router/lib/Link'
@@ -24,16 +19,3 @@ import Router from 'react-router/lib/Router'
24
19
```
25
20
26
21
The public API available in this manner is defined as the set of imports available from the top-level `react-router` module. Anything not available through the top-level `react-router` module is a private API, and is subject to change without notice.
27
-
28
-
29
-
## Use a Bundler with ES2015 Module Support
30
-
31
-
React Router offers a ES2015 module build and defines a `jsnext:main` entry point. Only if you are using a bundler that supports ES2015 modules and tree-shaking such as webpack 2 or Rollup, you can directly import from `react-router`, as long as you are correctly resolving to the ES2015 module build. Specifically, in those cases, you can write
32
-
33
-
```js
34
-
import { Link, Route, Router } from'react-router'
35
-
```
36
-
37
-
Tree-shaking will ensure that only the relevant modules will be included in your bundle.
38
-
39
-
**Note:** Please do not import from the subdirectory with the ES module build directly. If you are using webpack 2, please add `jsnext:main` to `resolve.mainFields` (or `resolve.packageMains` for older versions of webpack 2).
0 commit comments