ce04bded8a01be8b29567064d37fd62e.png

前言

SplitChunks插件是什么呢，简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。

提到前端优化，提取公共代码是必不可少的手段。在Webpack出现前，提取公共代码是人为去处理，而SplitChunks插件的作用就是通过配置让Webpack去帮你提取公共代码。Webpack创始人的初衷也是希望能有更多时间写更多代码，所以这种纯体力的劳动交给Webpack去完成。

所以SplitChunks插件是前端进阶的一项必备技能，下面就详细介绍SplitChunks插件的用法。

Java进阶：架构设计、并发编程等核心知识、电子书、视频、面试题等免费获取​shimo.im
df34f0544396911f4c12f3091fb371a6.png

二、工欲利其事必先利其器

因为SplitChunks插件会提取模块并打包生成js文件。先学会给打包生成的js文件命名，不然不好确认打包生成的js文件是不是你想要的。Webpack中给打包生成的js文件命名有以下几种方法。

1、output.filename

此选项给打包后的入口js文件命名，下图中的app.js文件就是打包后的入口js文件。

a2d42b92fb32fec56b5532d31b8ab019.png
  • 在单入口的Vue项目中，打包前的入口文件，在vue.config.js中配置module.exports = { configureWebpack:{ entry:'./src/main.js', } } 复制代码
    打包后的入口文件，在vue.config.js中配置module.exports = { configureWebpack:{ output:{ filename: 'js/appCS.js' }, } } 复制代码
    为什么前面要加个js/，因为该js文件是output:path选项指定的目录下生成的，其默认为根目录/。打包结果如下所示

be3a0ec3b716e74d43df59ce59ec3807.png
  • 在多入口的Vue项目中，打包前的入口文件，在vue.config.js中配置module.exports = { configureWebpack:{ entry: { appCS: './src/main.js' }, } } 复制代码
    打包后的入口文件，在vue.config.js中配置module.exports = { configureWebpack:{ output:{ filename: 'js/[name].js' }, } } 复制代码[name]是入口文件模块名称。打包结果如下所示

393d22bd0aa5853bff927d19522bbc71.png

会发现多个app.js，这是因为configureWebpack去采用合并策略来配置Webpack。要去掉app.js要用chainWebpack来配置。配置如下module.exports = { chainWebpack: config =>{ config.entryPoints.delete('app').end().entry('appCS').add('./src/main.js') } } 复制代码
打包结果如下所示

be3a0ec3b716e74d43df59ce59ec3807.png

2、output.chunkFilename

此选项给打包后的非入口js文件命名，那下图红框中所示就是非入口js文件

d05fcc33aefbf71958c62c64bf21079f.png

在vue.config.js中配置

module.exports = {
    configureWebpack:{
        output:{
            chunkFilename: 'CS.[name].js'
        },
    }
}
复制代码

打包结果如下所示

4762fa2127f4abaeacb1113b3e7487bc.png

然而output.chunkFilename并不能改变chunk-0a4e15c9这样名字字段。

3、webpackChunkName

webpackChunkName：块的名称，[request]可解释为实际的解析文件名。可在路由懒加载中使用

function load(component) {
    return () => import(/* webpackChunkName: "[request]" */ `views/${component}`)
}
const routes = [
    {
        {
            path: '/apiApply',
            name: 'apiApply',
            component: load('api_manage/api_apply'),
        }
    }
]
复制代码

打包结果如下所示

a99ba75f37c3f30dbaf58c436441eab4.png

src/views/api_manage/api_apply/index.vue这个组件打包后生成的js文件是api_manage-api_apply.48227bf7.js。

如果不用[request]也可以这么写。

component: () =>import(/* webpackChunkName: "api_manage-api_apply"*/ 'src/views/api_manage/api_apply'),
复制代码

再看一下其它js文件，发现还有chunk-xxx.js类的文件，如下图红框中所示

05200320fb874db354231427cfa654e7.png

这些js文件的命名要在SplitChunks插件中设置了。

二 、SplitChunks插件配置选项

  • chunks选项，决定要提取那些模块。
    • 默认是async：只提取异步加载的模块出来打包到一个文件中。
      • 异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。
    • initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。
      • 同步加载的模块：通过 import xxx或require('xxx')加载的模块。
    • all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。
  • minSize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。
  • maxSize选项：把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
  • minChunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。
  • maxAsyncRequests选项：最大的按需(异步)加载次数，默认为 6。
  • maxInitialRequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。
  • 先说一下优先级 maxInitialRequests / maxAsyncRequests <maxSize<minSize。
  • automaticNameDelimiter选项：打包生成的js文件名的分割符，默认为~。
  • name选项：打包生成js文件的名称。
  • cacheGroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项，其余选项和外面一致，若cacheGroups每项中有，就按配置的，没有就使用外面配置的。
    • test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。
    • priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。
    • reuseExistingChunk选项：true/false。为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的js文件。
    • enforce选项：true/false。为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项

配置选项很多，下面在实际项目中使用SplitChunks，让你更深刻理解这些配置选项。

首先了解一下SplitChunks在Vue Cli3中的默认配置。在Vue Cli3源码中这样配置

2b248a8ffea99245f2fa2a55295ab12d.png

整理后默认配置如下所示：

module.exports = {
    configureWebpack:config =>{
        return {
            optimization: {
                splitChunks: {
                    chunks: 'async',
                    minSize: 30000,
                    maxSize: 0,
                    minChunks: 1,
                    maxAsyncRequests: 6,
                    maxInitialRequests: 4,
                    automaticNameDelimiter: '~',
                    cacheGroups: {
                        vendors: {
                            name: `chunk-vendors`,
                            test: /[/]node_modules[/]/,
                            priority: -10,
                            chunks: 'initial'
                        },
                        common: {
                            name: `chunk-common`,
                            minChunks: 2,
                            priority: -20,
                            chunks: 'initial',
                            reuseExistingChunk: true
                        }
                    }
                }
            }
        }
    }
};
复制代码

先安装个webpack-bundle-analyzer插件，可以可视化分析打包后的文件。

npm install webpack-bundle-analyzer --save-dev
复制代码

在vue.config.js中引入插件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports={
    configureWebpack:config =>{
        return {
            plugins:[
                new BundleAnalyzerPlugin()
            ]
        }
    }
}
复制代码

打包后，会在浏览器自动打开http://127.0.0.1:8888/，内容如下所示

9de4ecab61b5bb62068eea1039a3428f.png

会发现里面有个chunk-vendors.js文件。是cacheGroups中vendors这个方案打包出来的js文件。

可以用name选项来修改chunk-vendors.js文件的名字，，代码如下

vendors: {
    name: `app-chunk-vendors`,
    test: /[/]node_modules[/]/,
    priority: -10,
    chunks: 'initial'
},
复制代码

打包后，会发现chunk-vendors.js文件已经变成了app-chunk-vendors.js文件，里面内容不变。

cead47c9948565a8d56488965e28b8ee.png

三、SplitChunks实战操作之入口文件

先去掉cacheGroups里面的方案，再打包一下。

cacheGroups: {
    vendors: false,
    common: false
}
复制代码

63f2badc88652465db63c49c8834be0f.png

app.a502ce9a.js和chunk-be34ce9a.ceff3b64.js这两个js文件是由项目中main.js这个入口文件打包生成的。

例如app.js文件中有element-ui、moment、jquery、vue、router、store、jsencrypt等内容。这些都是在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import JsEncrypt from 'jsencrypt';
import $ from 'jquery';
import ElementUI from 'element-ui';
Vue.use(ElementUI);
import treeSelect from 'fxft-tree-select';
Vue.use(treeSelect);
import moment from 'moment';
Vue.prototype.moment = moment;
//注册全局变量、全局函数
import base from 'service/base';
Vue.use(base);
//注册打印插件
import print from  'service/print';
Vue.use(print);
const vm = new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
window.vm = vm;
复制代码

打包生成的index.html中有段代码是这么写。

<div>
    <div id=app></div>
    <script src=/js/app.a502ce9a.js></script>
</div>
复制代码

表明app.js是项目一开始就要加载的，会影响首屏的加载时间。那么可以在main.js中去掉一些在首屏中暂时用不到的引入，比如这些都可以暂时去掉。

import JsEncrypt from 'jsencrypt';
import treeSelect from 'fxft-tree-select';
Vue.use(treeSelect);
//注册打印插件
import print from  'service/print';
Vue.use(print);
复制代码

打包后再看分析图，会发现jsencrypt等内容都在app.js中都消失了。

40eafd5d13ac738b01dd0c0fe5aa7606.png

为什么说chunk-be34ce9a.js也是从main.js打包生成的？因为在main.js中有段代码：

//注册全局变量、全局函数
import base from 'service/base';
Vue.use(base);
复制代码

在看service/base.js文件中有

import('./Export2Excel').then(res => {
    res.export_json_to_excel(defaultOpition);
})
复制代码

Export2Excel.js是异步加载，在service/Export2Excel.js中

import { saveAs } from 'file-saver'
import XLSX from 'xlsx'
复制代码

相当，file-saver、xlsx也是异步加载，所以file-saver、xlsx会被提取出来打包生成chunk-be34ce9a.js文件。

在默认配置下，main.js中异步加载或间接异步加载的模块，都会被另外打包生成一个js文件。

如果要把从node_modules中加载的模块全部打包到一个js文件中，要怎么做呢？Vue Cli3中的已经帮我们做了。

cacheGroups: {
    vendors: {
        name: `chunk-vendors`,
        test: /[/]node_modules[/]/,
        priority: -10,
        chunks: 'initial'
    },
}
复制代码

其核心是test选项，匹配项目从node_modules中加载的模块并提取打包生成chunk-vendors.js文件。 打包后再从分析图中搜索node_modules，发现还是由很多文件中含有从node_modules中加载的模块，和预期的不一样。

f029db25a8d145cd05c8f6a73720f181.png

这是chunks选项在作怪，值initial表示如果xxx在项目中异步加载或同步加载多少次，那么xxx这个模块也会被提取多少次，分别打包到不同的文件中。core-js库在项目中每个文件都会加载到，故它会提取多次。

只要把chunks选项的值改成all（不管异步加载还是同步加载的模块都是提取打包到一个文件中），就可以把从node_modules中加载的模块全部打包到一个js文件中。

cdebb6b237e159052d32d1a14c4796c9.png

2d621b14f1753c1798f543454fed4ef8.png

c2681b25b94db7aa4faaf2c8c496357b.png

发现chunk-vendors.js的大小有点大了，有1.91MB，还是项目初始化时需要加载的js文件，大小过大会导致首屏加载时间过长。要优化一下，由两种方法

第一种用externals来优化，看我的另一篇文章Webpack之externals用法详解。

第二种用SplitChunks优化。例如要把element从chunk-vendors.js提取出来，要在cacheGroups中配置：

element: {
    chunks: 'all',
    name: `element-ui`,
    test: /[/]element-ui[/]/,
    priority: 0,
},
复制代码

其中要注意priority选项，要把element单独提取出来，priority的值必须比vendors方案中的priority的值大，不然提取不出来。

打包后可看到element被打包生成新的element-ui.js文件，chunk-vendors.js大小变成1.27MB，比原来的1.91MB有减小。此外可以自己提取xlsx、moment、jquery等第三方依赖。

518f4db15a3a12333cf903630ddd5f5e.png

四、SplitChunks实战操作之非入口文件

在分析图中，除了入口文件，还有很多js文件，这些文件中有一大部分是项目中组件打包生成的。

如果在实现路由懒加载时，用到/*webpackChunkName:"[request]"*/，那么在由组件打包生成的js文件名上，可以得知这个js文件是哪个组件打包生成的。

cdcc0ec2945475fabca7edcc46218016.png

图中的base_info_manage-group_info_set-ability_bind_set.85b419a1.js是项目中views/base_info_manage/group_info_set/bility_bind_set/index.vue这个组件打包生成的。

base_info_manage-group_info_set-ability_bind_set-edit.08f91768.js是项目中views/base_info_manage/group_info_set/bility_bind_set/edit.vue这个组件打包生成的。

另外会发现chunk-5c1416e3.1cbcb0ec.js的内容怎么跟base_info_manage-group_info_set-ability_bind_set-edit.08f91768.js的内容相似，只少了src/api的内容。而且api/common.js、api/ability_bind_set.js、edit.vue、mixins等模块被重复打包了好几次。

可以用SplitChunks提取一下这些模块。避免重复打包，减少打包生成的文件总体大小。

在cacheGroups中配置

api: {
    name: 'api',
    test: /[/]api[/]/,
    priority: 0,
},
复制代码

当提取多个模块打包生成文件时，name选项为必填。

064f5b214ca39c509816752fd70fd5ca.png

打包后再看分析图会发现api/common.js、api/ability_bind_set.js已经被提取到api.05ad5193.js中了

ec754c12ef778600f780591641ac6bdd.png

接着提取mixins模块，在cacheGroups中配置

mixins: {
    name: 'mixins',
    test: /[/]mixins[/]/,
    priority: 0,
},
复制代码

be4b2081f7aa19e8ba9e7bee685342e6.png

打包后再看分析图发现mixins模块已经被提取到mixins.8d1d6f50.js中。

06a8b4609f540a41d048c80a4d55c9d2.png

接着提取edit.vue模块，在cacheGroups中配置

base_info_manage: {
    name: 'base_info_manage',
    test: /[/]base_info_manage[/]/,
    minChunks: 2,
    priority: 0,
},
复制代码

06a8b4609f540a41d048c80a4d55c9d2.png

其中minChunks选项，必须为2,因为从上面分析图来看，edit.vue被引用了2次，而index.vue只被引用了1次。如果为1则index.vue也会被提取出来。如果为2以上的值则edit.vue不会被提取出来。

955b674c209b725637c7cd1d4150bfc6.png

8099d78420b305437460f81f23047055.png

打包后再看分析图发现edit.vue模块已经被提取到base_info_manage.d5c14c01.js中。 如果觉得base_info_manage.d5c14c01.js文件太大，有两种方法可以处理。

6ac2dd906d7690f6efe2d29a6c914f5f.png

第一种是利用maxSize选项，提取模块后打包生成的文件大小不能超过maxSize值，如果超过了，要再提取并打包生成新的文件。

base_info_manage: {
    name: 'base_info_manage',
    test: /[/]base_info_manage[/]/,
    minChunks: 2,
    priority: 0,
    maxSize: 102400
},
复制代码

打包后再看分析图会发现base_info_manage.js已经被分割成五个小js文件了。

8db0c4ae33bd6d0797d71c8c92f3313c.png

第二种是按base_info_manage文件夹下的子文件夹来继续提取，例如base_info_manage文件夹下有个子文件叫group_info_set。在cacheGroups中配置

group_info_set: {
    name: 'group_info_set',
    test: /[/]base_info_manage[/]group_info_set[/]/,
    minChunks: 2,
    priority: 10,
},
复制代码

打包后再看分析图会发现base_info_manage.js中的group_info_set模块集合已经被提取到group_info_set.js文件中。base_info_manage.d5c14c01.js文件也有相应的减小。

0ceb15cf7629607da1a52b336349317d.png

10fbd31da010561598663d12019f8835.png

另外可以把src/api、src/mixins、src/service中的内容合并打包生成一个js文件，替代之前打包生成的mixins.8d1d6f50.js和api.05ad5193.js

common: {
    test: /[/]api[/]|[/]mixins[/]|[/]src[/]service[/]/,
    priority: 0,
    name: 'common',
},
复制代码

b5b345117d826151e9db3875ab7f930c.png

其他的就不多说，可以按照上面所讲在自己的项目用SplitChunks插件来控制Webpack打包生成自己想要的js文件，直到dist/js文件夹中每个js都是你所预想的生成的js文件为止。

五、总结

用SplitChunks插件来控制Webpack打包生成的js文件的内容的精髓就在于，防止模块被重复打包，拆分过大的js文件，合并零散的js文件。最终的目的就是减少请求资源的大小和请求次数。因这两者是互相矛盾的，故要以项目实际的情况去使用SplitChunks插件，需切记中庸之道。

喜欢的小伙伴们点赞、评论、分享、收藏。

谢谢各位大大！

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue