Webpack 4 SplitChunks 插件代码分割策略
Webpack 4 引入 SplitChunks 插件用于优化代码分割，替代了之前的 CommonsChunkPlugin。SplitChunks 提供更精细的控制，将应用程序代码拆分为独立模块，实现浏览器缓存不变依赖，减少重复下载，优化页面加载速度。
Webpack 4 支持三种代码分割方法：
- 入口配置： 定义多个入口文件实现代码分割。
- 抽取公共代码： 利用 SplitChunks 插件识别并提取公共模块。
- 动态加载： 运行时按需加载代码，减少初始加载量。
optimization.splitChunks.cacheGroups 用于定义自定义缓存组策略，例如提取第三方库到独立的 vendors 文件：
splitChunks: {
chunks: "all",
cacheGroups: {
vendors: {
test: /[/]node_modules[/]/,
priority: -10,
filename: "vendors.[hash:8].bundle.js",
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
filename: "common.[hash:8].bundle.js",
},
}
}
上述配置中，vendors 缓存组提取 node_modules 中的模块到 vendors 文件，default 缓存组提取被多个入口点共享的模块。
文件大小：82.09KB
评论区