Webpack Code Splitting

Webpack4 abolishes CommonsChunkPlugin and introduces optimization.splitchunks

If weppack3 CommonsChunkPlugin is used in Webpack4, the following error will occur:

Error: Run webpack3.config.js webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks

Code Splitting

Split a file into multiple files: Because browsers cache your code, every time you make a change to a file, people visiting your site have to re-download it, including dependencies. If you separate [these dependencies] into separate files, visitors don’t have to re-download them multiple times.

Use WebPack to generate one or more “bundles” containing the final version of your source code, consisting of chunks (one by one).

Function:

Extract common code, reduce code redundancy,

Improve user load speed

Single page reduces download, multiple pages can use cache

Configuration items

module.exports = {
 	/ /...
 	optimization: {
  		splitChunks: {
   			chunks: 'async'.minSize: 30000.minChunks: 1.maxAsyncRequests: 5.maxInitialRequests: 3.automaticNameDelimiter: '~'.name: true.cacheGroups: {}}}}Copy the code
  • chunks: indicates which code needs to be optimized. There are three optional values: initial(initial block), async(load on demand block), and all(all block). The default is async
  • minSize: indicates the minimum module size before compression. The default value is 30000
  • minChunks: indicates the number of times to be referenced. The default value is 1
  • ““maxAsyncRequests: maximum number of parallel requests that can be loaded on demand (default: 5)
  • maxInitialRequests: Maximum number of parallel requests for an entry. Default is 3
  • automaticNameDelimiter: Named concatenator
  • name: Specifies the name of the split block. By default, the block name and hash value are automatically generated
  • cacheGroups: Cache group. The attributes of the cache group include test, Priority, and reuseExistingChunk
    • test: controls which modules are matched by the cache group
    • priority: Indicates the priority of the cache group packaging
    • reuseExistingChunk: A new code block is not created if the current code block contains a module that already exists

Note: Asynchronous and non-asynchronous modules are packaged separately in initial mode. All packages both asynchronous and non-asynchronous. That is, moduleA is introduced asynchronously in indexA and synchronously in indexB, and the lower moduleA will appear in two packaged blocks for INITIAL and only one for ALL.

The official document: webpack.js.org/plugins/spl…