webpack3.X CommonChunkPlugin

2018-06-13 admin

随着项目一点点的深入,对于webpack的配置也是改了又改,看了又看,这里就再记录一下CommonsChunkPlugin的用法,多用于个人记忆。希望对你有所帮助。

基本使用

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: module => {
    // 所有 node_modules 下的文件
    return module.resource && /node_modules/.test(module.resource)
  },
}),

CommonsChunkPlugin配置项

1、name和names

a.如果name的值不与任何已存在的chunk相同,则会从options.chunks中提取出公共代码,并形成新的chunk,并以options.name去设置该chunk的name。

b.如果name选中的是已存在的chunk,则会从options.chunks中提取出被name选中的chunk。

c.如果name是不存在的chunk,则会根据其他配置提取出公共chunk,并将该chunk的name值设为opitons.name的值。

d.如果name是个数组,则等同于每个name轮番调用该插件。

2、filename common chunk存入本地的文件名,未设置的话就默认使用chunk的名字。

3、minChunks 此属性可以有以下的选项

a. 设定为数字(大于等于2),指定共用模块被多少个 chunk 使用才能被合并。

b. 也可以设为函数,接受 (module, count) 两个参数,就像基本使用的代码那样。

c. Infinity,创建common chunk但是不合并任何公共模块,就是一个空模块。可以搭配entry的配置

entry: {
    vendor: ["jquery", "other-lib"],
    app: "./entry"
  }
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",

    // filename: "vendor.js"
    // (Give the chunk a different name)

    minChunks: Infinity,
    // (with more entries, this ensures that no other module
    //  goes into the vendor chunk)
  })

4、chunks 指定源chunk,设置了webpack会只从这些chunk中合并公共模块,否则m默认所有的chunk。

5、children,async这个两个主要是用于异步加载的,如果我们不设置children和async两个选项的话,那么所有异步加载的chunk中的公共模块会被重复打包。

// 举个例子,一个项目入口js是index.js,还有有三个页面A,B,C,对应的js分别是A.js,B.js,C.js,每个页面都引用了antd这个module,这时候我们为了优化项目首页的加载速度,我们想把三个页面的代码异步加载,所以我们如下设置
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: module => {
    // 所有 node_modules 下的文件
    return module.resource && /node_modules/.test(module.resource)
  },
}),
// 这样设置后首页的index.js确实变小,首页加载速度变快了,但是我们发现A,B,C这个三个js里面都会有antd这个module的代码,就相当于antd这个库代码被重复加载了三次,这就很尴尬了。所以就需要children这个属性了,我们再加一个配置
new webpack.optimize.CommonsChunkPlugin({
  children: true,
  minChunks: (module, count) => {
    // 被 3 个及以上 chunk 使用的共用模块提取出来
    return count >= 3
  }
}),
// 这时候打包完成后你再去看发现A,B,C这个三个js里面的antd已经没有了,但是它跑到index.js这个入口文件里面去了,这就是相当于又增加了首页的加载时间啊。这是因为当你只设置children为true时,所有异步加载的chunk的公共模块会被打包进父chunk中,这里就是入口的index.js中。那我们就改一下上面的配置:
new webpack.optimize.CommonsChunkPlugin({
  async: 'async',
  children: true,
  minChunks: (module, count) => {
    // 被 3 个及以上 chunk 使用的共用模块提取出来
    return count >= 3
  }
})
// 这时候打包完成后你会发现又生成了一个async的chunk文件,里面就是antd这个库,A,B,C和index中都没有antd了。原来设置了async,所有异步加载的chunk的公共模块不会再被打包进父chunk中,而是使用新的异步加载的额外模块chunk,当异步加载的子chunk被加载时,它会被自动并行加载。

// 最终代码
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: module => {
    return module.resource && /node_modules/.test(module.resource)
  },
}),
new webpack.optimize.CommonsChunkPlugin({
  async: 'async-vendor',
  children: true,
  minChunks: (module, count) => {
    return count >= 3
  }
}),   

参考资料: 资料

原文链接:https://github.com/moyueating/blogBackup/blob/master/tool/CommonChunkPlugin.md

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33924.html

文章标题:webpack3.X CommonChunkPlugin

相关文章
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
2015年2月国内操作系统市场份额概况,xp占46.29%,
规则调整:2012年6月1日开始,Mac操作系统中不再包含ipad、iphone市场份额。 ...
2015-11-12
Windows Server 2003将于7月14日停服
腾讯数码讯(文心)据PCWorld网站报道,微软的Windows Server 2003操作系统将很快重蹈Windows XP停服的覆辙,对于迟迟没有升级到新版本服务器操作系统的IT主管来说,这确实是个坏消息。 微软将于7月14日叫停对W...
2015-11-12
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
express不是内部或外部命令
最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator) 安装一个命令工具,命令如下: npm install -g express-generator ...
2015-11-12
回到顶部