Skip to content

Commit 87e4849

Browse files
tharakawjgaearon
authored andcommitted
Add documentation about using code splitting (facebook#1801)
* Add documentation about using code splitting * Revise docs a bit * Update README.md * Update README.md * Update README.md
1 parent b278399 commit 87e4849

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

template/README.md

+49
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
2020
- [Changing the Page `<title>`](#changing-the-page-title)
2121
- [Installing a Dependency](#installing-a-dependency)
2222
- [Importing a Component](#importing-a-component)
23+
- [Code Splitting](#code-splitting)
2324
- [Adding a Stylesheet](#adding-a-stylesheet)
2425
- [Post-Processing CSS](#post-processing-css)
2526
- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
@@ -190,6 +191,7 @@ In addition to [ES6](https://github.com/lukehoban/es6features) syntax features,
190191
* [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
191192
* [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
192193
* [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
194+
* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
193195
* [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
194196
* [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
195197

@@ -328,6 +330,53 @@ Learn more about ES6 modules:
328330
* [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
329331
* [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
330332

333+
## Code Splitting
334+
335+
Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.
336+
337+
This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
338+
339+
Here is an example:
340+
341+
### `moduleA.js`
342+
343+
```js
344+
const moduleA = 'Hello';
345+
346+
export { moduleA };
347+
```
348+
### `App.js`
349+
350+
```js
351+
import React, { Component } from 'react';
352+
353+
class App extends Component {
354+
handleClick = () => {
355+
import('./moduleA')
356+
.then(({ moduleA }) => {
357+
// Use moduleA
358+
})
359+
.catch(err => {
360+
// Handle failure
361+
});
362+
};
363+
364+
render() {
365+
return (
366+
<div>
367+
<button onClick={this.handleClick}>Load</button>
368+
</div>
369+
);
370+
}
371+
}
372+
373+
export default App;
374+
```
375+
376+
This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.
377+
378+
You can also use it with `async` / `await` syntax if you prefer it.
379+
331380
## Adding a Stylesheet
332381

333382
This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:

0 commit comments

Comments
 (0)