在工程化地使用webpack时,公共代码抽离是不可或缺的,4.x版本之后,commonsChunkPlugin已经被去掉,splitChunksPlugins登上舞台,并且优化了很多配置选项,集体课件官方文档,这里不做过多说明。

在使用splitChunksPlugins之前,首先要知道splitChunksPlugins是webpack主模块中的一个细分模块,无需npm引入。功能上,splitChunksPlugins只能用于如何抽离公用的代码,也就是抽离公用代码的规则,要记住,除了这个功能之外,splitChunksPlugins再无其他功能(明白这点很重要,至少我自己在这点上被坑到过)。

首先先说每个配置项的作用:

*在此说明下, 下文中说到的块即chunks,也就是js文件

1.  minSize 

 分离后的最小块文件大小,单位为字节

2. minChunks

分离前,该块被引入的次数(也就是某个js文件通过import或require引入的次数)

3.maxInitialRequests

一个入口文件可以并行加载的最大文件数量

4.maxAsyncRequests

内层文件(第二层)按需加载时最大的并行加载数量

5.name

用以控制分离后代码块的命名,当存在匹配的缓存组(后面会说到)时,命名使用缓存组中的name值,若不存在则为  [来源]~[入口的key值].js  的格式

6.automaticNameDelimiter

修改上文中的 “~” ,  若改为: “-” 则分离后的js默认命名规则为 [来源]-[入口的key值].js

7.test

用于规定缓存组匹配的文件位置,test: /node_modules/  即为匹配相应文件夹下的模块

8.cacheGroups

名字叫做缓存组,其实就是存放分离代码块的规则的对象,叫做cacheGroup的原因是webpack会将规则放置在cache流中,为对应的块文件匹配对应的流,从而生成分离后的块。

cacheGroup中priority 为分离规则的优先级,优先级越高,则优先匹配。

9.chunks

匹配的块的类型:initial(初始块),async(按需加载的异步块),all(所有块)

splitChunks的常用配置:

optimization: { 
        splitChunks: { 
            cacheGroups:{ 
                // 比如你要单独把jq之类的官方库文件打包到一起,就可以使用这个缓存组,如想具体到库文件(jq)为例,就可把test写到具体目录下 
                vendor: { 
                    test: /node_modules/, 
                    name: "vendor", 
                    priority: 10, 
                    enforce: true 
                }, 
                // 这里定义的是在分离前被引用过两次的文件,将其一同打包到common.js中,最小为30K 
                common: { 
                    name: "common", 
                    minChunks: 2, 
                    minSize: 30000 
                } 
                 
            }, 
            chunks:"all", 
            minSize: 40000 
        } 
    }


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

webpack--配置output知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。