webpack/examples/extra-async-chunk/template.md

This example shows how to create a async loaded commons chunk.

When a chunk has many child chunks which share common modules the CommonsChunkPlugin can extract these common modules into a commons chunk which is loaded in parallel to the requested child chunk.

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 CommonsChunkPlugin extract these into chunk Z:

• 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

{{example.js}}

webpack.config.js

{{webpack.config.js}}

js/output.js

{{js/output.js}}

js/0.output.js

{{js/0.output.js}}

js/1.output.js

{{js/1.output.js}}

js/2.output.js

{{js/2.output.js}}

Info

Unoptimized

{{stdout}}

Production mode

{{production:stdout}}