简谈 webpack4之 splitChunks 分包打包

前言：

---

最近我们项目（自主研发一个薪酬管理系统payroll）功能上基本上已经能满足大部分客户的需求，也有客户在使用了，但是因为前端就只有我还有一个应届生，开发任务比较繁重，就一直处理开发跟处理bug上，页面的性能呢平时也有关注并且也有做一些优化，但是呢，我们都知道，当我们系统功能越来越多，使用的第三方插件越来越多的时候，打包速度是会解决，但是打包后，服务器访问是个硬伤，因为webpack4之前，如果你不做任何分包打包处理，自己写的代码呀，第三方的代码呀，基础库vue,vue-router呀都默认集中打包到main.js或者ventor.js，导致这个main.js入口文件很大，页面首次加载那是真的伤不起.....

“伤不起呀伤不起，我搞来搞去搞到放弃~~~”  吼吼！！

废话少说，进入我们的主题，首先，刚开始的时候，我也仿造其他大神们的优化方案，进行路由懒加载呀（这个确实有用，能发开很多自己写的代码，形成很多一个个的js,css啥的），通过CDN外链的方式来做呀，使用webpack3.X的那个 CommonsChunkPlugin, DLLPlugin。确实不可否认，在webpack4出来之前这个是终极的办法了。

不过呢！！！上面的CDN引用好是好，但是适应性不强，不够安全，万一客户只使用在内网环境，那就GG咯，所以，我直接pass掉了,后面两种吧，我觉得有点繁琐，想我这种小白简直是没有多大的时间去看很多的资料了，通过一番百度之后，我发现webpack4 splitChunks才是我想要遇见的那个银~

先上打包后的效果图：

---

图中选中两个文件是我们项目中用到的echarts跟jspdf两个插件，大家可以看到现在他们是单独打成了两个js，如果不适用分包的话，就像前面我说的那样，会默认合并到main.js或者ventor.js，导致入口主要文件很大超过2M，首次加载白屏时间长，不忍心吐槽。

那如何进行分包打包呢？（前提是你已经升级webpack到4.x）如下：

splitChunks: { // 代码分包打包默认规则，后续可以慢慢在这了配置相应的规则

      chunks: 'all',

      cacheGroups: {

          libs: {

            name: 'chunk-libs',

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

            priority: 10,

            chunks: 'initial' // 只打包初始时依赖的第三方

          },

          echartsLib: {

            name: "echarts-lib", // 单独将 echarts 拆包

            test: (module) => {

              return /(echarts|zrender)/.test(module.context);

            },

            chunks: 'all',

            priority: 20,

          }

splitChunks属性介绍

chunks:

all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包

async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。

initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被打包两次（注意和all区别），用于分离页面首次需要加载的包。

minSize: 文件最小打包体积，单位byte，默认30000

比如说某个项目下有三个入口文件，a.js和b.js和c.js都是100byte，当我们将minSize设置为301,那么webpack就会将他们打包成一个包，不会将他们拆分成为多个包。

automaticNameDelimiter：~  连接符

假设我们生成了一个公用文件名字叫vendor，a.js,和b.js都依赖他，并且我们设置的连接符是"~"那么，最终生成的就是 vendor~a~b.js

maxInitialRequests 入口点处的最大并行请求数，默认为3，如果我们设置为1，那么每个入口文件就只会打包成为一个文件

maxAsyncRequests 最大异步请求数量，默认5，如果我们设置为1，那么每个入口文件就只会打包成为一个文件

优先级关系 maxInitialRequest / maxAsyncRequests

cacheGroups 定制分割包的规则test可以配置正则和写入function作为打包规则。其他属性均可继承splitChunks，这里必须说一下priority，设置包的打包优先级，非常重要！（后面结合实践）

minChunks 最少引入的次数

我的主要写法：

详细可以查看大佬的详解：

https://blog.csdn.net/weixin_33768481/article/details/87942524?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

其实，我自己也是一知半解的状态，如果有需要的话可以留言，希望能帮到你，刚开始写，也希望大佬们多多给我一点指导，谢谢！