webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006871991
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

前言

與單頁應(yīng)用相比，多頁應(yīng)用存在多個(gè)入口（每個(gè)頁面即一個(gè)入口），每一個(gè)入口（頁面）都意味著一套完整的js代碼（包括業(yè)務(wù)邏輯和加載的第三方庫/框架等）。
在上一篇文章（webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？）中，我介紹了如何配置多頁應(yīng)用的入口(entry)，然而，如果僅僅如此操作，帶來的后果就是，打包生成出來的每一個(gè)入口文件都會(huì)完整包含所有代碼。
你也許會(huì)說："咱們以前寫頁面不也是每個(gè)頁面都會(huì)加載所有的代碼嗎？瀏覽器會(huì)緩存，沒事的啦"。其實(shí)問題在于，以前寫代碼都是單個(gè)單個(gè)js來加載的，一個(gè)頁面加載下來的確所有頁面都能共享到緩存；而到了webpack這場(chǎng)景，由于對(duì)于每一個(gè)頁面來說，所有的js代碼都打包成唯一一個(gè)js文件了，而瀏覽器是無法分辨出該文件內(nèi)的公共代碼并加以緩存的，所以，瀏覽器就沒辦法實(shí)現(xiàn)公共代碼在頁面間的緩存了（當(dāng)前頁面的緩存還是OK的，也就是說刷新不需要重新加載）。

想智能判斷并打包公共代碼？CommonsChunkPlugin能幫到你

CommonsChunkPlugin的效果是：在你的多個(gè)頁面（入口）所引用的代碼中，找出其中滿足條件（被多少個(gè)頁面引用過）的代碼段，判定為公共代碼并打包成一個(gè)獨(dú)立的js文件。至此，你只需要在每個(gè)頁面都加載這個(gè)公共代碼的js文件，就可以既保持代碼的完整性，又不會(huì)重復(fù)下載公共代碼了（多個(gè)頁面間會(huì)共享此文件的緩存）。

再提一下使用Plugin的方法

大部分Plugin的使用方法都有一個(gè)固定的套路：

  1. 利用Plugin的初始方法并傳入Plugin預(yù)設(shè)的參數(shù)進(jìn)行初始化，生成一個(gè)實(shí)例。
  2. 將此實(shí)例插入到webpack配置文件中的plugins參數(shù)（數(shù)組類型）里即可。

CommonsChunkPlugin的初始化常用參數(shù)有哪些？

  • name，給這個(gè)包含公共代碼的chunk命個(gè)名（唯一標(biāo)識(shí)）。
  • filename，如何命名打包后生產(chǎn)的js文件，也是可以用上[name]、[hash]、[chunkhash]這些變量的啦（具體是什么意思，請(qǐng)看我上一篇文章中關(guān)于filename的那一節(jié)）。
  • minChunks，公共代碼的判斷標(biāo)準(zhǔn)：某個(gè)js模塊被多少個(gè)chunk加載了才算是公共代碼。
  • chunks，表示需要在哪些chunk（也可以理解為webpack配置中entry的每一項(xiàng)）里尋找公共代碼進(jìn)行打包。不設(shè)置此參數(shù)則默認(rèn)提取范圍為所有的chunk。

實(shí)例分析

實(shí)例來自于我的腳手架項(xiàng)目webpack-seed，我是這樣初始化一個(gè)CommonsChunkPlugin的實(shí)例：

  var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'commons', // 這公共代碼的chunk名為'commons'
    filename: '[name].bundle.js', // 生成后的文件名，雖說用了[name]，但實(shí)際上就是'commons.bundle.js'了
    minChunks: 4, // 設(shè)定要有4個(gè)chunk（即4個(gè)頁面）加載的js模塊才會(huì)被納入公共代碼。這數(shù)目自己考慮吧，我認(rèn)為3-5比較合適。
  });

最終生成文件的路徑是根據(jù)webpack配置中的ouput.path和上面CommonsChunkPlugin的filename參數(shù)來拼的，因此想控制目錄結(jié)構(gòu)的，直接在filename參數(shù)里動(dòng)手腳即可，例如：filename: 'commons/[name].bundle.js'

總結(jié)

整體來說，這套方案還是相當(dāng)簡(jiǎn)單的，而從效果上說，也算是比較均衡的，比較適合項(xiàng)目初期使用。最近我也得到了打包公共代碼的其它思路，相對(duì)于本文來說算是進(jìn)階版的吧，但是維護(hù)成本相對(duì)應(yīng)也提高了，待我試用后再寫文介紹給大家。

示例代碼

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

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

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006871991
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容