webpack/examples/code-splitting/template.md

65 lines
1.2 KiB
Markdown
Raw Normal View History

2015-05-22 04:36:16 +08:00
This example illustrates a very simple case of Code Splitting with `require.ensure`.
2014-07-24 17:29:49 +08:00
2015-05-22 04:36:16 +08:00
* `a` and `b` are required normally via CommonJS
2016-03-25 01:45:18 +08:00
* `c` is depended through the `require.ensure` array.
2014-07-24 17:29:49 +08:00
* 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:
2015-05-22 04:36:16 +08:00
* `output.js` is the entry chunk and contains
2014-07-24 17:29:49 +08:00
* the module system
* chunk loading logic
* the entry point `example.js`
* module `a`
* module `b`
2016-02-04 07:27:47 +08:00
* `1.js` is an additional chunk (on demand loaded) and contains
2014-07-24 17:29:49 +08:00
* module `c`
* module `d`
You can see that chunks are loaded via JSONP. The additional chunks are pretty small and minimize well.
2012-04-05 20:59:01 +08:00
# example.js
``` javascript
{{example.js}}
```
# js/output.js
``` javascript
{{js/output.js}}
```
# js/0.output.js
2012-04-05 20:59:01 +08:00
``` javascript
{{js/0.output.js}}
2012-04-05 20:59:01 +08:00
```
Minimized
``` javascript
{{min:js/0.output.js}}
2012-04-05 20:59:01 +08:00
```
# Info
## Uncompressed
```
{{stdout}}
```
## Minimized (uglify-js, no zip)
```
{{min:stdout}}
```