Skip to content

docs(guides) update tree shaking guide, make syntax consistent #2426

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 2 commits into from
Aug 22, 2018
Merged

docs(guides) update tree shaking guide, make syntax consistent #2426

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebe0f56
docs(guides) update tree shaking guide, make syntax consistent
EugeneHlushko Aug 7, 2018
2b9d2df
Merge branch 'master' into guides/tree
montogeek Aug 22, 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
17 changes: 8 additions & 9 deletions src/content/guides/tree-shaking.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ contributors:
- lumo10
- byzyk
- pnevares
- EugeneHlushko
related:
- title: "webpack 4 beta — try it today!"
url: https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2#9a67
Expand Down Expand Up @@ -60,7 +61,7 @@ export function cube(x) {
}
```

Set the `mode` configuration option to [development](https://webpack.js.org/concepts/mode/#mode-development) to make sure that the bundle is not minified:
Set the `mode` configuration option to [development](/concepts/mode/#mode-development) to make sure that the bundle is not minified:

__webpack.config.js__

Expand All @@ -74,7 +75,7 @@ module.exports = {
path: path.resolve(__dirname, 'dist')
- }
+ },
+ mode: "development"
+ mode: 'development'
Copy link
Member

Choose a reason for hiding this comment

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

how come the linter didn't throw here?

Copy link
Member

Choose a reason for hiding this comment

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

ah I see its diff, never mind

};
```

Expand Down Expand Up @@ -172,9 +173,7 @@ Finally, `"sideEffects"` can also be set from the [`module.rules` configuration

## Minify the Output

So we've cued up our "dead code" to be dropped by using the `import` and `export` syntax, but we still need to drop it from the bundle. To do that, we'll use the `-p` (production) webpack compilation flag to enable `UglifyJSPlugin`.

As of webpack 4, this is also easily toggled via the `"mode"` configuration option, set to `"production"`.
So we've cued up our "dead code" to be dropped by using the `import` and `export` syntax, but we still need to drop it from the bundle. To do that set the `mode` configuration option to [`production`](/concepts/mode/#mode-production) configuration option.

__webpack.config.js__

Expand All @@ -187,8 +186,8 @@ module.exports = {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
- mode: "development"
+ mode: "production"
- mode: 'development'
+ mode: 'production'
};
```

Expand All @@ -205,8 +204,8 @@ T> [ModuleConcatenationPlugin](/plugins/module-concatenation-plugin) is needed f
So, what we've learned is that in order to take advantage of _tree shaking_, you must...

- Use ES2015 module syntax (i.e. `import` and `export`).
- Add a "sideEffects" property to your project's `package.json` file.
- Include a minifier that supports dead code removal (e.g. the `UglifyJSPlugin`).
- Add a `"sideEffects"` property to your project's `package.json` file.
- Use [`production`](/concepts/mode/#mode-production) `mode` configuration option to enable [various optimizations](/concepts/mode/#usage) including minification and tree shaking.

You can imagine your application as a tree. The source code and libraries you actually use represent the green, living leaves of the tree. Dead code represents the brown, dead leaves of the tree that are consumed by autumn. In order to get rid of the dead leaves, you have to shake the tree, causing them to fall.

Expand Down