一、前言

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

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

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

  从官网上貌似没找太多的解释,去网上搜了搜基本上都在转述这位老哥的回答《what are module,chunk and bundle in webpack》,我根据自己的理解给出我个人的看法:

  • 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

 import React from 'react'
import ReactDOM from 'react-dom' const App = () => {
let Page1 = null import(/* webpackChunkName: "page1" */'./routes/page1').then(comp => {
Page1 = comp
})
console.log($)
return (
<div>
<div>App</div>
<Page1 />
</div>
)
} ReactDOM.render(<App />, document.getElementById('root'))

page1.js

 import React from 'react'
import _ from 'lodash' const Page1 = () => {
console.log($) return (
<div>
<div>Page1</div>
</div>
)
} export default Page1

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

以上就是打包之后的代码,是否如你所想呢,让我们分析一下:

1、第一个main文件就是打包之后的入口文件,这个我们上面说了webpack会把入口文件单独拆成一个chunk,这个没有问题

2、第三个page1文件,我们上面也说过动态加载得文件webpack会将其拆分为一个chunk,这个也没有问题

3、第二个vendor~page1文件,这个是对page1文件里面引入的第三方库进行打包,具体就是lodash那个第三方库了,这个涉及到cacheGroup,我们在下面的系列文章里面会详细讲述

以上就是所有被拆分出来的包,但是我们发现有一个文件没有拆分出来,那就是entry1里面引入的第三方库react-dom,这个是为什么呢,这个就要涉及到我们接下来讲到的chunks属性的配置。

注意:这里提个小问题为什么react-dom这个第三方库只在entry1.js里面引入了一次就被拆分出来了?这个答案我将在第三篇文章《理解webpack4.splitChunks之cacheGroups》里面进行解释。

为了方便阅读我将整个系列分为了若干小部分,大家可以各取所需:

《理解webpack4.splitChunks之chunks》

《理解webpack4.splitChunks之cacheGroups》

《理解webpack4.splitChunks之maxInitialRequests》

《理解webpack4.splitChunks之maxAsyncRequests》

《理解webpack4.splitChunks之其余要点》

文章中所用到的源码仓库地址是webpack-splitChunks-demo

理解webpack4.splitChunks的更多相关文章

  1. 理解webpack4.splitChunks之maxAsyncRequests

    maxAsyncRequests和maxInitialRequests有相似之处,它俩都是用来限制拆分数量的,maxInitialRequests是用来限制入口的拆分数量而maxAsyncReques ...

  2. 理解webpack4.splitChunks之其余要点

    splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.ca ...

  3. 理解webpack4.splitChunks之maxInitialRequests

    maxInitialRequests是splitChunks里面比较难以理解的点之一,它表示允许入口并行加载的最大请求数,之所以有这个配置也是为了对拆分数量进行限制,不至于拆分出太多模块导致请求数量过 ...

  4. 理解webpack4.splitChunks之cacheGroups

    cacheGroups其实是splitChunks里面最核心的配置,一开始我还认为cacheGroups是可有可无的,这是完全错误的,splitChunks就是根据cacheGroups去拆分模块的, ...

  5. 理解webpack4.splitChunks之chunks

    上回说到按照默认的splitChunks配置,入口里面的第三方依赖没有打包出来,这个是因为chunks属性的原因,下面我们就介绍chunks属性的意义和用法. chunks的含义是拆分模块的范围,它有 ...

  6. Webpack4 splitChunks配置,代码分离逻辑

    博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过rou ...

  7. webpack4分包方案

    webpack4放弃了 commonsChunkPlugin,使用更方便灵活智能的 splitChunks 来做分包的操作. 下面有几个例子,并且我们假设所有的chunks大小至少为30kb(采用sp ...

  8. 再谈 webpack build 及 加载优化

    之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下 之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看 现在讲讲一个页面的首屏加载速度该如何提升 提前说明 需要 we ...

  9. 必备技能一、webpack

    https://cloud.tencent.com/developer/section/1477376----->配置很重要 一.基本安装 mkdir webpack-demo &&am ...

随机推荐

  1. Unicode字符串索引

    一.目标 在通讯录中,我们有很多联系人,需要把这些联系人进行索引.对于每一个索引项对应的若干字符串,需要对这些字符串进行排序. 需要解决两个问题: 如何确定某个汉字应该被哪个字符索引? 某个索引项对应 ...

  2. 浅谈Android选项卡(四)

    前面几篇介绍的选项的用法,基本上使用TabActivity.ViewPager.已经基本上满足开发需求了.但是这里再介绍一种小技巧,在有的时候,感觉使用前面的ViewPager和Fragment时候, ...

  3. window.open完美替代window.showModalDialog

    var url = "http//:www.baidu.com/" var name = "百度"; var iWidth = 1100;//弹窗宽度 var ...

  4. CODEVS-新斯诺克

    原题地址:新斯诺克 题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄 ...

  5. FJWC2019 全连

    题目描述 有n个音符,第i个音符会在第i个时刻来临 令第 i 个音符的准备时间为 ti​ 个单位时间,如果选择去点击第 i 个音符,那么就没法点击所有到来时刻在 (i−ti​ ,i+ti​)中的音符. ...

  6. CentOS7.6下模拟iSCSI,Windows来连

    如题,在CentOS7上模拟一个iSCSI设备,然后在Windows Server 2008上连接这个iSCSI设备 第一步,CentOS7上的操作.CentOS7上安装iSCSI模拟器需要3个包,我 ...

  7. prim /kruskal 最小生成树

    #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> #inc ...

  8. net与树莓派的情缘(二)

    虽然我们可以很方便的通过ssh譬如putty或者vnc连接操控树莓派,但是毕竟树莓派资源没那么高,在上面编程,调试要吃力的多.所以还是想在pc上编程上传到树莓派或者最好,文件共享,可以直接读写共同的文 ...

  9. 关于Java的权限修饰符(public,private,protected,默认friendly)

    以前对访问修饰符总是模棱两可,让自己仔细解释也是经常说不很清楚.这次要彻底的搞清楚. 现在总结如下: 一.概括总结 各个访问修饰符对不同包及其子类,非子类的访问权限 Java访问权限修饰符包含四个:p ...

  10. 向已有的table中插入数据

    table: <table id="seleted-table" class="table table-bordered table-hover" sty ...