亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

oliverhuang / 2307人閱讀

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

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

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

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

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

再提一下使用Plugin的方法

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

利用Plugin的初始方法并傳入Plugin預(yù)設(shè)的參數(shù)進(jìn)行初始化，生成一個實例。

將此實例插入到webpack配置文件中的plugins參數(shù)（數(shù)組類型）里即可。

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

name，給這個包含公共代碼的chunk命個名（唯一標(biāo)識）。

filename，如何命名打包后生產(chǎn)的js文件，也是可以用上[name]、[hash]、[chunkhash]這些變量的啦（具體是什么意思，請看我上一篇文章中關(guān)于filename的那一節(jié)）。

minChunks，公共代碼的判斷標(biāo)準(zhǔn)：某個js模塊被多少個chunk加載了才算是公共代碼。

chunks，表示需要在哪些chunk（也可以理解為webpack配置中entry的每一項）里尋找公共代碼進(jìn)行打包。不設(shè)置此參數(shù)則默認(rèn)提取范圍為所有的chunk。

實例分析

實例來自于我的腳手架項目webpack-seed，我是這樣初始化一個CommonsChunkPlugin的實例：

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

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

總結(jié)

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

示例代碼

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

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

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點：https://segmentfault.com/a/1190000006843916

webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

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

webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項目共用基礎(chǔ)設(shè)施

webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

webpack多頁應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90954.html

相關(guān)文章

  • webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點

    摘要：本文首發(fā)于的技術(shù)博客實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當(dāng)前流行的構(gòu)建工具來設(shè)計一個多頁應(yīng)用的架構(gòu)。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006843916如果您對本系列文章...

    Lowky 評論0 收藏0

  • webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng)

    摘要：原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里前言上文多頁應(yīng)用架構(gòu)系列十二利用生成普通網(wǎng)頁頁面模板我們基本上已經(jīng)搞清楚如何利用來生成普通網(wǎng)頁頁面模板，本文將以我的腳手架項目介紹如何在這基礎(chǔ)上搭建一套簡單的模板布局系統(tǒng)。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007...

    yedf 評論0 收藏0

  • webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

    摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...

    dinfer 評論0 收藏0

  • webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

    摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...

    dingda 評論0 收藏0

  • webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？

    摘要：用到什么了在多頁應(yīng)用架構(gòu)系列二配置常用部分有哪些里我就說過，的核心只能打包文件，而以外的資源都是靠進(jìn)行轉(zhuǎn)換或做出相應(yīng)的處理的。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006897458如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault...

    Me_Kun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<