理解webpack4.splitChunks之其余要点】的更多相关文章

splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.cacheGroup必须同时满足各个条件才能生效,这个之前我理解错误,我以为比如minSize或是minChunks等条件只要满足一条就可以拆分,但是实际上必须同时满足才行 splitChunks的配置项都是作用于cacheGroup上的,如果将cacheGroup的默认两个分组vendor和defau…
一.前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的,现在正好有时间打算好好了解一下,看了官方文档也陆陆续续的看了看网上别人写的文章,感觉大部分都是将官方文档翻译了一遍,很多问题都没有解释清楚,无奈只好自己写demo去通过实际编译结果来理解,经过一天多的不断调试和百度,基本弄清楚了splitChuns的运行规则了,特此记录下来. 二.webpack中的三个概念module.chunk和bundle 在研究splitChunks之前,我们必须先弄明白这三个名词是什么意思,主要…
maxAsyncRequests和maxInitialRequests有相似之处,它俩都是用来限制拆分数量的,maxInitialRequests是用来限制入口的拆分数量而maxAsyncRequests是用来限制异步模块内部的并行最大请求数的,说白了你可以理解为是每个import()它里面的最大并行请求数量. 这其中要注意以下几点: 1.import()文件本身算一个请求 2.并不算js以外的公共资源请求比如css 3.如果同时有两个模块满足cacheGroup的规则要进行拆分,但是maxIn…
maxInitialRequests是splitChunks里面比较难以理解的点之一,它表示允许入口并行加载的最大请求数,之所以有这个配置也是为了对拆分数量进行限制,不至于拆分出太多模块导致请求数量过多而得不偿失. 这里需要注意几点: 入口文件本身算一个请求 如果入口里面有动态加载得模块这个不算在内 通过runtimeChunk拆分出的runtime不算在内 只算js文件的请求,css不算在内 如果同时又两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的…
cacheGroups其实是splitChunks里面最核心的配置,一开始我还认为cacheGroups是可有可无的,这是完全错误的,splitChunks就是根据cacheGroups去拆分模块的,包括之前说的chunks属性和之后要介绍的种种属性其实都是对缓存组进行配置的.splitChunks默认有两个缓存组:vender和default,可以再来回顾一下splitChunks的默认配置: module.exports = { //... optimization: { splitChun…
上回说到按照默认的splitChunks配置,入口里面的第三方依赖没有打包出来,这个是因为chunks属性的原因,下面我们就介绍chunks属性的意义和用法. chunks的含义是拆分模块的范围,它有三个值async.initial和all. async表示只从异步加载得模块(动态加载import())里面进行拆分 initial表示只从入口模块进行拆分 all表示以上两者都包括 我们回顾下上一篇文章里面我们说的webpack splitChunks默认配置: module.exports =…
博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过router.jsx的配置进行代码分离,js文件的名字根据[name].router.jsx生成. { test: /\.router\.jsx/, loader: [ 'bundle-loader?lazy&name=[1]&regExp=([^\\\\\\/]*)\\.router\\.jsx'…
对此书已经慕名已久了,抽空看了第1,2,3,5章,其他章节等有空闲继续看吧. 我的许多博客是给自己快速复习使用的,比如此读书后感,你可以根据我下面的建议读完原书几章再回来复习一下(或许那时候就没必要回来这里复习了): 第一章个人认为必须看,理由有: 1.它很短,花不了多少时间 2.它有趣味,我犹记得看此章节的畅快. 第二章个人认为必须看,而且要认真看,不要跳 第三章个人认为最好看一看,但或许用处不会太大,讲的是程序的汇编级代码,可以用来调试.逆工程.查看性能等 第四章我还没看 第五章个人认为只需…
10张图带你深入理解Docker容器和镜像 申明:此篇文章是转载的(原文地址http://dockone.io/article/783),今天意外发现已经有人转载了(复制了),希望大家关注原创 原本打算将该文章修改为markdown格式,但图片问题有点困扰我,干脆先将文庄转载过来 [编者的话]本文用图文并茂的方式介绍了容器.镜像的区别和Docker每个命令后面的技术细节,能够很好的帮助读者深入理解Docker.这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(container)和镜…
http://dockone.io/article/783 [编者的话]本文用图文并茂的方式介绍了容器.镜像的区别和Docker每个命令后面的技术细节,能够很好的帮助读者深入理解Docker. DockOne将会于2018年5月11日在北京举办Kubernetes技术培训,培训内容包含:Docker基础.容器技术.Docker镜像.数据共享与持久化.Docker三驾马车.Docker实践.Kubernetes基础.Pod基础与进阶.常用对象操作.服务发现.Helm.Kubernetes核心组件原…