-
Entry Points:你可以通过配置多个入口来实现,Webpack 会根据依赖关系自动拆分成多个 chunk。这是一个相对简单的方式,但是可能会导致一些重复代码。
-
SplitChunksPlugin:这是一个更加强大的拆包工具,它会分析模块间的依赖关系,将多个模块公共的部分提取到单独的 chunk 中。
SplitChunksPlugin 的配置选项用于优化代码拆分,允许更细粒度的控制代码拆分的行为。以下是一些主要的配置选项:
(1) cacheGroups: 这是 SplitChunksPlugin 最重要的配置选项之一,可以用来定义如何将模块分配到 cache group 中(缓存组)。你可以为每个 cache group 指定一个特定的测试函数、优先级、重用已有的 chunk 等等。
(2) chunks: 用于控制本插件影响哪些 chunk,可选值为 "initial"(只影响初始 chunk),"async"(只影响异步 chunk),"all"(同时影响上述两者)。
(3)minSize: 用于控制拆分出的新 chunk 的最小大小,单位为字节。默认值为 30000。
(4) minChunks: 用于控制一个模块被多少个 chunk 共享才会被拆分出来,默认值为 1。
(5) maxAsyncRequests: 控制同时加载的异步请求数量的最大值,默认值为 6。
(6) maxInitialRequests: 控制初始页面加载时的最大请求数量,默认值为 4。
(7) automaticNameDelimiter: 用于生成 chunk 名称时的分隔符,默认值为 '~'。
(8) name: 可以是一个返回 chunk 名称的函数,或者是一个固定的 chunk 名称。如果不提供,则会根据 chunk 的包和选项自动生成一个。
每个选项都可以在你的 webpack 配置文件的 optimization.splitChunks 属性下设置。这样你就可以根据你自己的需求微调代码拆分的行为,以优化你的代码包的大小和加载性能。
要配置 SplitChunksPlugin,你需要在你的 webpack 配置中添加 optimization.splitChunks 配置。下面是一个简单的示例:
javascript
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
在这个配置文件中,splitChunks.chunks 选项被设置为 'all', 表示所有的 chunks,包括同步和异步导入的都会被分包。
要通过SplitChunksPlugin将从node_modules目录导入的模块合并到一个名为'Vendors'的chunk中,你可以通过修改webpack的配置文件中的分包策略来实现。以下是一个例子:
javascript
module.exports = {
//...
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};
在这个配置中,我们创建了一个名为'vendor'的缓存组,它会匹配所有从node_modules目录导入的模块(由test: /[\\/]node_modules[\\/]/
这行定义)。然后,为这些模块创建一个名为'vendors'的新chunk(由name: 'vendors'
这行定义)。
此外,chunks: 'all'
告诉webpack,无论模块是同步加载还是异步加载,都应该选择并放入'vendors'这个chunk中。分包策略可以在这里自行定义,chunks
可以设置为all
, async
, initial
其中的一个,分别对应全部模块,异步模块,初始加载模块。
这样,在打包的时候,Webpack就会将所有从node_modules目录导入的模块打包到一个单独的'vendors'chunk中。
3.如果你想要对一个或多个特定的包(例如前端依赖的 abc 几个体积较大的包)进行更进一步的控制,你可以使用 cacheGroups 选项来创建一个特定的规则:
javascript
module.exports = {
//...
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/](a|b|c)[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};
在这个配置中,所有从 node_modules 目录下的 a, b, c 三个包导入的模块会被合并到一个单独的 vendors chunk 中。
以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!