How to - Split code about webpack.js.org HOT 4 CLOSED

Based on my experience with code splitting for different single page and multi page apps, here's an idea on how it can be structured to be more applicable to a developer looking for info on code splitting (and the different types and reasons).

Note: Is CommonChunkPlugin or the vendor chunk concept something that belongs with code splitting, or is this more specific to the concept of on-demand chunks and require.ensure/System.import?

Potential Outline

• Reasons for code splitting
  • On-demand routing for Single Page Apps
  • Improved development build times (only building changed chunks)
  • Aggressive cacheability of long-lived/shared code (common/vendor chunk)
• On-demand chunks
  • specific reasons/benefits (on-demand routing, complex/infrequent logic, authentication security)
  • how to create one
    • note that this happens in the source not in webpack configs
  • examples
    • System.import example
    • require.ensure example
    • any other examples?
    • live examples with available source code?
    • show example network requests to convey the real concept? gif/video?
• Improving development build times (is this a thing?)
  • some build time results with/without code splitting in dev mode when changing a file
• Vendor/commons chunking
  • vendor vs commons chunk
    • when to use each / both
  • explicitly including vendor code (vendor chunk)
    • how to know what to include (generated chunk logs)
    • example config and chunk output
  • automatically including common code (commons chunk)
    • example config and chunk output
    • configuration / tuning

from webpack.js.org.

Great outline and ideas! Thanks.

I can see there are bits like Improving development build times (is this a thing?) that could easily become little articles of their own.

I've been prototyping an enhanced structure that would handle that through a "how to" style miniguide. In that structure this issue would map as "how to split code". Perhaps "how to load code on demand" would be another good split. Doing this would keep the articles short and focused.

Note: Is CommonChunkPlugin or the vendor chunk concept something that belongs with code splitting, or is this more specific to the concept of on-demand chunks and require.ensure/System.import?

It would be good to cover here as it comes up with vendor/commons chunking. That's how I do it in my book.

from webpack.js.org.

@bendman - How about info on ExtractTextPlugin here? It collects all the css chunks and puts them into a single file right?

from webpack.js.org.

@pksjce I feel like that should be linked to from code-splitting, but maybe discussed in detail on its own page or section with plugins. What about briefly discussing it here along the lines of "Code Splitting Non-JS Sources".

from webpack.js.org.