background

What happens if you don’t extract the common part?

1. Repeatedly loading references for the same resources wastes user traffic and server costs.

2. Too many resources need to be loaded on each page, resulting in slow loading of the homepage.

What are the advantages after extraction?

1. Load the same resource only once, reducing network transmission traffic and reducing server pressure.

2. Faster page loading and user experience submission;

The specific use

Train of thought

1. According to the technology stack used by the project, extract the base library used by all pages to form a ‘base.js’ file, which contains all the basic environment dependencies required by the technology stack operation; (As long as the technology stack does not change, the basic can be persistent cache)

2. After removing all the common base dependency code, extract the common code from all pages to form a ‘common.js’;

3. Generate a separate file for each page, so that these files no longer contain ‘base.js’ and’ common.js’ codes, only contain independent business codes for each page;



Definitions and Concepts

CommonsChunkPlugin is used to extract common code. According to the configuration, the basic library and business logic common code are extracted to reduce the repeated reference of resources.

CommonsChunkPluginCommon code cannot be extracted from single-entry files, only extracted
webpack
runtimeEnvironment code; The extracted object is

Configuration parameters

name: ' 'Copy the code

Extract the filename of the common code

names: string[]Copy the code

Names are set with entry names, not paths. If the name is set with an entry chunk, the name is extracted directly. If the name is not set with an entry chunk, an environment code containing the webPack runtime environment is created and used as the extracted content. Extract the run environment from the extract entry;

chunks: string[]Copy the code

Chunks are configured to extract the source of the common code, that is, in which entries the common code needs to be extracted; If it is configured freely, it should select the entry to be extracted from the entry chunk. (I don’t know if this is correct, because IF I directly reference the file path, the effect is not seen)

If you do not set this value, all chunk entries will be extracted

filename: stringCopy the code

Common Chunk file name template, if not set, does not change the original file name (also does not change the name configured in name/names, but if configured, it is preferred)

minChunks: number | Infinity | function(module, count) => booleanCopy the code

Number The minimum number of times a module must appear in an entry chunk before it can be extracted;

Infinity by default is to extract all chunks;

Function (module, count) => Boolean Specifies the extraction rule

The value of minChunks must be greater than 2 and smaller than the length of the chunks (i.e., the length of the chunks configuration item or the length of all entries).

minSize: numberCopy the code

The minimum size of all public modules before they are created

children: booleanCopy the code

If set to true, all submodules of the public chunk are selected; We don’t normally set this value, after all, we value it to pull out common code, not to pull out all of it; But this is something that needs to be handled on a project basis, because you can configure this thing freely;

Async: Boolean | stringCopy the code

This temporarily did not research out is what…..

Specific configuration

The configuration of this is not complicated at all, mainly according to the actual situation of the configuration is more complex, the situation is generally divided into the following types

1. Whether your project is a single entry or a multi-entry application will determine whether the CommonsChunkPlugin is appropriate for you

2. Which chunks to extract determines the names, chunks, and children configuration items

3. Granularity of extraction, which determines the Settings of minChunks and minSize configuration items

Basically, it is OK to configure entry and plugin according to the above items. The ideas extracted are also mentioned at the beginning of the article, so various situations will not be listed

// The main changes to the manifest file are as follows: // The manifest file is extracted from the webpack and some of the code is pulled out. // Every time the business code changes, the file will not be affectedhashModule. exports = {entry: {main: ['./src/index.js'],    
    vendor: ['react']  
  },  
  plugins: [    
    new webpack.optimize.CommonsChunkPlugin({      
      names:['vendor'.'manifest'],          
      children: false, // whether to include minChunks: 2 for all sub-modules of source code, // extract the granularity of code // chunks: [], // need to extract the source of common code}),]}Copy the code