webpack4之SplitChunksPlugin使用指南

Webpack 4之SplitChunksPlugin使用指南：长沙网络推广经验分享

一、写在前面

在webpack4的升级过程中，我们可能会遇到许多新的挑战和变化。本篇文章主要为大家介绍SplitChunksPlugin的使用指南，长沙网络推广团队觉得这是一个相当实用的插件，因此分享给大家，也给大家做个参考。在此之前，建议大家查看一下webpack的不完全升级指南以及在webpack3.x迁移时遇到的问题，有助于更好地理解本篇文章。

二、参数介绍

让我们先来了解一下SplitChunksPlugin的主要参数：

1. chunks：表示显示块的范围，可选值为initial(初始块)、async(按需加载块)、all(全部块)，默认为all。

2. minSize：表示在压缩前的最小模块大小，默认为0。

3. minChunks：表示被引用次数，默认为1。

4. maxAsyncRequests：最大的按需（异步）加载次数，默认为1。

5. maxInitialRequests：最大的初始化加载次数，默认为1。

6. name：拆分出来块的名字（Chunk Names），默认由块名和hash值自动生成。

7. cacheGroups：缓存组，这是一个对象，包含上述参数以及其他一些特定的参数。

其中，cacheGroups是一个重要的概念，如果不重新赋值，缓存组将默认继承上述选项。有一些参数是必须在缓存组中进行配置的。

三、基本使用

在新版本的webpack中，代码拆分是默认进行的。拆分的规则大致如下：

当模块被重复引用或者来自node_modules中的模块，且满足以下条件之一时，该模块会被拆分出来：

1. 在压缩前最小为30kb。

2. 在按需加载时，请求数量小于等于5。

3. 在初始化加载时，请求数量小于等于3。

值得注意的是，小于30kb的模块在拆分时可能并不值得再单独发送一次请求。在模块很小的情况下，减少请求次数可能比拆分模块更为经济。我们也可以根据自己的需求调整上述的拆分规则。例如：

```javascript

new webpack.optimize.SplitChunksPlugin({

chunks: "all", // 所有块都进行拆分

minSize: 20000, // 模块大小至少为20kb时进行拆分

minChunks: 1, // 模块至少被引用一次进行拆分

maxAsyncRequests: 5, // 异步加载最大请求次数为5

maxInitialRequests: 3, // 初始化加载最大请求次数为3

name: true // 根据模块和缓存组秘钥自动生成代码块的名字

})

```

上面的代码表示在所有代码中，满足一定条件的模块将被拆分到一个单独的代码块中。具体的条件包括引用模块的大小、引用次数、按需加载和初始化加载的请求次数等。代码块的名字根据模块和缓存组秘钥自动生成。如果不设置name参数为true，则需要手动指定代码块的名字。这样可以根据项目的实际需求进行灵活配置。

四、使用缓存组（Cache Groups）

为了更精细地控制代码拆分，我们可以使用缓存组（Cache Groups）。缓存组也有其默认的配置，例如将node_modules中的模块拆分到一个叫做vendors的代码块中，将最少重复引用两次的模块放入default中。通过配置缓存组，我们可以更灵活地管理代码拆分，提高代码的可维护性和性能。具体的配置方式可以参考官方文档或者相关教程。在使用缓存组时，我们可以根据自己的项目需求和业务逻辑来设置不同的缓存规则，以满足项目的实际需求。深入Webpack缓存配置：自定义与优化代码加载

在前端开发中，Webpack的缓存配置是一个重要的环节，它关乎到代码的加载效率和性能优化。最近我对Webpack的更新内容进行了深入研究，下面我将分享关于如何配置和使用Webpack的缓存组（cacheGroups）的知识，希望能对大家的学习有所帮助。

让我们来看看默认的缓存组配置：

```javascript

splitChunks: {

chunks: "async",

minSize: 30000,

minChunks: 1,

maxAsyncRequests: 5,

maxInitialRequests: 3,

name: true,

cacheGroups: {

default: {

minChunks: 2,

priority: -20,

reuseExistingChunk: true

},

vendors: {

test: /[\\/]node_modules[\\/]/,

priority: -10

}

}

}

```

这是一个关于缓存组的详细配置说明。其中，我们可以通过修改或禁用默认的缓存组（通过设置`default: false`），来自定义我们的缓存组。通过拆分初始化加载时被重复引用的模块，我们可以进一步优化代码加载。例如：

```javascript

cacheGroups: {

mons: {

name: "mons",

chunks: "initial",

minChunks: 2

}

}

```

在这个例子中，我们创建了一个新的缓存组`mons`，该组的模块在初始化加载时至少被引用两次才会被拆分。你可以根据你的实际需求创建多个缓存组。每一个缓存组都可以根据特定的规则进行配置，以满足你的项目需求。例如，你可以设置特定的模块测试规则（test），最小引用次数（minChunks），以及优先级（priority）等。这些配置可以帮助你更有效地管理和优化你的代码加载。你还可以设置模块的名称（name），以便在代码中引用。通过调整最大异步请求数（maxAsyncRequests）和最大初始请求数（maxInitialRequests），你可以控制代码加载时的网络请求数量，进一步提高性能。需要注意的是，这里的数值只是示例，具体的配置应该根据你的项目需求进行调整。当使用Webpack更新时，理解其配置的变化是非常重要的，如果遇到问题，欢迎随时向我请教。感谢大家支持狼蚁SEO，希望我们的分享能对大家有所帮助。以上是本文的全部内容。至于后续的内容或更深入的，我们会在后续的文章中继续分享。请持续关注我们的更新。至于代码的渲染部分，可以使用如下语句进行渲染：`cambrian.render('body')`。