Skip to content

Update code-splitting.md #2153

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 5 commits into from
Aug 26, 2018
Merged

Update code-splitting.md #2153

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a1bb9c7
Update code-splitting.md
tiendo1011 May 15, 2018
3b84940
Merge branch 'master' into patch-1
montogeek Jun 24, 2018
840b33a
Update code-splitting.md
tiendo1011 Aug 24, 2018
baa5ba1
Merge branch 'master' into patch-1
tiendo1011 Aug 24, 2018
fd7edaa
Merge branch 'master' into patch-1
montogeek Aug 26, 2018
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
9 changes: 6 additions & 3 deletions src/content/guides/code-splitting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ contributors:
- kcolton
- efreitasn
- EugeneHlushko
- Tiendo1011
- byzyk
related:
- title: <link rel=”prefetch/preload”> in webpack
Expand Down Expand Up @@ -232,7 +233,7 @@ __src/index.js__
-
- // Lodash, now imported by this script
- element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
+ return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a similar line of code on line 286, which should also be updated.

+ var element = document.createElement('div');
+ var _ = _.default;
+
Expand All @@ -249,6 +250,8 @@ __src/index.js__
+ })
```

The reason we need `default` is since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of `module.exports`, it will instead create an artificial namespace object for the CommonJS module, for more information on the reason behind this, read [webpack 4: import() and CommonJs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655)

Note the use of `webpackChunkName` in the comment. This will cause our separate bundle to be named `lodash.bundle.js` instead of just `[id].bundle.js`. For more information on `webpackChunkName` and the other available options, see the [`import()` documentation](/api/module-methods#import-). Let's run webpack to see `lodash` separated out to a separate bundle:

``` bash
Expand All @@ -272,7 +275,7 @@ __src/index.js__
``` diff
- function getComponent() {
+ async function getComponent() {
- return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
- return import(/* webpackChunkName: "lodash" */ 'lodash').then({ default: _ } => {
- var element = document.createElement('div');
-
- element.innerHTML = _.join(['Hello', 'webpack'], ' ');
Expand All @@ -281,7 +284,7 @@ __src/index.js__
-
- }).catch(error => 'An error occurred while loading the component');
+ var element = document.createElement('div');
+ const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
+ const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...and a couple of lines above - see .then(_ => { ...}

+
+ element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+
Expand Down