首页 > 其他分享 >webpack--抽取公共文件配置

webpack--抽取公共文件配置

时间:2023-02-28 14:34:15浏览次数:33  
标签:异步 抽取 -- chunk webpack common chunks minChunks Chunk

使用方法:在 webpack config 的 plugins 属性里添加 CommonsChunkPlugin 实例即可。

clipboard.png

实例化的配置项「options」如下:

name 或者 names:chunk的名称,如果是 names 数组,则相当于为数组里的每个name 实例化插件。如果缺省,而且 children 或者 asyn 为 true,那么,所有的 chunks 都会被使用。

filename:此 common chunk 的文件名模板,可以与 output.filename 一样

minChunks:通常情况下这是一个整数,表示至少有 minChunks 个 chunk 使用了该模块,该模块才会被挪到公共代码「common chunk」里。minChunks 还可以是 Infinity,意味着将没有任何模块被移入进来,只是创建当前这个 chunk,这通常用来生成 jquery 等第三方代码库。minChunks还可以是一个返回布尔值的函数,返回 true 该模块会被移入 common chunk,否则不会。默认值是 chunks 的长度。

chunks:这是一个元素为 chunk 名称的数组,插件将会从这些 chunks 里提取 common chunks。可见,minChunks 如果是整数,那么它应该小于 chunks 的长度,且大于1。如果缺省,所有的入口 chunks 会被选中。

children:默认false。如果为 true ,相当于上一项 chunks 配置为当前 chunk 的子 chunk,用于 code split。

async:默认false。如果为 true,生成的 common chunk 将会是异步加载的。这个异步的 common chunk 是 name 这个 chunk 的子 chunk,而且跟 chunks 一起并行加载

minSize:如果有指定大小,那么 common chunk 的文件大小至少有 minSize 才会被创建。非必填项。

提示:以上配置项理解起来有些复杂,应结合实际案例运行的结果来理解

CommonsChunkPlugin 能解决的问题

在使用插件前,考虑几个问题:

  • 对哪些 chunk 进行提取,这决定了 chunks ,children 和 name 要怎么配置

  • common chunk 是否异步,这决定了 async 怎么配置

  • common chunk 的粒度,这决定了 minChunks 和 minSize 怎么配置

以下是官方给出的常用的场景:

  • 提取两个及两个以上 Chunk 的公共代码

  • 将 Code Split 切割出来的 Chunk「就是子 Chunk」,提取到父 Chunk

  • 将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk

  • 提取某个类似 jquery 或 react 的代码库「但是这个用得很少,使用用 dll 插件来打包会更好一些,一下篇介绍」

例1:chunks 的公共代码,生成 page-comm

clipboard.png

例2:将 code split 的公共子 chunk 提取到父 chunk

clipboard.png

topic.js 使用了 code split

clipboard.png

例3:将 Code Split 切割出来的 Chunk,提取到一个新的异步加载的 Chunk
async 设置为true,与例2一样,不同的是例2提取到父 chunk,这样会增加父 chunk 的文件大小,而例3提到一个新的 chunk 里,这个 chunk 是异步加载的。

clipboard.png

多跑实例,理解各配置项产生的影响

标签:异步,抽取,--,chunk,webpack,common,chunks,minChunks,Chunk
From: https://www.cnblogs.com/zaishiyu/p/15988268.html

相关文章

  • 经典算法贪心(刷题归纳)
    <贪心算法greedyalgorithnm>本质是让机器模拟人类,每次都按照某一个标准取最优解,一般常用最优子结构问题,但不是所有的时候贪心都获得最优解。跟DP最大的区别在于,贪心不可......
  • Python中如何读写.bin文件?
    我们知道numpy的array是可以保存到文件的,一个常用的做法是通过to_file()保存到而进行.bin文件中,然后再通过from_file()从.bin文件中将其读取出来,下面看一个例子。data_in......
  • [收藏]实现支持断点续传多线程下载的 Http Web 客户端工具类 (第2版)
    实现支持断点续传多线程下载的HttpWeb客户端工具类(第2版)[日期:2005-03-21] 作者:Microshaoft[字体:大中小]/*.Net/C#:实现支持断点续传多线程下载的HttpWeb客......
  • Ghost XP打XP SP3后出现登录不了的问题
    昨天给一个好朋友重新安装了Xp系统,为了加快装机的速度,用的是萝卜花园的GHOST版。安装完成后,为了免除打系统补丁的等待时间,就用U盘把SP3补丁拷到他的电脑上,然后进行了安装,一......
  • 2023.02.28 - 数组扁平化处理||同结构嵌套数组对象中删除某个键值
    根据childrens字段递归扁平化数组(保留父元素)//方法一:根据childrens字段递归扁平化数组(保留父元素)functionflatten1(arr){"usestrict";if(!arr)return[]......
  • 在android源码中编译ADW_Launcher
    1.下载ADW_Launcher源码 cd/android-2.1/packages/apps/ mkdirADW_Launcher cdADW_Launchergitclonegit://github.com/AnderWeb/android_packages_apps_Launcher.gi......
  • Linux安装PHP8 新版笔记
    PHP部分 官网下载地址:https://www.php.net/downloads.php 我下载的是此时的最新稳定版8.2.3cd/usr/localwgethttps://www.php.net/distributions/php-8.2.3.tar.......
  • Java容器类List、ArrayList、Vector及map、HashTable、HashMap
    ArrayList和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存操作,所以索引......
  • 网络故障排查
    常见的网络故障(非硬件):故障1:计算机可以通过IP地址连接到网络设备,但是不能通过主机名连接。(请至少写出两个原因)关闭防火墙DHCP分配有问题DNS端口被占用故障2:计算机未......
  • Java微基准测试神器JMH初探
    当我们编写一段Java代码之后,如果想知道代码性能如何,就需要进行一些快速的性能测试。当我们实现一个需求,面临2种及以上的方案,选择一种性能更好的方案时,也需要进行一些快速的......