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