maxAsyncRequests和maxInitialRequests有相似之处,它俩都是用来限制拆分数量的,maxInitialRequests是用来限制入口的拆分数量而maxAsyncRequests是用来限制异步模块内部的并行最大请求数的,说白了你可以理解为是每个import()它里面的最大并行请求数量. 这其中要注意以下几点: 1.import()文件本身算一个请求 2.并不算js以外的公共资源请求比如css 3.如果同时有两个模块满足cacheGroup的规则要进行拆分,但是maxIn…

一.前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的,现在正好有时间打算好好了解一下,看了官方文档也陆陆续续的看了看网上别人写的文章,感觉大部分都是将官方文档翻译了一遍,很多问题都没有解释清楚,无奈只好自己写demo去通过实际编译结果来理解,经过一天多的不断调试和百度,基本弄清楚了splitChuns的运行规则了,特此记录下来. 二.webpack中的三个概念module.chunk和bundle 在研究splitChunks之前,我们必须先弄明白这三个名词是什么意思,主要…

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

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'…

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…

之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下 之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看 现在讲讲一个页面的首屏加载速度该如何提升 提前说明 需要 webpack-bundle-analyzer 插件来进行 build 文件的分析 异步文件和必须文件 首先是异步文件,可以按功能分,也可以按照路由分块,目的就是尽量较少首次加载的必须代码的大小 即登录,注册和必须存在的组件是必须加载组件,优先度最高,这些组件是不能为异步的,其他尽量都要设置为异步组件…

https://cloud.tencent.com/developer/section/1477376----->配置很重要 一.基本安装 mkdir webpack-demo && cd webpack-demo // 创建项目文件夹 npm init -y // 初始化项目基础信息 npm install webpack webpack-cli --save-dev // 安装最新版本webpack,如果你使用 webpack 4+ 版本,你还需要安装 CLI----------…