详解webpack4之splitchunksPlugin代码包分拆

详解Webpack4之splitchunksPlugin：代码包分拆实战，长沙网络推广经验分享

近期完成了一个多页面项目，其中代码包的分拆工作让我深感splitchunksPlugin的实用。今天，我将以长沙网络推广的视角，为大家详细解读这一过程。

一、项目概述

我们的项目包含home和ic两个入口文件，基本框架由react、mobx、antd构成。echarts和d3这两个大型组件库则用于部分页面的绘制工作。除此之外，src目录下存放着我们的自定义组件和代码。

二、异步加载的实现

我们使用了react-loadable进行异步加载。例如：

```javascript

import Loadable from 'react-loadable';

...

const LoadableLogin = Loadable({

loader: () => import('../../components/login'), // 动态导入组件

loading: Loading, // 加载时的组件展示

});

```

通过这种方式，我们可以确保只有在需要时才会加载特定的组件和资源。

三、Webpack配置详解

在webpack的配置中，我们重点关注splitchunksPlugin的配置。该插件允许我们根据需求将代码拆分成不同的块，以提高页面的加载速度和性能。以下是关键配置的解读：

chunks: 指定如何拆分代码块。选项包括all（所有文件）、async（仅异步文件）、initial（仅初始文件）。根据项目的需求，我们可以选择最适合的配置。比如，我们可以选择仅拆分异步加载的文件，以优化用户体验。同时需要注意区分异步和非异步文件的打包策略。在文件中定义的最小打包体积(minSize)会影响文件是否会被拆分。例如，如果我们将minSize设置为一个较小的值（如301字节），那么较小的文件可能会被合并到一个包中，以减少请求数量。还可以通过设置automaticNameDelimiter来定义生成的文件名格式。例如，如果设置为"~"，那么生成的公用文件名会是 vendor~a~b.js的形式。maxInitialRequests和maxAsyncRequests分别用于控制入口点处的最大并行请求数和最大异步请求数量。这两个值的选择也会影响最终的打包策略。需要注意的是，这些选项的优先级关系为：maxInitialRequest / maxAsyncRequests < maxSize < minSize。在设置这些参数时，我们需要根据项目的实际需求进行权衡和调整。通过合理配置splitchunksPlugin的参数，我们可以实现代码包的优化分拆，提高项目的性能和用户体验。希望这篇文章能为大家带来启发和帮助！Webpack配置中的cacheGroups：定制分割包的规则

在Webpack的优化过程中，splitChunks是一种非常重要的策略，它允许我们按照不同的规则将代码分割成多个包，以实现代码的按需加载和重用。在这个过程中，cacheGroups的配置起着关键的作用。本文将深入cacheGroups的配置规则及其在实际应用中的使用和优化。

一、基础配置概念

1. minChunks：定义了一个模块最少被多少个入口点共享时，才会被拆分到一个单独的块中。

2. priority：设置包的打包优先级，对于决定哪些代码块首先被加载非常重要。

二、实践应用

从一个简单的配置开始，我们希望将公共代码打包出来。这里我们主要配置cacheGroups中的vendors组，将引入两次及以上的代码打包在一起，命名为"vendors"。

这不是我们想要的结果。我们进一步分析发现，当我们进入网站时，首先加载的是登陆页面，需要的只是项目的基本框架代码。我们需要对项目基本框架代码进行单独打包。一些异步加载的公共包，如echarts, d3等，也需要单独打包。

为此，我们修改了cacheGroups的配置。我们添加了新的cacheGroups，如'async-mons'和'mons'，并对它们的优先级进行了设置。其中，"vendors"组的优先级最高，包含项目的基本框架代码；"async-mons"组用于打包异步加载的公共包；"mons"组则用于打包其他同步加载的公共包。

三、优化建议及注意事项

1. 设置优先级（priority）：确保优先级的设置符合你的需求。在本例中，我们将react, react-dom等优先打包出来，然后再打包公共部分。如果将vendors的优先级设置低于两个Common的优先级，那么react，react-dom可能会被打包到mon包中。

2. 合理利用async和all：在配置chunks时，要根据实际需求选择"async"或"all"。例如，对于异步加载的公共包，我们选择"async"；而对于同步加载的包或基本框架代码，我们选择"all"。

3. 注意自动生成的包名：当我们配置了async-mon提取出异步加载的公共包后，如果没有为其他同步加载的公共包设置明确的名称，Webpack会默认生成以automaticNameDelimiter连接符连接的名字的包。要确保为每个cacheGroup设置一个明确的名称。

通过合理配置cacheGroups和合理利用Webpack的splitChunks策略，我们可以实现代码的按需加载和重用，提高应用的性能。在配置过程中，要注意设置优先级、合理利用async和all以及注意自动生成的包名等问题。通过不断的优化和调整，我们可以进一步提升Webpack打包的效率和质量。优化文件打包策略：从gzip压缩到Webpack的精细化拆分

一直以来，我们的文件打包都是采用gzip压缩的方式。当我们的async-mon包达到391kb时，部署到生产环境的速度变得缓慢，有时下载速度仅达20kb/s。为此，我们必须对策略进行优化。

目前，async-mon包含了我们编写的src组件和第三方组件。其中，echarts、zrender（由echarts引入）和d3是体积较大的组件。考虑到在我们的项目中，只有部分页面需要使用echarts（以及d3），我们可以考虑将这些大型包提取出来，只在需要的页面进行异步加载。这样，我们可以大大减少async-mon的体积。

针对Webpack的配置，我们可以进行如下的优化：

1. 设立不同的cacheGroups，将基本的框架、d3、echarts和其他异步加载的包进行分离。其中，d3和echarts的优先级高于async-mon，避免被打包到async-mon中。

2. 在htmlWebpackPlugin中配置每个chunk需要的包。例如，对于home页面和ic页面，我们只需要加载基本的框架和其他必要的包。

经过上述的拆分和优化，我们最大的包已经能够保持在100k左右。我们也注意到，虽然拆分可以有效提高加载速度，但拆分的过于细碎也可能适得其反。因为浏览器的http1可能一次性支持6次下载文件，过多的文件下载可能会降低效率。

我们的目标是为了让项目在线上运行更加流畅，给用户带来更好的体验。除了上述的拆分策略，我们还进行了其他的优化工作。希望这篇文章对大家的学习有所帮助，也希望大家能够支持我们的努力。

在我们的项目中，每个团队成员都根据自己的专长进行了不同的拆分和优化尝试，都是为了达到更好的效果。我们也欢迎大家根据自己的项目情况进行不同的拆分尝试，共同更优的解决方案。

我们要感谢大家的支持和关注。我们会继续努力，为大家带来更好的体验和内容。也请大家多多关注我们的官方账号，获取更多信息。

狼蚁SEO团队一直致力于提供高质量的内容和服务，希望大家能够喜欢并分享我们的文章。让我们一起学习、一起进步！

以上即为本文的全部内容。希望对大家有所帮助，也希望大家能够给予我们更多的支持和鼓励。谢谢大家！