webpack高级应用篇(十四):splitChunks.chunks 中的 async、initial 和 all
文章目录
- 前言
- 三种模式含义
- 实验前准备
- 单入口
- async 模式
- initial 模式
- all 模式
- 结论
- 多入口
- async 模式
- initial 模式
- all 模式
- 结论
前言
以下摘自 webpack SplitChunksPlugin 官方文档
然而官方文档中只说明了 async
是默认的选项,关于 async
、initial
和 all
之间的区别却没有很好的进行举例解释。
今天我们将来探讨一下这三者的区别。
三种模式含义
- async表示动态引入的模块将会被拆分;
- initial表示不会将动态引入和静态引入的同一模块一起处理,而是分开处理;
- all对所有类型的模块进行拆分;
实验前准备
因为 webpack 将根据以下条件自动拆分 chunks:
- 新的 chunk 可以被共享,或者模块来自于
node_modules
文件夹- 新的 chunk 体积大于 20kb(在进行 min+gz 之前的体积)
- 当按需加载 chunks 时,并行请求的最大数量小于或等于 30
- 当加载初始化页面时,并发请求的最大数量小于或等于 30
因此本实验采用了两个第三方模块来做实验,分别是 lodash
和 moment
,因为他们的体积足够大;
本实验基于 webpack@5.69.1 从单入口和多入口 这两个方向进行测试;
本实验项目目录
// splitChunks.chunks
├── src
│ ├── index.js
│ ├── main-1.js
│ ├── main-2.js
├── webpack.config.js
单入口
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = {mode: 'development',output: {clean: true,filename: 'js/[name].[contenthash].js',},plugins: [new HtmlWebpackPlugin(),new BundleAnalyzerPlugin(),],optimization: {splitChunks: {chunks: 'async',// chunks: 'initial',// chunks: 'all',},},
};
src/index.js
import moment from 'moment';import(/* webpackChunkName: 'lodash-index' */ 'lodash').then(({ default: lodash }) => {lodash.findIndex([1, 2, 3]);
});console.log('index', moment().format('YYYY-MM-DD HH:mm:ss'));console.log('My index is running');
执行 npx wp
,可以得到如下打包结果
async 模式
可以看到最终打包出2️⃣个文件
其中动态引入的 lodash
被打包为 lodash-index.hash.js
;
index.js
打包为 main.hash.js
,其中包含了 moment
模块
initial 模式
可以看到最终打包出3️⃣个文件
其中动态引入的 lodash
依旧被打包为 lodash-index.hash.js
;
index.js
打包后被拆分为 main.hash.js
和 vendors-node_modules_moment_locale.js
all 模式
可以看到最终打包出3️⃣个文件,
其中动态引入的 lodash
依旧被打包为 lodash-index.hash.js
;
index.js
打包后被拆分为 main.hash.js
和 vendors-node_modules_moment_locale.js
这时的 all
和 initial
是没有区别的
结论
async | initial | all |
---|---|---|
![]() |
![]() |
![]() |
在单入口的情况下 initial
和 all
模式是一样的,async
只会拆分动态引入的模块。
多入口
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = {mode: 'development',entry: {main1: './src/main-1.js',main2: './src/main-2.js',},output: {clean: true,filename: 'js/[name].[contenthash].js',},plugins: [new HtmlWebpackPlugin(),new BundleAnalyzerPlugin(),],optimization: {splitChunks: {chunks: 'async',// chunks: 'initial',// chunks: 'all',},},
};
src/mian-1.js
import moment from 'moment';import(/* webpackChunkName: 'lodash-main-1' */ 'lodash').then(({ default: lodash }) => {lodash.findIndex([1, 2, 3]);
});console.log('main1', moment().format('YYYY-MM-DD HH:mm:ss'));console.log('My main1 is running');
src/mian-2.js
import { findIndex } from 'lodash';
import moment from 'moment';findIndex([1, 2, 3]);console.log('main2', moment().format('YYYY-MM-DD HH:mm:ss'));console.log('My main2 is running');
执行 npx wp
,可以得到如下打包结果
async 模式
可以看到最终打包出3️⃣个文件,
其中 main-1.js
打包为 main1.hash.js
,其中包含了moment
模块
main-1.js
中动态引入的 lodash
被打包为 lodash-main-1.hash.js
;
main-2.js
打包为 main2.hash.js
,其中包含了 moment
、lodash
模块
分析
两个入口文件中都引入了
moment
、lodash
模块,但结果是这两个模块在整个的打包中都没有进行复用
initial 模式
可以看到最终打包出5️⃣个文件,
其中 main-1.js
打包后被拆分为 main1.hash.js
main-1.js
中动态引入的 lodash
被打包为 lodash-main-1.hash.js
;
main-1.js
中大模块 moment
被拆分为 vendors-node_modules_moment_locale.hash.js
main-2.js
打包后被拆分为 main2.hash.js
main-2.js
中静态引入的 lodash
被打包为 vendors-node_modules_lodash_lodash_js.b3a5668e68bc3ca616ad.js
;
main-2.js
中大模块 moment
被拆分为 vendors-node_modules_moment_locale.hash.js
,与 main-1.js
公用。
分析
两个入口文件中都引入了
moment
、lodash
模块,其中同为静态引入的 moment 模块在打包后被拆分为一个进行复用但分别动态引入和静态引入的 lodash 模块在打包后还是两个文件,没有进行复用
all 模式
可以看到最终打包出4️⃣个文件,
其中 main-1.js
打包后被拆分为 main1.hash.js
main-1.js
中动态引入的 lodash
被打包为 lodash-main-1.hash.js
;
main-1.js
中大模块 moment
被拆分为 vendors-node_modules_moment_locale.hash.js
main-2.js
打包后被拆分为 main2.hash.js
main-2.js
中静态引入的 lodash
打包后在关系图中没有显示,但实际是与 main-1.js
中动态引入 的 lodash
进行了复用;
main-2.js
中大模块 moment
被拆分为 vendors-node_modules_moment_locale.hash.js
,与 main-1.js
公用。
分析
两个入口文件中都引入了
moment
、lodash
模块,其中符合拆分条件的相同模块,无论是动态引入还是静态引入的,都被拆分为一个文件进行了复用
结论
async | initial | all |
---|---|---|
![]() |
![]() |
![]() |
通常情况下,all
模式更为强大。像官网中生涩的描述:设置为 all
可能特别强大,因为这意味着 chunk 可以在异步和非异步 chunk 之间共享。
源码地址:https://gitee.com/yanhuakang/webpack-demos/tree/master/advanced/step_14-splitChunks/chunks
webpack高级应用篇(十四):splitChunks.chunks 中的 async、initial 和 all相关推荐
- Webpack高级应用篇(四):模块解析(Module Resolution)
目录 webpack 中的解析规则 绝对路径 相对路径 模块路径 解析(Resolve) resolve.alias resolve.extensions 外部扩展(Externals) extern ...
- a7100换电池_动动手你也行 篇十四:冲动是魔鬼——单反电池换芯失败记
动动手你也行 篇十四:冲动是魔鬼--单反电池换芯失败记 2020-10-11 15:36:27 0点赞 5收藏 23评论 创作立场声明:本文系作者实践总结,欢迎交流. 背景 家有尼康D5200,现已7 ...
- JVM上篇:内存与垃圾回收篇十四--垃圾回收器
JVM上篇:内存与垃圾回收篇十四–垃圾回收器 1. GC分类与新能指标 1.1 垃圾回收器概述 垃圾收集器没有在规范中进行过多的规定,可以由不同的厂商.不同版本的JVM来实现. 由于JDK的版本处于高 ...
- 登陆小米云服务器,玩机教程 篇十四:如何一键直达小米云服务
玩机教程 篇十四:如何一键直达小米云服务 2019-10-29 11:13:34 3点赞 13收藏 4评论 小米云服务相信大家都不陌生,每天多多少少都会用到.但是小米云服务每次进入有没有发现需要经过好 ...
- 64位投影机专业测试软件,软件分享 篇十四:利用投影仪提高生活质量 —— 自用软件推荐...
软件分享 篇十四:利用投影仪提高生活质量 -- 自用软件推荐 2019-12-30 21:08:51 8点赞 121收藏 6评论 自从家里购入了投影仪以后,电视就变成摆设了 ...本篇分享我自己经常用 ...
- 二十四、Struts2中的UI标签
二十四.Struts2中的UI标签 Struts2中UI标签的优势: 数据回显 页面布局和排版(Freemark),struts2提供了一些常用的排版(主题:xhtml默认 simple ajax) ...
- java中过滤流_第十四讲 Java中的字节流和过滤流
第十四讲Java中的字节流和过滤流 主要内容 InputStream和FileInputStream OutputStream和FileOutputStream 文件字节IO流应用举例 过滤流类和常用 ...
- webpack性能优化-optimization.splitChunks.chunks中的“all“、“async“和“initial“
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的.CommonsChunkPlugin 曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化. --摘自 ...
- 谷粒商城 高级篇 (十四) ---------- 商品详情
目录 一.详情数据 二.查询详情 三.sku 组合切换 四.关键 SQL 一.详情数据 封装成 vo 如下: SkuItemVo: @Data public class SkuItemVo {//1. ...
最新文章
- 我们眼中的2015年互联网10大产品事件
- idea装python插件_学习idea2020手动安装python插件的实现方法
- 让SH/BAT脚本定位到运行目录的相对位置,实现其脚本可在任意运行目录下被正确执行...
- 小游戏-扑克牌-Java
- oracle pl sql developer 教程,plsql developer怎么使用 plsql developer图文使用教程
- 运用大数据助力大发展
- Python机器学习:贝叶斯文本分类器
- linux目录结构与功能_深入理解linux系统的目录结构(总结的非常详细)
- testlink(以及服务器)问题定位思路
- Tomcat 映射虚拟目录
- 对于以太网口作为下一条路由的理解
- McCabe环路复杂度计算方法
- Allegro gerber文件路径设定
- JAVA设计表情包制作程序_MSNLite表情包制作生成器(Java实现)
- Android客户端和Java服务器端集成支付宝
- HUAWEI nova 青春版“大尺度”内存,手机再满都不怕
- 深圳两青年在伊拉克炮火中淘金400万
- DirectShow SDK下载
- XP中服务与后门技术
- CSS开发技巧实用记(一)
热门文章
- 《童梦奇缘-梦幻般的羁绊》第九章-血霜
- 黑莓手机与安卓机的对比
- DNS server列表整理
- 3.31 论文笔记 | Cached and Confused: Web Cache Deception in the Wild
- 民法学类毕业论文文献包含哪些?
- “超级血狼月”震撼登场!快看史诗级的三合一天文奇观
- Android apk用pm命令安装apk碰到问题汇总
- 微擎数据库表结构,供参考!
- DevOps 工具配置不当,微软、任天堂、华为海思等 50 余家知名企业源码遭泄露...
- 摆摊也要抽时间学的MySQL主从复制