webpack - splitChunksPlugin configuration learning essays

The code is configured to pull away. Official Documents

The official default configuration:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 异步引入
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: { // 缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

Out of the box, the default parameters too.

use:

1, without isolation of the third-party libraries and custom common module

2, isolated from third-party libraries, public custom module, webpack run the file, but they are in the same file

3, a single separating third-party libraries, custom common module, WebPACK run files, each file in a different

4、5、6、....

To a demo.

Project structure:

Src directory contents of each file is very simple, as follows:

/* first.js */
import React from 'react';
import { common } from './common';
console.log('first ' + common);

/* second.js */
import React from 'react';
import { common } from './common';
console.log('second ' + common);

/* common.js */
export const common = 'common file';

The default configuration of the packed result:

View first.js and second.js, will find common reference document and react common.js are packed into it. Repeat the common module package, too large.

Pulled out of third-party libraries, stored in the same file.

Configuration:

Optimization: { 
  splitChunks: { 
    cacheGroups: {// cache group 
      vendors: { 
        Test: / [\\ /] the node_modules [\\ /] /, // unique set cache configuration, matching is the file 
        name: 'vendor', // code file names pulled out 
        chunks: 'all', // synchronous introduction, the introduction of asynchronous takes effect 
        minChunks: 1, // citations 
        priority: 10 // priority. Effect when a plurality of groups 
      } 
    } 
  } 
}

Except for the above parameters, the parameters are not configured to use the default parameters. Note that the default parameters: minSize: 30000, meaning that files larger than 30kb was pulled.

Packaging results:

Configuration: test: / [\\ /] node_modules [\\ /] /, name: 'vendor'. Introduced from node_modules library are packaged into the same file named vendor of.

Generally speaking, the purpose pulled out of third-party libraries be reached.

Then he pulled out a custom common module.

If you open just packed first.js, second.js. We will find this common modules are packaged into it. The same module, packaged repeated, and the volume becomes larger.

Plus a configuration in cacheGroups: