[译]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 配置的表现是如何的

1. 在一个入口文件动态引入，另外一个则不 - React
2. 在两个入口文件都动态引入 - lodash
3. 在两个入口文件中都不动态引入 - 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，并将由二者引用。

讨论

第一次翻译，有不少不到位的地方，欢迎指正。地址 github.com/liuhanqu/bl…