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实现兼容IE6与IE7的DIV高度
May 13 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 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_MySQL教程-第一天
2007/03/18 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
PHP PDO操作总结
2014/11/17 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
运动会跳远广播稿
2014/02/04 职场文书
高中教师考核方案
2014/05/18 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
解析目标检测之IoU
2021/06/26 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS