理解webpack4.splitChunks

程序员文章站 2022-03-26 15:01:43

一、前言之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的，现在正好有时间打算好好了解一下，看了官方文档也陆陆续续的看了看网上别人写的文章，感觉大部分都是将官方文档翻译了一遍，很多问题都没有解释清楚，无奈只好自己写demo去通过实际编译结果来理解，经过一天多的不断调试和百度，基本弄清 ......

一、前言

　　之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的，现在正好有时间打算好好了解一下，看了官方文档也陆陆续续的看了看网上别人写的文章，感觉大部分都是将官方文档翻译了一遍，很多问题都没有解释清楚，无奈只好自己写demo去通过实际编译结果来理解，经过一天多的不断调试和百度，基本弄清楚了splitchuns的运行规则了，特此记录下来。

二、webpack中的三个概念module、chunk和bundle

　　在研究splitchunks之前，我们必须先弄明白这三个名词是什么意思，主要是chunk的含义，要不然你就不知道splitchunks是在什么的基础上进行拆分。

　　从官网上貌似没找太多的解释，去网上搜了搜基本上都在转述这位老哥的回答，我根据自己的理解给出我个人的看法：

module：就是js的模块化webpack支持commonjs、es6等模块化规范，简单来说就是你通过import语句引入的代码。
chunk: chunk是webpack根据功能拆分出来的，包含三种情况：

　　　　1、你的项目入口（entry）

　　　　2、通过import()动态引入的代码

　　　　3、通过splitchunks拆分出来的代码

　　　　chunk包含着module，可能是一对多也可能是一对一。

bundle：bundle是webpack打包之后的各个文件，一般就是和chunk是一对一的关系，bundle就是对chunk进行编译压缩打包等处理之后的产出。

三、splitchunks

　　下面进入正题讲解splitchunks，splitchunks就算你什么配置都不做它也是生效的，源于webpack有一个默认配置，这也符合webpack4的开箱即用的特性，它的默认配置如下：

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
        }
      }
    }
  }
};

我们现在用一个简单的react项目来测试下打包之后的效果如何，我的这个项目有两个页面entry1.js和page1.js，entry1.js是入口文件，entry1.js里面动态引入了page1.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'))

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

让我们想一想打包之后的代码是怎样的呢？

理解webpack4.splitChunks