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 图片轮播(5张图片)
Dec 30 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Vue开发环境跨域访问问题
Jan 22 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
php去除换行(回车换行)的三种方法
2014/03/26 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
js查找节点的方法小结
2015/01/13 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python实现决策树ID3算法的示例代码
2018/05/30 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
详解Python传入参数的几种方法
2019/05/16 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python中实现栈的三种方法
2020/12/19 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
vue实现倒计时功能
2021/03/24 Vue.js
大型会议接待方案
2014/03/01 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
软件测试专业推荐信
2014/09/18 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang