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

資訊專欄INFORMATION COLUMN

webpack學(xué)習(xí)（四）— code splitting

lsxiao / 2726人閱讀

摘要：支持定義分割點(diǎn)，通過進(jìn)行按需加載。若按照中做，則會(huì)造成通用模塊重復(fù)打包。下文將詳細(xì)說明。同樣是利用和來處理的。如下在中添加入口其中模塊為通用功能模塊在中對(duì)應(yīng)和這樣則會(huì)打包出和兩個(gè)文件。為通用功能模塊。希望有更好方案的同學(xué)能夠不吝賜教。

什么是code splitting

首先說，code splitting指什么。我們打包時(shí)通常會(huì)生成一個(gè)大的bundle.js(或者index,看你如何命名)文件，這樣所有的模塊都會(huì)打包到這個(gè)bundle.js文件中，最終生成的文件往往比較大。code splitting就是指將文件分割為塊(chunk)，webpack使我們可以定義一些分割點(diǎn)(split point)，根據(jù)這些分割點(diǎn)對(duì)文件進(jìn)行分塊，并實(shí)現(xiàn)按需加載。

code splitting的意義

第三方類庫多帶帶打包。由于第三方類庫的內(nèi)容基本不會(huì)改變，可以將其與業(yè)務(wù)代碼分離出來，這樣就可以將類庫代碼緩存在客戶端，減少請(qǐng)求。

按需加載。webpack支持定義分割點(diǎn)，通過require.ensure進(jìn)行按需加載。

通用模塊多帶帶打包。我們代碼中可能會(huì)有一些通用模塊，比如彈窗、分頁、通用的方法等等。其他業(yè)務(wù)代碼模塊常常會(huì)有引用這些通用模塊。若按照2中做，則會(huì)造成通用模塊重復(fù)打包。這時(shí)可以將通用模塊多帶帶打包出來。

下文將詳細(xì)說明。

如何進(jìn)行code spliting 第三方類庫

我們項(xiàng)目中常常會(huì)用到一些第三方的類庫，比如jquery,bootstrap等?？梢耘渲枚嗳肟趤韺⒌谌筋悗於鄮Т虬?，如下：

//在entry中添加入口
entry: {
    index: "./index",
    vendor: ["jquery", "bootstrap"]
},

//在plugins中配置
plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
]

說明
CommonsChunkPlugin提供兩個(gè)參數(shù)，第一個(gè)參數(shù)為對(duì)應(yīng)的chunk名（chunk指文件塊，對(duì)應(yīng)entry中的屬性名），第二個(gè)參數(shù)為生成的文件名。
這個(gè)插件做了兩件事：

將vendor配置的模塊（jquery,bootstrap）打包到vendor.bundle.js中。

將index中存在的jquery, bootstrap模塊從文件中移除。這樣index中則只留下純凈的業(yè)務(wù)代碼。

按需加載

以基于backbone的單頁面應(yīng)用為例，可以在router中進(jìn)行配置實(shí)現(xiàn)按需加載，如下：

router.js

var Router = Backbone.Router.extend({
    routes: {
        "a": "a",
        "b": "b"
    },
    
    a: function() {
        require.ensure(["./a"], (require) => {
            let a = require("./a");
            //do something
        })
    },
    
    b: function() {
        require.ensure(["./b"], (require) => {
            let b = require("./b");
            //do something
        })
    }
})

說明
如上方式將打出兩個(gè)文件，a.js和b.js（當(dāng)然名字會(huì)有所不同），且為按需加載。只有在訪問a時(shí)，a.js才會(huì)被加載，b同理。但是這種做法存在兩個(gè)問題：

若路由分配不合理，會(huì)打包出很多很小的文件，每個(gè)文件或許只有幾k，卻多了很多網(wǎng)絡(luò)請(qǐng)求，得不償失。

會(huì)造成通用模塊的重復(fù)打包，比如a模塊和b模塊都引用了c模塊，

a
import "c" from "./c"

b
import "c" from "./c"

這樣我們會(huì)發(fā)現(xiàn)打包出的a.js和b.js中都包含c模塊的代碼，造成了代碼冗余。

對(duì)于問題1，可以通過webpack提供的插件來解決：

//在plugins中添加該插件：
plugins: [
    new webpack.optimize.AggressiveMergingPlugin()
]

對(duì)于問題2:
可以按照下文中所說方式解決。

通用模塊打包 
這個(gè)問題我再網(wǎng)上查閱了一些資料，沒有發(fā)現(xiàn)特別好的方案，以下所述為自己的一些嘗試，但是也并非最優(yōu)解，希望有更好解決方案的同學(xué)能夠指出。

同樣是利用entry和commonsChunkPlugin來處理的。如下：

//在entry中添加入口
entry: {
    index: "./index",
    common: ["./c", "./d"],  //其中c,d模塊為通用功能模塊
    vendor: ["jquery", "bootstrap"]
},

//在plugin中
plugins: [
    new webpack.optimize.CommonsChunkPlugin(["common", "vendor"], "[name].js")  //[name]對(duì)應(yīng)"common"和"vendor"
]

這樣則會(huì)打包出common.js和vendor.js兩個(gè)文件。common為通用功能模塊。

但是這種方式在項(xiàng)目依賴復(fù)雜情況下的效果還是不太理想，無法做到某段代碼只加載一次。
希望有更好方案的同學(xué)能夠不吝賜教。

（本文完）

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

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

相關(guān)文章

  • webpack2.x 代碼分離文檔 翻譯

    摘要：代碼分離代碼分離是最受矚目的功能。下面有兩種代碼分離的技術(shù)。使用實(shí)現(xiàn)代碼分離是使用的方式實(shí)現(xiàn)靜待資源異步調(diào)用。通過添加，我們可以在代碼中打一個(gè)分離點(diǎn)，可以以此建立一個(gè)獨(dú)立的包，包含這個(gè)點(diǎn)的所有代碼。 代碼分離(Code Splitting) 代碼分離是webpack最受矚目的功能。它允許你把你的代碼分成不同的部分分開打包，然后實(shí)現(xiàn)在需要的時(shí)候再進(jìn)行加載（按需加載提高速度）————例如用...

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

  • webpack Code Splitting淺析

    摘要：不知大家是不是跟大雄一樣之前從未看過編譯產(chǎn)出的代碼。前文大雄給了一個(gè)粗陋的動(dòng)態(tài)加載的方法說白了就是動(dòng)態(tài)創(chuàng)建標(biāo)簽。大雄看完至少大概知道了原來編出來的代碼是那樣執(zhí)行的原來可以那么靈活的使用。 Code Splitting是webpack的一個(gè)重要特性，他允許你將代碼打包生成多個(gè)bundle。對(duì)多頁應(yīng)用來說，它是必須的，因?yàn)楸仨氁渲枚鄠€(gè)入口生成多個(gè)bundle；對(duì)于單頁應(yīng)用來說，如果只打包...

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

  • 2017-06-28 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選我是如何實(shí)現(xiàn)的在線升級(jí)熱更新功能的張?chǎng)涡聆慰臻g鑫生活翻譯表單的運(yùn)用第期晉升評(píng)審的套路異步編程的四種方式黃博客精選組件設(shè)計(jì)和分解思考掘金中文譯使登錄頁面變得正確掘金前端從強(qiáng)制開啟壓縮探究插件運(yùn)行機(jī)制掘金個(gè)常用的簡 2017-06-28 前端日?qǐng)?bào) 精選 我是如何實(shí)現(xiàn)electron的在線升級(jí)熱更新功能的？ ? 張?chǎng)涡?鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...

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

  • Webpack 的 Bundle Split 和 Code Split 區(qū)別和應(yīng)用

    摘要：當(dāng)然，上面的定時(shí)器完全可以換成其他諸如按鈕點(diǎn)擊之類的事件來觸發(fā)。 Webpack Bundle Split 和 Code Split 話說之前也是對(duì) chunk 這個(gè)概念有些模糊，并且很多時(shí)候網(wǎng)上的文章大部分在將代碼分離動(dòng)態(tài)加載之類的。寫這篇文章的目的也是想讓其他那些跟我一樣曾經(jīng)對(duì)這個(gè)概念不是很清楚的童鞋有個(gè)清晰的認(rèn)識(shí)。廢話不多說，擼起袖子直接干！ Lets Dive in！ Webp...

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

  • 翻譯webpack3.5.5 - code splitting - 上半部分

    摘要：澄清一個(gè)共同的誤解代碼分離不僅僅是抽出公共代碼把它們放進(jìn)一個(gè)共享的塊中。讓我們來使用來移除這個(gè)重復(fù)的部分。插件將會(huì)注意到我們已經(jīng)將分割成一個(gè)單獨(dú)的塊。并且從我們的主中刪除了這部分。 對(duì)于大型web app來說，如果把所有的文件都打包到一個(gè)文件中是非常低效的，特別是當(dāng)一些代碼塊只在某些特定的條件下被調(diào)用。webpack可以讓你的代碼庫分割成不同的塊(chucks),僅僅在需要的時(shí)候再加載...

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

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

0條評(píng)論

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