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 对象介绍
Jan 20 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
关于vue-router路径计算问题
May 10 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
php仿ZOL分页类代码
2008/10/02 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
Vue实现手机计算器
2020/08/17 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
将python安装信息加入注册表的示例
2019/11/20 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
opencv实现图像几何变换
2021/03/24 Python
最新党员的自我评价分享
2013/11/04 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
大四学生个人总结
2015/02/15 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
Python Flask实现进度条
2022/05/11 Python