webpack4×缓存，cacheGroups，runtimeChunk

最新推荐文章于 2025-04-24 14:15:53 发布

原创最新推荐文章于 2025-04-24 14:15:53 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack4 #webpack缓存

代码优化专栏收录该内容

3 篇文章

订阅专栏

博客介绍了Webpack相关内容，涉及runtimeChunk并给出相关转载介绍链接，还提到splitChunks.cacheGroups可用于抽离第三方库，与Webpack缓存等信息技术相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

runtimeChunk

在这里插入图片描述
转载其他介绍：https://segmentfault.com/a/1190000010317802#articleHeader10

splitChunks.cacheGroups

抽离第三方库

第一种方式：
optimization: {
        runtimeChunk: 'single', 
        splitChunks: {  
            cacheGroups: { 
                vendors: {  
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                },
            }
        },
    },
    会抽离出第三库的代码，生成一个vendors.db5b3f3dc26a5ebe685c.js文件，且每次打包第三库的hash也不会变化，
    这样就会利用浏览器的缓存机制，达到一个缓存优化，除非第三方库的版本变化，会重新生成一个新的文件，这样浏览
    器也会重新请求新的文件。

第二种方式：  
optimization: {
        runtimeChunk: 'single', 
        splitChunks: {  
            cacheGroups: { 
                commons: {
                    name: 'commons',
                    chunks: 'initial',
                    minChunks: 2
                  },
            }
        },
    },  
    这种方式也会抽离出一个commons.fgd453535ftg.js文件，与第一种方式的不同是，它不仅仅抽离第三方库，
    且会把所有js模块间引入的重复代码，也会抽离到commons.fdsfs534534g.js文件中。
    
	总结：可以根据自己的项目情况选择配置，因为第三库不需要每次都去加载，再没有版本变化的时候，
	只需要变化变更的业务逻辑代码，这样来达到一个缓存优化的目的