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 相关文章推荐
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
jquery密码强度校验
Dec 02 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP count()函数讲解
2019/02/03 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
Java的五个基础面试题
2016/02/26 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
毕业寄语大全
2014/04/09 职场文书
自强之星事迹材料
2014/05/12 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
施工工地安全标语
2014/06/07 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android