webpack/examples/harmony-unused/template.md

52 lines
1.3 KiB
Markdown
Raw Normal View History

This example demonstrates how webpack tracks the using of ES6 imports and exports. Only used exports are emitted to the resulting bundle. The minimizing step then removes the declarations because they are unused.
2016-01-09 10:24:58 +08:00
Excluding unused exports from bundles is known as "[tree-shaking](http://www.2ality.com/2015/12/webpack-tree-shaking.html)".
2016-06-06 02:51:44 +08:00
In this example, only `add` and `multiply` in `./math.js` are used by the app. `list` is unused and is not included in the minimized bundle (Look for `Array.from` in the minimized bundle).
2016-01-09 10:24:58 +08:00
In addition to that, `library.js` simulates an entry point to a big library. `library.js` re-exports multiple identifiers from submodules. Often big parts of that is unused, like `abc.js`. Note how the usage information flows from `example.js` through `library.js` into `abc.js` and all declarations in `abc.js` are not included in the minimized bundle (Look for `console.log("a")` in the minimized bundle).
# example.js
```javascript
_{{example.js}}_
```
# math.js
```javascript
_{{math.js}}_
```
# library.js
```javascript
_{{library.js}}_
```
# dist/output.js
```javascript
_{{dist/output.js}}_
```
# dist/output.js
```javascript
_{{production:dist/output.js}}_
```
# Info
## Unoptimized
```
_{{stdout}}_
```
## Production mode
```
_{{production:stdout}}_
2016-01-09 10:24:58 +08:00
```