上回说到按照默认的splitChunks配置,入口里面的第三方依赖没有打包出来,这个是因为chunks属性的原因,下面我们就介绍chunks属性的意义和用法. chunks的含义是拆分模块的范围,它有三个值async.initial和all. async表示只从异步加载得模块(动态加载import())里面进行拆分 initial表示只从入口模块进行拆分 all表示以上两者都包括 我们回顾下上一篇文章里面我们说的webpack splitChunks默认配置: module.exports =…

一.前言 之前一直也没有研究过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的…

splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.cacheGroup必须同时满足各个条件才能生效,这个之前我理解错误,我以为比如minSize或是minChunks等条件只要满足一条就可以拆分,但是实际上必须同时满足才行 splitChunks的配置项都是作用于cacheGroup上的,如果将cacheGroup的默认两个分组vendor和defau…

cacheGroups其实是splitChunks里面最核心的配置,一开始我还认为cacheGroups是可有可无的,这是完全错误的,splitChunks就是根据cacheGroups去拆分模块的,包括之前说的chunks属性和之后要介绍的种种属性其实都是对缓存组进行配置的.splitChunks默认有两个缓存组:vender和default,可以再来回顾一下splitChunks的默认配置: module.exports = { //... optimization: { splitChun…

博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过router.jsx的配置进行代码分离,js文件的名字根据[name].router.jsx生成. { test: /\.router\.jsx/, loader: [ 'bundle-loader?lazy&name=[1]&regExp=([^\\\\\\/]*)\\.router\\.jsx'…

webpack4放弃了 commonsChunkPlugin,使用更方便灵活智能的 splitChunks 来做分包的操作. 下面有几个例子,并且我们假设所有的chunks大小至少为30kb(采用splitChunks默认配置) vendors 入口 chunk-a: react react-dom 其他组件 chunk-b: react react-dom 其他组件 chunk-c: angular 其他组件 chunk-d: angular 其他组件 产出 vendors-chunk-a-c…

webpack 4 webpack 四大核心概念: 入口(entry) // 打包入口 输出(output) : 打包后输出的位置配置 loader  : loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript).loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块 插件(plugins) : 有更强大的功能,比如:打包优化,压缩.代码分割.静态资源处理.环境变量的注入.将所有css的module抽…

访问网址: https://github.com/webpack/analyse "scripts": { "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js", } 执行上述语句,指的是 将打包的进程放入 stats.json 文件中 如果不能访问给出的网址: 使用FQ软件 shadowsock  ------ https:…