webpack.optimize.CommonsChunkPulgin is not a constructor???请看CommonsChunkPlugin VS SplitChunksPlugin

webpack团队人员卧薪尝胆五个多月的时间终于带来的webpack4+，个人觉得webpack4带来的最大优化便是对于懒加载块拆分的优化，删除了CommonsChunkPlugin，新增了优化后的SplitChunksPlugin，那么CommonsChunkPlugin的痛点在哪？SplitChunksPlugin的优化又是在哪？

1、CommonsChunkPlugin的痛

记得17年始，我刚开始用webpack搭建一个vue的单页应用框架时，我陆续的抛出了几个问题：

1、如何避免单页应用首次的入口文件过大？

这个问题处理起来倒简单，webpack支持import()语法实现模块的懒加载，可以做到随用随载，也就是除了首页要用到文件，其他模块使用懒加载就能有效的避免入口文件过大

2、入口模块以及剩下的懒加载模块引用公用的模块时，代码会重复吗？webpack会处理吗？怎么处理？

代码重复是肯定的，如果父级模块中没有引入懒加载模块的共用模块，那么懒加载各模块间就会出现代码重复；webpack能处理，那么怎么处理呢？这时CommonsChunkPlugin就信誓旦旦地登场了，它能够将全部的懒加载模块引入的共用模块统一抽取出来，形成一个新的common块，这样就避免了懒加载模块间的代码重复了，哇！好强大，点个赞。可惜的是，又回到了第一个问题，你把共用的东西都抽出来了，这样又造成了入口文件过大了。以下是CommonsChunkPlugin时代常用的配置

new webpack.optimize.CommonsChunkPlugin({name: 'vendor',// 引入node_modules的依赖全抽出来minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}// 或者直接minChunks: 2，重复模块大于2的全部抽出来
}),

总之你在代码重复与入口文件控制方面你得做个平衡，而这个平衡挺不利于多人开发的，也不易于优化.

CommonsChunkPlugin的痛，痛在只能统一抽取模块到父模块，造成父模块过大，不易于优化

2、SplitChunksPlugin的好

前面讲了那么多，其实SplitChunksPlugin的登场就是为了抹平之前CommonsChunkPlugin的痛的，它能够抽出懒加载模块之间的公共模块，并且不会抽到父级，而是会与首次用到的懒加载模块并行加载，这样我们就可以放心的使用懒加载模块了，以下是官网说明的一些例子：

假设存在以下chunk-a~chunk-d

chunk-a: react, react-dom, some components

chunk-b: react, react-dom, some other components

chunk-c: angular, some components

chunk-d: angular, some other components

webpack会自动创建两个chunk模块，结果如下：

chunk-a~chunk-b: react, react-dom

chunk-c~chunk-d: angular

chunk-a to chunk-d: Only the components

SplitChunksPlugin使用官网默认配置基本可以满足大多数单页应用了

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

以下是我对于多页应用补充的配置

optimization: {splitChunks: {// 抽离入口文件公共模块为commmons模块cacheGroups: {commons: {name: "commons",chunks: "initial",minChunks: 2}}}},

SplitChunksPlugin的好，好在解决了入口文件过大的问题还能有效自动化的解决懒加载模块之间的代码重复问题

资料：没有了CommonsChunkPlugin，咱拿什么来分包

webpack.optimize.CommonsChunkPulgin is not a constructor???请看CommonsChunkPlugin VS SplitChunksPlugin相关推荐

孪生网络图像相似度_生成对抗网络的进步多大，请看此文
全文共4175字,预计学习时长8分钟最近,多项研究采用了生成对抗网络(Generative Adversarial Networks, 简称GANs)这一技术来生成分辨率为1024x1024的高清图 ...
php中的eq的含义,jquery,_jQuery中的eq(0)到底是什么意思??详情请看下面代码！，jquery - phpStudy...
jQuery中的eq(0)到底是什么意思??详情请看下面代码! 手风琴效果 *{padding:0; margin:0;} .box{margin:50px auto; width:300px; he ...
本地计算机用户改名,win10本地账户管理员怎么改名，详细操作步骤请看本篇
win10用户能否将桌面上的Administrator管理员账户名(即Administrator文件夹名)更名为自己的名字,使自己的电脑更具有个性?答案是肯定的.哪如何实现呢?请看下面具体的操作步聚 ...
用户登录查全表好还是用用户名好_外贸人/货代人不要为海运难过了：请看如何查运价和调配舱位解决缺箱！...
最近很多外贸人/货代人都被海运伤透了心,不仅价格上涨,还经常没舱位或缺柜子!整个人的心态都不好了. 其实呢运价上涨这个大环境趋势,我们也无法改变.但是没舱位和缺柜子是属于流动性的,只要不死盯一家船公司 ...
fiddler启动文件_如何成为Fiddler大神，请看这里！
原标题:如何成为Fiddler大神,请看这里! 什么是Fiddler? Fiddler是一个HTTP/HTTPS协议调试代理工具, 它能够记录客户端和服务器之间的所有 HTTP/请求,可以针对特定的H ...
网盘下载速度太慢的话请看这里！
网盘下载速度太慢的话请看下图,这是无限速的!
郑州市高中计算机考试操作题,郑州市区中招理化生实验操作考试4月8日开考具体流程请看清楚...
郑州市区中招理化生实验操作考试4月8日开考具体流程请看清楚发布时间:2017-04-06 来源:中招直通车责编:孙宏伟 4月6日,郑州市区2017年中招理化生实验操作考试新闻通气会举行. 省市 ...
servlet+javabean+jdbc+mysql基于MVC模式的课件管理系统，有三个表的增删改查和课件搜索、课件上传、课件下载功能，具体功能请看界面上的导航条
源码支持在idea.eclipse.myeclipse运行,数据库采用MySQL数据库,项目采用mvc设计模式开发,页面采用jsp+html+css+js完成. servlet+javabean+jd ...
kms不是盗版,不了解kms的管理员请看下微软官方链接,解决”运行microsoft windows非核心版本的计算机上”的问题（kms不等于盗版）
kms不是盗版,不了解kms的管理员请看下微软官方链接: https://docs.microsoft.com/zh-cn/windows/deployment/volume-activation/a ...

webpack.optimize.CommonsChunkPulgin is not a constructor???请看CommonsChunkPlugin VS SplitChunksPlugin

webpack.optimize.CommonsChunkPulgin is not a constructor???请看CommonsChunkPlugin VS SplitChunksPlugin相关推荐

最新文章

热门文章