webpack打包之框架代码与业务代码拆分

最新推荐文章于 2025-06-23 16:06:31 发布

原创

最新推荐文章于 2025-06-23 16:06:31 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #optimize.CommonsChunkPlugin #splitChunks #框架代码分离

本文讨论了为何要将框架代码与业务代码拆分，主要原因是框架代码稳定性高，适合缓存，而业务代码迭代频繁。通过webpack配置，如在entry中设置框架代码入口，并针对webpack 4.0.0及以上版本使用splitChunks代替 CommonsChunkPlugin，实现代码分离。分离后，文件结构更清晰，业务代码体积减小，可进一步通过添加hash码优化缓存效果。

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

why框架代码与业务代码要拆分
单独打包类库文件原因：框架代码稳定性比较高，而业务代码更新迭代快，希望浏览器尽可能长的时间对框架代码进行缓存来减少服务器流量，让用户加载速度更快。
方法
在entry中设置框架代码放置的文件

config.entry = {
            app: path.join(__dirname, 'src/index.js'),
            vendor: ['vue'] //这个entry会单独打包
        },
config.optimization = {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        name: "vendor",
                        chunks: "initial",
                        minChunks: 2
                    }
                }
            }
        }

以