webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？

oliverhuang 发布于2019-08-22 10:37 / 2189人阅读

摘要：在上一篇文章多页应用架构系列二配置常用部分有哪些中，我介绍了如何配置多页应用的入口，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。的初始化常用参数有哪些，给这个包含公共代码的命个名唯一标识。

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000006871991
如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang

前言

与单页应用相比，多页应用存在多个入口（每个页面即一个入口），每一个入口（页面）都意味着一套完整的js代码（包括业务逻辑和加载的第三方库/框架等）。
在上一篇文章（webpack多页应用架构系列（二）：webpack配置常用部分有哪些？）中，我介绍了如何配置多页应用的入口(entry)，然而，如果仅仅如此操作，带来的后果就是，打包生成出来的每一个入口文件都会完整包含所有代码。
你也许会说："咱们以前写页面不也是每个页面都会加载所有的代码吗？浏览器会缓存，没事的啦"。其实问题在于，以前写代码都是单个单个js来加载的，一个页面加载下来的确所有页面都能共享到缓存；而到了webpack这场景，由于对于每一个页面来说，所有的js代码都打包成唯一一个js文件了，而浏览器是无法分辨出该文件内的公共代码并加以缓存的，所以，浏览器就没办法实现公共代码在页面间的缓存了（当前页面的缓存还是OK的，也就是说刷新不需要重新加载）。

想智能判断并打包公共代码？CommonsChunkPlugin能帮到你

CommonsChunkPlugin的效果是：在你的多个页面（入口）所引用的代码中，找出其中满足条件（被多少个页面引用过）的代码段，判定为公共代码并打包成一个独立的js文件。至此，你只需要在每个页面都加载这个公共代码的js文件，就可以既保持代码的完整性，又不会重复下载公共代码了（多个页面间会共享此文件的缓存）。

再提一下使用Plugin的方法

大部分Plugin的使用方法都有一个固定的套路：

利用Plugin的初始方法并传入Plugin预设的参数进行初始化，生成一个实例。

将此实例插入到webpack配置文件中的plugins参数（数组类型）里即可。

CommonsChunkPlugin的初始化常用参数有哪些？

name，给这个包含公共代码的chunk命个名（唯一标识）。

filename，如何命名打包后生产的js文件，也是可以用上[name]、[hash]、[chunkhash]这些变量的啦（具体是什么意思，请看我上一篇文章中关于filename的那一节）。

minChunks，公共代码的判断标准：某个js模块被多少个chunk加载了才算是公共代码。

chunks，表示需要在哪些chunk（也可以理解为webpack配置中entry的每一项）里寻找公共代码进行打包。不设置此参数则默认提取范围为所有的chunk。

实例分析

实例来自于我的脚手架项目webpack-seed，我是这样初始化一个CommonsChunkPlugin的实例：

  var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: "commons", // 这公共代码的chunk名为"commons"
    filename: "[name].bundle.js", // 生成后的文件名，虽说用了[name]，但实际上就是"commons.bundle.js"了
    minChunks: 4, // 设定要有4个chunk（即4个页面）加载的js模块才会被纳入公共代码。这数目自己考虑吧，我认为3-5比较合适。
  });

最终生成文件的路径是根据webpack配置中的ouput.path和上面CommonsChunkPlugin的filename参数来拼的，因此想控制目录结构的，直接在filename参数里动手脚即可，例如：filename: "commons/[name].bundle.js"

总结

整体来说，这套方案还是相当简单的，而从效果上说，也算是比较均衡的，比较适合项目初期使用。最近我也得到了打包公共代码的其它思路，相对于本文来说算是进阶版的吧，但是维护成本相对应也提高了，待我试用后再写文介绍给大家。

示例代码

诸位看本系列文章，搭配我在Github上的脚手架项目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。

附系列文章目录（同步更新）

webpack多页应用架构系列（一）：一步一步解决架构痛点：https://segmentfault.com/a/1190000006843916

webpack多页应用架构系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？：https://segmentfault.com/a/1190000006871991

webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多页应用架构系列（五）：听说webpack连less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？:https://segmentfault.com/a/1190000006907701

webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多页应用架构系列（八）：教练我要写ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多页应用架构系列（九）：总有刁民想害朕！ESLint为你阻击垃圾代码:https://segmentfault.com/a/1190000007030775

webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多页应用架构系列（十一）：预打包Dll，实现webpack音速编译:https://segmentfault.com/a/1190000007104372

webpack多页应用架构系列（十二）：利用webpack生成HTML普通网页&页面模板:https://segmentfault.com/a/1190000007126268

webpack多页应用架构系列（十三）：构建一个简单的模板布局系统:https://segmentfault.com/a/1190000007159115

webpack多页应用架构系列（十四）：No复制粘贴！多项目共用基础设施

webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。
原文地址：https://segmentfault.com/a/1190000006871991
如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault.com/blog/array_huang

GPU云服务器云服务器 Webpack打包分块多页应用构建多页应用系列三

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90954.html

webpack多页应用架构系列（一）：一步一步解决架构痛点

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里这系列文章讲什么本系列文章主要介绍如何用这一当前流行的构建工具来设计一个多页应用的架构。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006843916如果您对本系列文章...

Lowky 2019-08-20 10:50 评论0 收藏0
webpack多页应用架构系列（十三）：构建一个简单的模板布局系统

摘要：原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里前言上文多页应用架构系列十二利用生成普通网页页面模板我们基本上已经搞清楚如何利用来生成普通网页页面模板，本文将以我的脚手架项目介绍如何在这基础上搭建一套简单的模板布局系统。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 评论0 收藏0
webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

摘要：回到纯静态页面开发阶段，让页面不需要后端渲染也能跑起来。改造开始本文着重介绍如何将静态页面改造成后端渲染需要的模板。总结在后端渲染的项目里使用多页应用架构是绝对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000820338...

dinfer 2019-07-01 12:21 评论0 收藏0
webpack多页应用架构系列（十五）：论前端如何在后端渲染开发模式下夹缝生存

摘要：回到纯静态页面开发阶段，让页面不需要后端渲染也能跑起来。改造开始本文着重介绍如何将静态页面改造成后端渲染需要的模板。总结在后端渲染的项目里使用多页应用架构是绝对可行的，可不要给老顽固们吓唬得又回到传统前端架构了。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/119000000820338...

dingda 2019-08-20 13:57 评论0 收藏0
webpack多页应用架构系列（五）：听说webpack连less/css也能打包？

摘要：用到什么了在多页应用架构系列二配置常用部分有哪些里我就说过，的核心只能打包文件，而以外的资源都是靠进行转换或做出相应的处理的。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006897458如果您对本系列文章感兴趣，欢迎关注订阅这里：https://segmentfault...

Me_Kun 2019-08-22 10:39 评论0 收藏0