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

时间 2019-11-05

标签 webpack 多页应用架构系列怎么打包公共代码才能避免重复栏目系统架构繁體版

原文原文链接

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

前言

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

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

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

再提一下使用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的实例：java

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'webpack

总结

总体来讲，这套方案仍是至关简单的，而从效果上说，也算是比较均衡的，比较适合项目初期使用。最近我也获得了打包公共代码的其它思路，相对于本文来讲算是进阶版的吧，可是维护成本相对应也提升了，待我试用后再写文介绍给你们。git

示例代码

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

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

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