mirror of https://github.com/webpack/webpack.git
77 lines
1.2 KiB
Markdown
77 lines
1.2 KiB
Markdown
This example shows the automatically created async commons chunks.
|
|
|
|
The example entry references two chunks:
|
|
|
|
- entry chunk
|
|
- async require -> chunk X
|
|
- async require -> chunk Y
|
|
- chunk X
|
|
- module `a`
|
|
- module `b`
|
|
- module `c`
|
|
- chunk Y
|
|
- module `a`
|
|
- module `b`
|
|
- module `d`
|
|
|
|
These chunks share modules `a` and `b`. The optimization extract these into chunk Z:
|
|
|
|
Note: The optimization compares the size of chunk Z to some minimum value, but this is disabled from this example. In practice, there is no configuration needed for this.
|
|
|
|
- entry chunk
|
|
- async require -> chunk X & Z
|
|
- async require -> chunk Y & Z
|
|
- chunk X
|
|
- module `c`
|
|
- chunk Y
|
|
- module `d`
|
|
- chunk Z
|
|
- module `a`
|
|
- module `b`
|
|
|
|
Pretty useful for a router in a SPA.
|
|
|
|
# example.js
|
|
|
|
```javascript
|
|
_{{example.js}}_
|
|
```
|
|
|
|
# dist/output.js
|
|
|
|
```javascript
|
|
_{{dist/output.js}}_
|
|
```
|
|
|
|
# dist/a_js-b_js.output.js
|
|
|
|
```javascript
|
|
_{{dist/a_js-b_js.output.js}}_
|
|
```
|
|
|
|
# dist/c_js.output.js
|
|
|
|
```javascript
|
|
_{{dist/c_js.output.js}}_
|
|
```
|
|
|
|
# dist/d_js.output.js
|
|
|
|
```javascript
|
|
_{{dist/d_js.output.js}}_
|
|
```
|
|
|
|
# Info
|
|
|
|
## Unoptimized
|
|
|
|
```
|
|
_{{stdout}}_
|
|
```
|
|
|
|
## Production mode
|
|
|
|
```
|
|
_{{production:stdout}}_
|
|
```
|