From 567198869e1b0db0d3a45011546ee7493903c2d4 Mon Sep 17 00:00:00 2001 From: Tharaka Wijebandara Date: Sun, 12 Mar 2017 15:35:07 +0530 Subject: [PATCH 1/5] Add documentation about using code splitting --- README.md | 1 + packages/eslint-config-react-app/index.js | 4 +- packages/react-scripts/template/README.md | 45 +++++++++++++++++++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0e4699320c8..d402907c1f0 100644 --- a/README.md +++ b/README.md @@ -118,6 +118,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Changing the Page ``](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) - [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Code Splitting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) - [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) - [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) - [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index b909db3e21b..792e4f5009b 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -169,12 +169,12 @@ module.exports = { { object: 'require', property: 'ensure', - message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import', + message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting', }, { object: 'System', property: 'import', - message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import', + message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting', }, ], diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 933e9b0cdcb..ed720c87dfc 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Changing the Page `<title>`](#changing-the-page-title) - [Installing a Dependency](#installing-a-dependency) - [Importing a Component](#importing-a-component) +- [Code Splitting](#code-splitting) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) - [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc) @@ -348,6 +349,50 @@ Learn more about ES6 modules: * [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) * [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) +## Code Splitting + +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 when a specific event triggered. This project setup supports code splitting with `import()` dynamic module loading syntax [using webpack2](https://webpack.js.org/guides/code-splitting-import/) and babel. Dynamic `import()` is currently an ECMAScript [proposal](https://github.com/tc39/proposal-dynamic-import) in stage 3. + +`import()` takes the module name as an argument and returns a promise which always resolves to the namespace object of the module. + +Here is an example: + +### `moduleA.js` + +```js +const moduleA = // ... + +export { moduleA }; +``` +### `App.js` + +```js +import React, { Component } from 'react'; + +class App extends Component { + + handleClick(){ + import('./moduleA').then(function({ moduleA }) { + // Use moduleA + }).catch(function(err) { + // Handle failure + }); + } + + render() { + return ( + <div> + <button onClick={this.handleClick}>Load</button> + </div> + ); + } +} + +export default App; +``` + +This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks 'Load' button. + ## Adding a Stylesheet This project setup uses [Webpack](https://webpack.github.io/) 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**: From 6dee6c2ac35c2ff3829720e46fa724300033ee45 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 18 May 2017 20:36:55 -0400 Subject: [PATCH 2/5] Revise docs a bit --- packages/react-scripts/template/README.md | 26 ++++++++++++----------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f850a026074..5497aefda07 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -213,7 +213,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher. >It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. @@ -332,9 +332,10 @@ Learn more about ES6 modules: ## Code Splitting -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 when a specific event triggered. This project setup supports code splitting with `import()` dynamic module loading syntax [using webpack2](https://webpack.js.org/guides/code-splitting-import/) and babel. Dynamic `import()` is currently an ECMAScript [proposal](https://github.com/tc39/proposal-dynamic-import) in stage 3. +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.<br> +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. -`import()` takes the module name as an argument and returns a promise which always resolves to the namespace object of the module. +`import()` 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. Here is an example: @@ -351,13 +352,14 @@ export { moduleA }; import React, { Component } from 'react'; class App extends Component { - - handleClick(){ - import('./moduleA').then(function({ moduleA }) { - // Use moduleA - }).catch(function(err) { - // Handle failure - }); + handleClick = () => { + import('./moduleA') + .then(({ moduleA }) => { + // Use moduleA + }) + .catch(err => { + // Handle failure + }); } render() { @@ -372,7 +374,7 @@ class App extends Component { export default App; ``` -This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks 'Load' button. +This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. ## Adding a Stylesheet @@ -491,7 +493,7 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c } ``` -Now running `npm start` and `npm run build` also builds Sass files. +Now running `npm start` and `npm run build` also builds Sass files. **Why `node-sass-chokidar`?** From 9432e8283b3e71c754275f5c5c6eb4b690d498ff Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 19 May 2017 04:59:18 +0100 Subject: [PATCH 3/5] Update README.md --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5497aefda07..384e6749a4b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -213,7 +213,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher. >It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. From 1458127a12f1d3f3d6a69e61ea157e8afbb8e5cd Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 19 May 2017 05:02:16 +0100 Subject: [PATCH 4/5] Update README.md --- packages/react-scripts/template/README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 384e6749a4b..e936a60076b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -192,6 +192,7 @@ In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, * [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016). * [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017). * [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal). +* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal) * [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal). * [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax. @@ -342,7 +343,7 @@ Here is an example: ### `moduleA.js` ```js -const moduleA = // ... +const moduleA = 'Hello'; export { moduleA }; ``` @@ -360,7 +361,7 @@ class App extends Component { .catch(err => { // Handle failure }); - } + }; render() { return ( @@ -376,6 +377,8 @@ export default App; This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. +You can also use it with `async` / `await` syntax if you prefer it. + ## Adding a Stylesheet This project setup uses [Webpack](https://webpack.github.io/) 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**: From bcd1a61a4a811a0aa5b585c8be934ac232ef14bf Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 19 May 2017 05:03:41 +0100 Subject: [PATCH 5/5] Update README.md --- packages/react-scripts/template/README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e936a60076b..66e97454ca2 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -333,10 +333,9 @@ Learn more about ES6 modules: ## Code Splitting -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.<br> -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. +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. -`import()` 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. +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. Here is an example: