webpack——SplitChunksPlugin配置参数(十二)

代码分隔底层使用到了SplitChunksPlugin,所以接下来讲解一下SplitChunksPlugin参数的配置。
上一节执行异步代码的生成目录如下:

文件名为0.bundle.js,希望将文件名改为英文的可识别的名字,可以在异步加载组件当中加一段魔法注释:
//魔法注释: /* webpackChunkName: “lodash” */
src/index.js

function getComponent() {
    return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
        var ele = document.createElement('div')
        ele.innerHTML = _.join(['yang', 'yue'], '-')
        return ele
    })
}
getComponent().then(ele => {
    document.body.appendChild(ele)
})

再次运行npm run dev-build,生成的文件如下:

如果希望打包出来的文件名就叫lodash.bundle.js,没有前缀vendors~,需要改变微博怕吃苦.common.js中的配置:
参考链接: https://www.webpackjs.com/plugins/split-chunks-plugin/
webpack.common.js

//代码分割
    optimization: {
        splitChunks: {
            chunks: 'all',
            //添加的配置项
            cacheGroups: {
                vendors: false,
                default: false
            }
        },
    }

运行npm run dev-build,生成的文件如下:

则成功修改文件名字,
这就说明异步组件在做代码分割时,配置项可以对代码分割产生影响,添加cacheGroups配置项可以去掉文件名前缀vendors~。
就算

splitChunks: {}

运行npm run dev-build,打包的过程仍然正常运行。

这是因为splitChunks具有默认配置内容:

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

这个时候将webpack.common.js中splitChunks的内容更改如下:
webpack.common.js

splitChunks: {
            //对异步代码实现代码分割  //initial: 同步代码 //all: 对同步异步代码都进行代码分割
            chunks: "async", 
            minSize: 30000,  //大于该值做代码分割
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: false,
                default: false
            }
        }

运行npm run dev-build,是可以正常打包,说明chunks: "async"可以实现对异步代码代码分割。

接着将index.js文件中修改为同步代码:

//同步代码
import _ from 'lodash'
var ele = document.createElement('div')
ele.innerHTML = _.join(['yang', 'yue'], '-')
document.body.appendChild(ele)

如果按照源代码中chunks: "async"
运行npm run dev-build,发现对于同步代码引入lodash库都没有进行代码的分割

或者将webpack.common.js中splitChunks修改为 chunks: "all",也同样没有进行代码分割

原因是:
使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置,才能实现同步的逻辑代码分割。
webpack.common.js

splitChunks: {
            //对异步代码实现代码分割  //initial: 同步代码 //all: 对同步异步代码都进行代码分割
            //使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置
            chunks: "all", 
            minSize: 30000,  //大于该值做代码分割
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                },
                default: false
            }
        }

运行npm run dev-build,生成打包文件如下:

其中vendors~app.bundle.js的含义就是引入的库文件符合vendors组的要求,就会在前缀加上vendors组的组名。
希望把所有的库都打包到vendors.js里面,则加上filename

cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                    filename: 'vendors.js'
                },
                default: false
            }

配置参数
1.minSize
接着继续说splitChunks中的配置项minSize:
minSize: 30000当引入的库文件大于该值3就做代码分割,小于就不做。

在src目录下新建一个test.js文件:
src/test.js

export default {
    name: 'yueyue'
}

src/index.js

import test from './test.js'
console.log(test.name)

并将webpaack.common.js中splitChunks配置项中的minSize: 0设置为0
运行npm run dev-build,发现并没有生成打包文件:

但其中test.js文件大小肯定是大于0的,原因是同步代码会走cacheGroups中vendors,发现test.js并不存在于node_modules中,就会走默认配置,而此时default: false,应该修改为:

cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                    filename: 'vendors.js'
                },
                default: {     
                    priority: -20,
                    reuseExistingChunk: true,
                }
            }

完整splitChunks代码:

splitChunks: {
            //对异步代码实现代码分割  //initial: 同步代码 //all: 对同步异步代码都进行代码分割
            //使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置
            chunks: "all", 
            minSize: 0,  //大于该值做代码分割
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {  //同步代码走这里
                    //引入的库文件是否在node_modules中,是就放在vendor组中
                    test: /[\\/]node_modules[\\/]/,  
                    priority: -10,
                    filename: 'vendors.js'
                },
                default: {     
                    priority: -20,
                    reuseExistingChunk: true,
                }
            }
        }

运行npm run dev-build,生成打包文件如下:

2.minChunks
接着继续说splitChunks中的配置项minChunks:当一个模块至少被用了多少次后才对它进行代码分割,如果minChunks: 2,改为2时,运行npm run dev-build,发现就不会进行代码分隔了,因为入口文件里只引入了模块一次

3.maxAsyncRequests 和 maxInitialRequests

maxAsyncRequests: 5,   //同时加载的模块数最多5个,对前5个做代码分割,超过5个不做代码分割
maxInitialRequests: 3, //入口文件引入的文件做代码分隔最多三个