webpack4 road (4) - Advanced Optimization

1. SplitChunksPlugin widget code division

What is the code division:

It allows you to split a file into multiple files. If you use it well, it can greatly improve application performance. The main reason is because our code is based on the browser cache code. Whenever we do a little bit of change to a file webpack repackaged, hash name change will be introduced, causing the user to re-download updates when you access the site. And we use depends very little change. So we should take depend separated into a separate file. So users do not need to re-download.

First we install a plug-in, and the introduction and use two js files

npm i loadsh

import _ from "loadsh"; // 引入loadsh
const arr = [12,3,5,6,5,1,2,4,2,]
console.log(_.chunk(arr,2)) 

We can see the effect first be packaged before is not configured:

 

 At the same time you'll see two js files are included in the package out of a copy of loadsh library, which is very unfriendly. In fact, the default behavior webpack the shared library will create a separate file, is related to the asynchronous chunks, which we import file asynchronously. Now we slightly changed our configuration of webpack.config.js

    optimization: {
        splitChunks: {
            chunks: "all"
        }
    },

Now you will find packaged changed

 

 

 

 Now we see created a file named an additional vendors ~ index.bundle.js, which contains loadsh library. In fact thanks to this configuration inherent in itself a default configuration cacheGroups

 optimization:{
        splitChunks: {
            /**
             1. The three values
             async extracts only demand loaded module
             initial load module extracts only sync
             all demand, synchronization has extracted
             * / 
            Of chunks are: "All" ,
             // only imported modules is greater than the value of the code division will do (in bytes) 
            the minSize: 30000 ,
             // extracted twice new chunk before compression kb much less than, the default is 0, i.e., does not limit 
            the maxSize: 0 ,
             // the extracted chunk need to be co-introduced minimum number of chunks are 
            minChunks:. 1 ,
             // demand loading blocks of code (vendor-chunk) is the number of concurrent requests is less than or equal to 5 
            maxAsyncRequests : 5 ,
             // initial loading of code blocks, the number of concurrent requests is less than or equal to 3 
            maxInitialRequests:. 3 ,
             // default naming connector 
            automaticNameDelimiter: '~' ,
            /**
             When the name is true, the divided file name [name cache group] [Connector] [filename inlet] .js
             name is false, the divided file name [Module ID] [Connector] [filename inlet] .js
             If the name attribute group exists in the cache attribute name cache group prevail
             * / 
            Name: to true ,
             // will enter the cache is set when the cache line with the condition code set to each divided packet modules, and finally a packaging 
            cacheGroups: {
                 // If the introduction of paper are packed node_modules this cache set (vendors) 
                vendors: {
                     // only segmentation module node_modules folder 
                    Test: / [\\ /] node_modules [\\ /] / ,
                     // priority because if both of the vendors, and which high priority will default to which the package cache group 
                    priority: -10
                },
                default : {
                     // indicates that the library is introduced into at least the number of chunks are, 
                    minChunks: 2 ,
                    priority: -20 ,
                     // if the module has been assigned to this group of vendors, where after division without direct reference to the segmented 
                    reuseExistingChunk: to true
                }
            }
        }
    }

First, vendors including this one indicates the file from node_modules directory. In fact, this one indicates the default default cache group, including other shared modules. We should also look at the above configuration items in order to better carry out the use of oh.

 Current understanding is that, if there is a better optimization again after work record.

 

 

References:

. 1) https://segmentfault.com/a/1190000016623314 (Code division)