webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？

oliverhuang 發布于2019-08-22 10:37 / 2191人閱讀

摘要：在上一篇文章多頁應用架構系列二配置常用部分有哪些中，我介紹了如何配置多頁應用的入口，然而，如果僅僅如此操作，帶來的后果就是，打包生成出來的每一個入口文件都會完整包含所有代碼。的初始化常用參數有哪些，給這個包含公共代碼的命個名唯一標識。

本文首發于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打包分塊多頁應用構建多頁應用系列三

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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