成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

oliverhuang / 2243人閱讀

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

本文首發(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è)固定的套路：

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

將此實(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)。

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

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：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)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(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)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

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

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

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

本文首發(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)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90954.html

相關(guān)文章

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

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

    Lowky 評(píng)論0 收藏0

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

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

    yedf 評(píng)論0 收藏0

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

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

    dinfer 評(píng)論0 收藏0

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

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

    dingda 評(píng)論0 收藏0

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

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

    Me_Kun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<