webpack4 SplitChunks插件 代码拆分

1、参考
https://www.webpackjs.com/plugins/split-chunks-plugin/

 

2、核心概念

webpack将根据以下条件自动拆分代码块：

• 会被共享的代码块或者 node_mudules 文件夹中的代码块
• 体积大于30KB的代码块（在gz压缩前）
• 按需加载代码块时的并行请求数量不超过5个
• 加载初始页面时的并行请求数量不超过3个

3、默认配置

splitChunks: {
    chunks: "all",
    minSize: 30000, // 模块的最小体积，大于30000就拆分
    minChunks: 1, // 模块的最小被引用次数
    maxAsyncRequests: 5, // 按需加载的最大并行请求数
    maxInitialRequests: 3, // 一个入口最大并行请求数
    automaticNameDelimiter: '~', // 文件名的连接符
    name: true,
    cacheGroups: { // 缓存组
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

 

说明：

chunks属性用来选择分割哪些代码块，可选值有：'all'（所有代码块），'async'（按需加载的代码块），'initial'（初始化代码块）。

 

4、应用

小程序代码拆包。