webpack4放弃了 commonsChunkPlugin,使用更方便灵活智能的 splitChunks 来做分包的操作。

下面有几个例子,并且我们假设所有的chunks大小至少为30kb(采用splitChunks默认配置)

vendors

入口

chunk-a: react react-dom 其他组件

chunk-b: react react-dom 其他组件

chunk-c: angular 其他组件

chunk-d: angular 其他组件

产出

vendors-chunk-a-chunk-b: react react-dom

vendors-chunk-c-chunk-d: angular

chunk-a 至 chunk-d: 对应的其他组件

重复的vendors

入口

chunk-a: react react-dom 其他组件

chunk-b: react react-dom lodash 其他组件

chunk-c: react react-dom lodash 其他组件

产出

vendors-chunk-a-chunk-b-chunk-c: react react-dom

vendors-chunk-b-chunk-c: lodash

chunk-a 至 chunk-c: 对应的其他组件

模块

入口

chunk-a: vue 其他组件 shared组件

chunk-b: vue 其他组件 shared组件

chunk-c: vue 其他组件 shared组件

假设这里的shared体积超过30kb,这时候webpack会创建vendors和commons两个块

产出

vendors-chunk-a-chunk-b-chunk-c: vue

commons-chunk-a-chunk-b-chunk-c: shared组件

chunk-a 至 chunk-c: 对应的其他组件

如果shared提交小于30kb,webpack不会特意提出来,webpack认为如果仅仅为了减少下载体积的话,这样做是不值得的。

多个共享模块

入口

chunk-a: react react-dom 其他组件 react组件

chunk-b: react react-dom angular 其他组件

chunk-c: react react-dom angular 其他组件 react组件 angular组件

chunk-d: angular 其他组件 angular组件

产出

vendors-chunk-a-chunk-b-chunk-c: react react-dom

vendors-chunk-b-chunk-c-chunk-d: angular

commons-chunk-a-chunk-c: react组件

commons-chunk-c-chunk-d: angular组件

chunk-a 至 chunk-d: 对应的其他组件

关于webpack默认配置

splitChunks: {
chunks: "async",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
  • chunks: 表示从哪些chunks里抽取代码,有三个值:
    1. initial:初始块,分开打包异步\非异步模块
    2. async:按需加载块, 类似initial,但是不会把同步引入的模块提取到vendors中
    3. all:全部块,无视异步\非异步,如果有异步,统一为异步,也就是提取成一个块,而不是放到入口文件打包内容中

通过import()控制模块的一些属性

initial情况下,如果两个入口一个是同步引入,一个是异步引入,那么会分开打包,同步的直接将引入包打到入口文件的打包文件里,异步的会分出单独的块,按需引入

all情况下,如果一个异步一个同步,会统一分出一个单独的块,然后引入

  • minSize代表最小块大小,如果超出那么则分包,该值为压缩前的。也就是先分包,再压缩
  • minchunks表示最小引用次数,默认为1
  • maxAsyncRequests: 按需加载时候最大的并行请求数,默认为5
  • maxInitialRequests: 一个入口最大的并行请求数,默认为3
  • automaticNameDelimiter表示打包后人口文件名之间的连接符
  • name表示拆分出来块的名字
  • cacheGroups:缓存组,除了上面所有属性外,还包括
    • test:匹配条件,只有满足才会进行相应分包,支持函数 正则 字符串
    • priority:执行优先级,默认为0
    • reuseExistingChunk:如果当前代码块包含的模块已经存在,那么不在生成重复的块

几种配置示例(依赖优先级priority)

个人感觉其实只要玩好cacheGroups,就能完成各种各样的分包
// 将所有node_modules中应用2次以上的抽成common块
optimization: {
splitChunks: {
cacheGroups: {
common: {
test: /[\\/]node_modules[\\/]/,
name: 'common',
chunks: 'initial',
priority: 2,
minChunks: 2
}
}
}
}
// 把所有超过2次的达成common,不局限于node_modules
optimization: {
cacheGroups: {
common: {
name: 'common',
chunks: 'initial',
priority: 2,
minChunks: 2,
}
}
}
// 额外提取react相关基础模块,然后抽取引入超过两次的模块到common
optiomization: {
cacheGroups: {
reactBase: {
name: 'reactBase',
test: (module) => {
return /react|redux|prop-types/.test(module.context);
},
chunks: 'initial',
priority: 10,
},
common: {
name: 'common',
chunks: 'initial',
priority: 2,
minChunks: 2,
}
}
}
// 如果提取出来的包依然很大,你又想利用好缓存,你可以这样做
// 这样你的每一个node_modules包都是一个chunks,对缓存很友好,会节约很多用户流量,虽然流量已经不之前
optimization: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// 避免服务端不支持@
return `npm.${packageName.replace('@', '')}`;
},
},
}
}

相关文章

Code Splitting, chunk graph and the splitChunks optimization

webpack4 splitchunks实践探索

chunks解释

vendors过大的解决方案

webpack4分包方案的更多相关文章

  1. Android分包方案multidex

    对于功能越来越复杂的app的两大问题 问题一:当项目越来越大,方法数超过65536,编译时会出错(为什么是65536,参考下面关于dexopt对方法id检索存储介绍),这个所说的方法数包含用到的框架, ...

  2. [转]Android dex分包方案

    转载自:https://m.oschina.net/blog/308583 当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装 ...

  3. Android dex分包方案

    当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方法数量过多,编译时 ...

  4. android分包方案

    当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方法数量过多,编译时 ...

  5. dex分包方案

    当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方法数量过多,编译时 ...

  6. Android dex分包方案和热补丁原理

    一.分包的原因: 当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方 ...

  7. android 基于分包方案的修复

    # 本demo实现原理来自 https://github.com/dodola/HotFix https://zhuanlan.zhihu.com/p/20308548 # Anti类功能,及其原理 ...

  8. webpack 性能优化 dll 分包

    webpack 性能优化 dll 分包 html-webpack-externals-plugin DLLPlugin https://www.webpackjs.com/configuration/ ...

  9. dex分包变形记

    腾讯Bugly特约作者:李金涛 一.背景 就在项目灰度测试前不久,爆出了在 Android 3.0以下手机上安装时出现 INSTALL _ FAILED_DEXOPT,导致安装失败.这一问题意味着项目 ...

随机推荐

  1. [考试反思]0901NOIP模拟测试34:游离

    又是放假回来的收心考.幸而熬了夜回来也不至于很困(虽说第二天早上困成狗...) 说分数吧: skyhAK300,后面有220,220,220,190,190,180 我170,排第8.凑合,其实不太满 ...

  2. permu 莫队 总结

    由于每次询问静态区间里完整值域段的最大大小 貌似很好用莫队转移,所以考虑怎么转移 当给它扩展一个数时,就是给值域添加了一个值 这个值可能已经存在,也可能是新的 有的神仙做法是维护了一个并查集,然而我这 ...

  3. Spring Boot 配置 - Consul 配置中心

    ▶ Spring Boot 依赖与配置 Maven 依赖 <dependencyManagement> <dependencies> <dependency> &l ...

  4. CAS3.5.2 Server登录后返回用户信息详细解决方案

    单点登录(Single Sign-On, 简称SSO)是目前比较流行的服务于企业业务整合的解决方案之一,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.大家在使用时CA ...

  5. 基于docker实现redis高可用集群

    基于docker实现redis高可用集群 yls 2019-9-20 简介 基于docker和docker-compose 使用redis集群和sentinel集群,达到redis高可用,为缓存做铺垫 ...

  6. mybatis的parameterType为map,map里带有多个list

    我写这个主要是为了解决sql注入 原sql有sql注入, 结果:select req_msg_id from account_message_info where req_msg_id in ('12 ...

  7. nyoj 163 Phone List(动态字典树<trie>) poj Phone List (静态字典树<trie>)

    Phone List 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 Given a list of phone numbers, determine if it i ...

  8. React组件间的通讯

    组件化开发应该是React核心功能之一,组件之间的通讯也是我们做React开发必要掌握的技能.接下来我们将从组件之间的关系来分解组件间如何传递数据. 1.父组件向子组件传递数据 通讯是单向的,数据必须 ...

  9. python:沙盒(virtualenv)

    当电脑需要使用多个版本的python时,可以使用沙盒:或者使用docker: virtualenv是Python自带的,通过pip安装的 [root@centos7 public]# cd jinji ...

  10. ef+Npoi导出百万行excel之踩坑记

            最近在做一个需求是导出较大的excel,本文是记录我在做需求过程中遇到的几个问题和解题方法,给大家分享一下,一来可以帮助同样遇到问题的朋友,二呢,各位大神也许有更好的方法可以指点小弟一 ...