資訊專欄INFORMATION COLUMN
摘要：支持定義分割點，通過進(jìn)行按需加載。若按照中做，則會造成通用模塊重復(fù)打包。下文將詳細(xì)說明。同樣是利用和來處理的。如下在中添加入口其中模塊為通用功能模塊在中對應(yīng)和這樣則會打包出和兩個文件。為通用功能模塊。希望有更好方案的同學(xué)能夠不吝賜教。
什么是code splitting
首先說，code splitting指什么。我們打包時通常會生成一個大的bundle.js(或者index,看你如何命名)文件，這樣所有的模塊都會打包到這個bundle.js文件中，最終生成的文件往往比較大。code splitting就是指將文件分割為塊(chunk)，webpack使我們可以定義一些分割點(split point)，根據(jù)這些分割點對文件進(jìn)行分塊，并實現(xiàn)按需加載。
code splitting的意義第三方類庫多帶帶打包。由于第三方類庫的內(nèi)容基本不會改變，可以將其與業(yè)務(wù)代碼分離出來，這樣就可以將類庫代碼緩存在客戶端，減少請求。
按需加載。webpack支持定義分割點，通過require.ensure進(jìn)行按需加載。
通用模塊多帶帶打包。我們代碼中可能會有一些通用模塊，比如彈窗、分頁、通用的方法等等。其他業(yè)務(wù)代碼模塊常常會有引用這些通用模塊。若按照2中做，則會造成通用模塊重復(fù)打包。這時可以將通用模塊多帶帶打包出來。
下文將詳細(xì)說明。
如何進(jìn)行code spliting 第三方類庫我們項目中常常會用到一些第三方的類庫，比如jquery,bootstrap等?？梢耘渲枚嗳肟趤韺⒌谌筋悗於鄮Т虬?，如下：
//在entry中添加入口
entry: {
index: "./index",
vendor: ["jquery", "bootstrap"]
},
//在plugins中配置
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
]
說明
CommonsChunkPlugin提供兩個參數(shù)，第一個參數(shù)為對應(yīng)的chunk名（chunk指文件塊，對應(yīng)entry中的屬性名），第二個參數(shù)為生成的文件名。
這個插件做了兩件事：
將vendor配置的模塊（jquery,bootstrap）打包到vendor.bundle.js中。
將index中存在的jquery, bootstrap模塊從文件中移除。這樣index中則只留下純凈的業(yè)務(wù)代碼。
按需加載以基于backbone的單頁面應(yīng)用為例，可以在router中進(jìn)行配置實現(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
})
}
})
說明
如上方式將打出兩個文件，a.js和b.js（當(dāng)然名字會有所不同），且為按需加載。只有在訪問a時，a.js才會被加載，b同理。但是這種做法存在兩個問題：
若路由分配不合理，會打包出很多很小的文件，每個文件或許只有幾k，卻多了很多網(wǎng)絡(luò)請求，得不償失。
會造成通用模塊的重復(fù)打包，比如a模塊和b模塊都引用了c模塊，
a import "c" from "./c" b import "c" from "./c"
這樣我們會發(fā)現(xiàn)打包出的a.js和b.js中都包含c模塊的代碼，造成了代碼冗余。
對于問題1，可以通過webpack提供的插件來解決：
//在plugins中添加該插件：
plugins: [
new webpack.optimize.AggressiveMergingPlugin()
]
對于問題2:
可以按照下文中所說方式解決。
這個問題我再網(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]對應(yīng)"common"和"vendor"
]
這樣則會打包出common.js和vendor.js兩個文件。common為通用功能模塊。
但是這種方式在項目依賴復(fù)雜情況下的效果還是不太理想，無法做到某段代碼只加載一次。
希望有更好方案的同學(xué)能夠不吝賜教。
（本文完）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88023.html
摘要：代碼分離代碼分離是最受矚目的功能。下面有兩種代碼分離的技術(shù)。使用實現(xiàn)代碼分離是使用的方式實現(xiàn)靜待資源異步調(diào)用。通過添加，我們可以在代碼中打一個分離點，可以以此建立一個獨立的包，包含這個點的所有代碼。 代碼分離(Code Splitting) 代碼分離是webpack最受矚目的功能。它允許你把你的代碼分成不同的部分分開打包，然后實現(xiàn)在需要的時候再進(jìn)行加載（按需加載提高速度）————例如用...
摘要：不知大家是不是跟大雄一樣之前從未看過編譯產(chǎn)出的代碼。前文大雄給了一個粗陋的動態(tài)加載的方法說白了就是動態(tài)創(chuàng)建標(biāo)簽。大雄看完至少大概知道了原來編出來的代碼是那樣執(zhí)行的原來可以那么靈活的使用。 Code Splitting是webpack的一個重要特性，他允許你將代碼打包生成多個bundle。對多頁應(yīng)用來說，它是必須的，因為必須要配置多個入口生成多個bundle；對于單頁應(yīng)用來說，如果只打包...
摘要：前端日報精選我是如何實現(xiàn)的在線升級熱更新功能的張鑫旭鑫空間鑫生活翻譯表單的運(yùn)用第期晉升評審的套路異步編程的四種方式黃博客精選組件設(shè)計和分解思考掘金中文譯使登錄頁面變得正確掘金前端從強(qiáng)制開啟壓縮探究插件運(yùn)行機(jī)制掘金個常用的簡 2017-06-28 前端日報 精選 我是如何實現(xiàn)electron的在線升級熱更新功能的？ ? 張鑫旭-鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...
摘要：當(dāng)然，上面的定時器完全可以換成其他諸如按鈕點擊之類的事件來觸發(fā)。 Webpack Bundle Split 和 Code Split 話說之前也是對 chunk 這個概念有些模糊，并且很多時候網(wǎng)上的文章大部分在將代碼分離動態(tài)加載之類的。寫這篇文章的目的也是想讓其他那些跟我一樣曾經(jīng)對這個概念不是很清楚的童鞋有個清晰的認(rèn)識。廢話不多說，擼起袖子直接干！ Lets Dive in！ Webp...
摘要：澄清一個共同的誤解代碼分離不僅僅是抽出公共代碼把它們放進(jìn)一個共享的塊中。讓我們來使用來移除這個重復(fù)的部分。插件將會注意到我們已經(jīng)將分割成一個單獨的塊。并且從我們的主中刪除了這部分。 對于大型web app來說，如果把所有的文件都打包到一個文件中是非常低效的，特別是當(dāng)一些代碼塊只在某些特定的條件下被調(diào)用。webpack可以讓你的代碼庫分割成不同的塊(chucks),僅僅在需要的時候再加載...
閱讀 2906·2023-04-26 01:01
閱讀 3682·2021-11-23 09:51
閱讀 2514·2021-11-22 14:44
閱讀 3542·2021-09-23 11:57
閱讀 2826·2021-09-22 14:58
閱讀 5866·2021-09-10 11:25
閱讀 2100·2019-08-30 13:11
閱讀 1589·2019-08-30 12:59
