From www.cnblogs.com/kwzm/p/1031…

Webpack has three main concepts: Module, chunk, and bundle. They are defined as follows:

Module: es Module or CommonJS module, which can be imported or required

Chunk: Webpack entries, dynamically imported modules, and splitChunks of Webpack are packaged as chunks. In addition, chunk and module are usually one-to-one or one-to-many

Bundle: Bundle is the bundle generated by chunk after a series of compilation, compression and packaging processes. Module and chunk generally have a one-to-one relationship

One, foreword

I haven’t studied what rules webpack4 is based on to split modules before. Now I just have time to have a good understanding. I read the official documents and read the articles written by others on the Internet, and I feel that most of them are translated from the official documents, and many problems are not clearly explained. I had no choice but to write my own demo to understand the actual compilation results. After more than one day of continuous debugging and Baidu, I have basically figured out the operating rules of splitChuns, which is hereby recorded.

Webpack contains three concepts: Module, chunk, and Bundle

Before we can study splitChunks, we need to understand the meaning of these three terms, mainly chunk, otherwise you will not know what splitChunks are based on.

I don’t seem to find much explanation on the official website. I searched online and basically paraphrased his answer “What are Module, Chunk and Bundle in Webpack”. According to my own understanding, I give my personal opinion:

Webpack supports commonJS, ES6 and other modular specifications. In simple terms, it is the code that you import through the import statement. Chunk: Chunk is split by Webpack according to its functions, including three situations: 1. Your project entry

Dynamically imported code via import()

3. SplitChunks

Chunk contains modules, which can be one-to-many or one-to-one.

Bundle: Bundles are files packaged by Webpack. Generally, the bundle has a one-to-one relationship with chunk. Bundles are generated after the compilation, compression, packaging and other processing of chunk.

Third, splitChunks

SplitChunks will work even if you don’t do any configuration at all. Because WebPack has a default configuration, which is in line with the out-of-the-box nature of WebPack 4, the default configuration is as follows:

module.exports = {
  / /...
  optimization: {
    splitChunks: {
      chunks: 'async'.minSize: 30000.minChunks: 1.maxAsyncRequests: 5.maxInitialRequests: 3.automaticNameDelimiter: '~'.name: true.cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2.priority: -20.reuseExistingChunk: true}}}}};Copy the code

We now use a simple React project to test the effect of packaging. My project has two pages entry1.js and page1. Entry1.js is the entry file, and the page1 is dynamically imported into entry1.js.

entry1.js

1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 4 
 5 const App = () = > {
 6   let Page1 = null
 7 
 8   import(/* webpackChunkName: "page1" */'./routes/page1').then(comp= > {
 9     Page1 = comp
10   })
11   console.log($)
12   return (
13     <div>
14       <div>App</div>
15       <Page1 />
16     </div>
17   )
18 }
19 
20 ReactDOM.render(<App />.document.getElementById('root'))
Copy the code

page1.js

1 import React from 'react'
 2 import _ from 'lodash'
 4 
 5 const Page1 = () = > {
 6   console.log($)
 7   
 8   return (
 9     <div>
10       <div>Page1</div>
11     </div>
12   )
13 }
14 
15 export default Page1
Copy the code

Let’s think about what the packaged code looks like.

The above is the packaged code. Is it as you think? Let’s analyze it:

1. The first main file is the entry file after packaging. As we mentioned above, Webpack will separate the entry file into a chunk

2. The third page1 file, which we also mentioned above is dynamically loaded, will be split into a chunk by Webpack

The second vendor~page1 file is a package for a third-party library introduced in the page1 file, specifically the Lodash library. This involves cacheGroup, which we’ll cover in more detail in the next series of articles

This is all the packages that have been split. However, one file that has not been split is the react-DOM library introduced in Entry1. Why is this?

Note: here’s a quick question: why was the react-dom library only introduced once in entry1.js and then split? This answer will be explained in the third article “Understanding Webpack 4.splitChunks for cacheGroups”.

I’ve broken the series down into a few sections for your convenience:

Understanding webpack4. SplitChunks

Understanding WebPack 4.splitChunks: cacheGroups

Understand WebPackage 4.splitChunks for maxInitialRequests

MaxAsyncRequests: Understanding WebPackage 4.splitChunks

Understanding the Rest of WebPack 4.splitChunks