[译]Webpack 4 — 神秘的SplitChunksc插件
原文链接:Webpack 4 — Mysterious SplitChunks Plugin
官方发布了 webpack 4,舍弃了之前的 commonChunkPlugin,增加了 SplitChunksPlugin, 对于这个插件,它的 option 选项有‘initial’、'async'、'all'三个值。我想大多数刚学习 webpack 4 的同学都不能很好的理解这几个值的区别,到底每个选项值意味着什么呢,这篇文章为我们详细解释了这几个值的区别。
这是我的一个粗略尝试,通过一个常见的例子来理解和帮助你使用 SplitChunksPlugin 选项。
作为早期的爱好者,我试图理解代码分割 (Code-Spliting) 背后的魔法。文档说 splitChucnks 接受'initial', 'async', 'all'。我有点困惑,更加提高了我的好奇心。
我深入研究了文档的 Github 历史记录和 WebpackOptions 概要,并发现,
“There are 3 values possible ”initial”, ”async” and ”all”. When configured the optimization only selects initial chunks, on-demand chunks or all chunks.” — Github History
“Select chunks for determining shared modules (defaults to “async”, “initial” and “all” requires adding these chunks to the HTML) ”
— WebpackOptions Schema
这里的想法是有 a.js 和 b.js 两个入口文件,然后引用相同的 node_modules。 其中的一些 module 会被动态引入,用来检验代码分割(Code-Spliting)的行为。
我们使用 Webpack Bundle Analyzer Plugin 来帮助我们理解我们的 node_modules 是如何被分割的。
a.js:
只有 lodash 是动态引入的
b.js:
我选这样的配置的主要原因是为了理解当存在公共库时,Webpack 配置的表现是如何的
- 在一个入口文件动态引入,另一个则不 - React
- 在两个入口文件都动态引入 - lodash
- 在两个入口文件中都不动态引入 - jquery
我们将保持这些文件不变,并通过 chunks 的值来更改 webpack 的配置。
1. chunks : “async” — Optimization over async module
chunks: 'async' 告诉 webpack
”hey, webpack!我只关心动态导入的模块的优化。你可以保留非动态模块“
现在,让我们一步一步看看发生了什么
- webpack 会从 b.js 提取出 react,并移动到一个新文件,但保持 a.js 中的 react 不动。这个优化只会作用到动态模块,import('react') 声明会产生独立的文件,import 'react' 则不会
- webpack 从 a.js 中提取 lodash,并移动到一个新文件,该文件也被 b.js 引用了
- 这里不会对 jquery 进行优化,尽管 a.js 和 b.js 都引用了
2. chunks : “initial” — Optimization over Sync Module
chunks: 'initial' 告诉 webpack”hey, webpack!我不关心动态引入的模块,你可以为每一个模块分别创建文件。但是,我希望将所有非动态引入的模块放在一个 bundle 中,尽管它们还需要引入其他的非动态引入的木块,我准备与其他文件共享和分块我的非动态导入模块“
现在,让我们一步一步看看发生了什么
- a.js 中的 react 会被移动到node_vendors~a.bundle.js, b.js 中的 react 会被移动到0.bundle.js
- a.js 和 b.js 中的 lodash 会被移动到1.bundle.js。为什么?这是一个动态引入的模块
- jquery 是一个非动态导入的公共模块,会移动到 node_vendors~a~b.bundle.js,被 a.js 和 b.js 共享
3. chunks : ‘all’ — Optimization over Async and Sync Module
chunks: 'all' 告诉 webpack
”hey, webpack!我不关心这是一个动态还是非动态引入的模块。都对它们进行优化。 但要确保......你足够聪明这样做“
现在,让我们一步一步看看发生了什么
- react 在 a.js 中是非动态引入的模块,在 b.js 中是动态引入的。因此,它转到单个文件 0.bundle.js,它将由两者引用。
- lodash 在两个文件中都是动态引入的,所以它显然得到一个单独的文件1.bundle.js
- jquery 是非动态导入的,因此它转到公共共享模块 node_vendors~a~b.bundle.js,并将由两者引用。
讨论
第一次翻译,有很多不到位的地方,欢迎指正。地址 https://github.com/liuhanqu/blog/issues/3
原文地址:https://www.cnblogs.com/homehtml/p/11795306.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android实现C/S聊天室
- OpenCV4.4 CUDA编译与加速全解析
- 如何利用Kotlin实现极简回调
- Android辅助权限的介绍和配置完整记录
- Redis基础——剖析基础数据结构及其用法
- SwipeRefreshLayout+RecyclerView实现上拉刷新和下拉刷新功能
- 二值分析 | OpenCV + skimage如何提取中心线
- 详解OpenVINO 模型库中的人脸检测模型
- Tensorflow的妙用
- 终端抓包神器 | tcpdump参数解析及使用
- GoLang 中发送 email 邮件
- 漫画算法题:两数之和与三数之和
- 推荐系统与深度学习(十七)——DIN模型原理
- 可视化教程开启BERT之旅
- pandas中apply与map的异同