webpack 从指定入口文件中提取公共文件的方法


Posted in Javascript onNovember 13, 2018

在不明白CommonsChunkPlugin的使用情况下,直接上手webpack4的splitChunks,实在是难上加难。为了能更好的理解splitChunks的使用,必须出个题目,练练手,才能从中有所收获(下面的题目不考虑实际应用场景):

从指定入口文件中提取公共文件

CommonsChunkPlugin的实现:
entry: {
    index:'./src/index.js',
    index1:'./src/index1.js',
    index2:'./src/index2.js'
},
plugins: [
  new CommonsChunkPlugin({
    name:"common1",
    chunks:['index','index1','index2']
  })
]

其中index和index1以及index2都是打包的入口文件。

splitChunks的实现:

optimization: {
    splitChunks: {
      chunks:"all",
      minSize: 0,
      cacheGroups: {
        common: {
          minChunks: 3,
          priority: -1,
          name:'common',
          chunks (chunk) {
            // exclude `my-excluded-chunk`
            return ['index','index1','index2'].includes(chunk.name);
          }
        }
      }
    }
  }

在cacheGroups下面我们定义了一个common。通过chunks函数,指定三个入口文件为:'index','index1','index2',同时我们还要设置minChunks为3,表示指定三个入口文件中提取出的公共文件,最少要被三个不同的入口文件引用。所以就是从三个入口文件中提取公共的文件。

从两个公共文件中,再提取公共部分

先说一下,这是什么意思:

  • 有6个公共文件a,b,c,d,e,f。
  • 从a,b,c中提取其公共的部分x,从d,e,f中也提取公共部分y。
  • 从x,y中再提取公共部分z。

下面给出webpack3 和webpack4下的处理

CommonsChunkPlugin的实现:

new CommonsChunkPlugin({
  name:"common1",
  chunks:['index','index1','index2']
}),
new CommonsChunkPlugin({
  name:"common2",
  chunks:['app','app1','app2']
}),
new CommonsChunkPlugin({
  name:"common3",
  chunks:['common1','common2']
})

很清楚,先从'index','index1','index2'中提取公共文件‘common1',再从'app','app1','app2'中提取公共文件‘common2'。最后从‘common1'和‘common2'中再提取出公共文件common3。

splitChunks的实现:

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks:"all",
      minSize: 0,
      cacheGroups: {
        common3: {
         minChunks: 6,
         priority: 1,
         reuseExistingChunk: true
        },
        common2: {
          minChunks: 3,
          priority: -2,
          name:'common2',
          chunks (chunk) {
            // exclude `my-excluded-chunk`
            return ['app','app1','app2'].includes(chunk.name);
          }

        },
        common1: {
          priority: -1,
          name: 'common1',
          minChunks: 3,
          enforce: true,
          chunks (chunk) {
            return ['index','index1','index2'].includes(chunk.name);
          }
        }
      }
    }
  }

我没有从文档中找到:提取公共文件之后再处理的方法。所以我用了另外一种方式:

  • 先从6个文件中提取出公共的文件,即common3(common1和common2的公共文件)。
  • 从'index','index1','index2'中提取common1
  • 从'app','app1','app2'中提取common2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
jQuery参数列表集合
Apr 06 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 #Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 #Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 #Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 #Javascript
Vue实现一个无限加载列表功能
Nov 13 #Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 #Javascript
vue中slot(插槽)的介绍与使用
Nov 12 #Javascript
You might like
自动跳转中英文页面
2006/10/09 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
Symfony控制层深入详解
2016/03/17 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
详解python之协程gevent模块
2018/06/14 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
上课睡觉检讨书
2014/01/28 职场文书
学生会离职感言
2014/02/11 职场文书
士力架广告词
2014/03/20 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
文明城市标语
2014/06/16 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle