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 相关文章推荐
js 函数调用模式小结
Dec 26 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
浅谈layui里的上传控件问题
Sep 26 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP进程通信基础之信号
2017/02/19 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python3实现的字典遍历操作详解
2018/04/18 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python定位xpath 节点位置的方法
2019/08/27 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
审计专业自荐信范文
2014/04/21 职场文书
厕所文明标语
2014/06/11 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Python编写冷笑话生成器
2022/04/20 Python