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

chunks的含义是拆分模块的范围,它有三个值async、initial和all。

  • async表示只从异步加载得模块(动态加载import())里面进行拆分
  • initial表示只从入口模块进行拆分
  • all表示以上两者都包括

我们回顾下上一篇文章里面我们说的webpack splitChunks默认配置:

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

我们发现chunks的默认配置是async,也就是只从动态加载得模块里面进行拆分,怪不得能够把page1引入的第三方模块拆分出来,但是因为entry1.js属于入口chunk所以它引入的第三方库react-dom就没能拆分出来。

  现在让我们来将chunks设置为all看看能否修复这个问题,下图就是chunks设置all拆分出来的代码:

  

这回我们发现入口模块的第三方依赖已经被成功拆分出来了(第一个),接下来让我来考考你,如果我将chunks设置为initial,打包的结果会是什么呢?

上面就是chunks设置为initial的结果,不知道你猜对了吗,也就是将page1.js这个动态加载的模块所引入的第三方模块去掉了,没有拆分出来,因为initial只会对入口模块进行拆分。

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

  1. 理解webpack4.splitChunks

    一.前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的,现在正好有时间打算好好了解一下,看了官方文档也陆陆续续的看了看网上别人写的文章,感觉大部分都是将官方文档翻译了一遍,很多问题 ...

  2. 理解webpack4.splitChunks之maxAsyncRequests

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

  3. 理解webpack4.splitChunks之maxInitialRequests

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

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

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

  5. 理解webpack4.splitChunks之cacheGroups

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

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

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

  7. webpack4分包方案

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

  8. webpack知识分享

    webpack 4 webpack 四大核心概念: 入口(entry) // 打包入口 输出(output) : 打包后输出的位置配置 loader  : loader 让 webpack 能够去处理 ...

  9. webpack学习笔记(三)

    访问网址: https://github.com/webpack/analyse "scripts": { "dev-build": "webpack ...

随机推荐

  1. Linux和Windows数据同步

    正在做一个小项目,关于Linux和Windows数据同步,新知识很兴奋,比赛很有信心,加油吧少年 项目进行中:今晚实验室包宿开整.

  2. 构造函数详解,explicit,初始化列表

    一.构造函数 在类中有一种特殊的成员函数,它的名字与类名相同,我们在创建类的时候,这个特殊的成员函数就会被系统调用.这个成员函数,就叫“构造函数”. 因为构造函数会被系统自动调动,构造函数的目的就是初 ...

  3. ORACLE 动态执行SQL语句

    本文转自 http://zhaisx.iteye.com/blog/856472 Oracle 动态SQL Oracle 动态SQL有两种写法:用 DBMS_SQL 或 execute immedia ...

  4. Java多线程—阻塞队列和生产者-消费者模式

    阻塞队列支持生产者-消费者这种设计模式.该模式将“找出需要完成的工作”与“执行工作”这两个过程分离开来,并把工作项放入一个“待完成“列表中以便在随后处理,而不是找出后立即处理.生产者-消费者模式能简化 ...

  5. F6&F7adjust the volume

    Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard La ...

  6. Visual Studio Code 调试 PHP

    Visual Studio Code 调试 PHP 2018/12/4 更新 Nginx + php-cgi.exe 下与 Visual Studio Code 配合调试 必需环境 Visual St ...

  7. win10 ping不通所有地址

    电脑使用的很正常,是公司内网,但是在昨天测试数据库连接的时候,所有的地址都ping不通了.原先是可以ping通的,然后各种查,各种尝试. 清空dns缓存, cmd命令查看dns缓存:ipconfig ...

  8. Linux下的Shell特殊符号大全(转)

    在shell中常用的特殊符号罗列如下: # ; ;; . , / \ 'string'| ! $ ${} $? $$ $* "string"* ** ? : ^ $# $@ `co ...

  9. JDK中ClassLoader的分类以及ClassLoader间的层次关系

    几个常见的ClassLoader: bootstrap  class  loader: 最早启动的class  loader,一般使用C语言,汇编语言,或是c++写的,用操作系统本地语言写的.这个cl ...

  10. Springsecurity搭建自定义登录页面

    1.springSecurity的搭建 新建一个springboot的web项目,我这边只选中了web,建立后如下: pom依赖: <!-- https://mvnrepository.com/ ...