mirror of https://github.com/webpack/webpack.git
65 lines
1.3 KiB
Markdown
65 lines
1.3 KiB
Markdown
This example illustrates a very simple case of Code Splitting with `require.ensure`.
|
|
|
|
* `a` and `b` are required normally via CommonJS
|
|
* `c` is depended through the `require.ensure` array.
|
|
* This means: make it available, but don't execute it
|
|
* webpack will load it on demand
|
|
* `b` and `d` are required via CommonJs in the `require.ensure` callback
|
|
* webpack detects that these are in the on-demand-callback and
|
|
* will load them on demand
|
|
* webpacks optimizer can optimize `b` away
|
|
* as it is already available through the parent chunks
|
|
|
|
You can see that webpack outputs two files/chunks:
|
|
|
|
* `output.js` is the entry chunk and contains
|
|
* the module system
|
|
* chunk loading logic
|
|
* the entry point `example.js`
|
|
* module `a`
|
|
* module `b`
|
|
* `1.output.js` is an additional chunk (on demand loaded) and contains
|
|
* module `c`
|
|
* module `d`
|
|
|
|
You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well.
|
|
|
|
# example.js
|
|
|
|
``` javascript
|
|
{{example.js}}
|
|
```
|
|
|
|
|
|
# dist/output.js
|
|
|
|
``` javascript
|
|
{{dist/output.js}}
|
|
```
|
|
|
|
# dist/3.output.js
|
|
|
|
``` javascript
|
|
{{dist/3.output.js}}
|
|
```
|
|
|
|
Minimized
|
|
|
|
``` javascript
|
|
{{production:dist/3.output.js}}
|
|
```
|
|
|
|
# Info
|
|
|
|
## Unoptimized
|
|
|
|
```
|
|
{{stdout}}
|
|
```
|
|
|
|
## Production mode
|
|
|
|
```
|
|
{{production:stdout}}
|
|
```
|