webpack2緩存優(yōu)化的方法

這篇文章主要介紹了webpack2緩存優(yōu)化的方法的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇webpack2緩存優(yōu)化的方法文章都會(huì)有所收獲，下面我們一起來看看吧。

隨著Vue,react等MVVM的應(yīng)用，ES6等新語言特性被引入瀏覽器端開發(fā)中，能高效組織組件化代碼，使用ES6 import引用等特性的webpack被許多業(yè)務(wù)項(xiàng)目使用。

1、“污染”情況的示例

形如上圖的目錄結(jié)構(gòu)，項(xiàng)目有3個(gè)獨(dú)立的入口文件放在pages目錄下，共同依賴一個(gè)vue.min.js,分別不同文件依賴alib.js,blib.js,一個(gè)vue組件list.vue; 我們使用下面的配置來生成一個(gè)每個(gè)js文件一一對(duì)應(yīng)的編譯后文件。

LsLoader目錄下運(yùn)行 gulp webpack,分析依賴，webpack 開始打包，生成結(jié)果如下

看上去很美，那我們現(xiàn)在項(xiàng)目中有了需要改動(dòng)的地方，list2.js中，原來引用代碼是

import a from '../lib/alib.js';

現(xiàn)在我們需要添加個(gè)依賴，該動(dòng)成為->

import a from '../lib/alib.js'

import b from '../lib/blib.js'

修改完畢，gulp webpack ,webpack打包。按道理只有l(wèi)ist2.js會(huì)發(fā)生改變，生成新md5被用戶下載到客戶端。實(shí)際結(jié)果呢？

怎么改了一個(gè)文件其他也變了，我根本沒動(dòng)啊。我修改了個(gè)文件其他頁面的緩存也跪了，不科學(xué)啊。

這種現(xiàn)象，我稱為打包意外污染。

2、污染原理

觀察我們前后打包的源碼進(jìn)行比對(duì)，除了page_list2文件是確實(shí)修改外，alibjs等文件沒改源碼的結(jié)果文件后變化點(diǎn)在這里

第一次編譯：webpackJsonp([3],{

第二次編譯：webpackJsonp([4],{

vuemin.js庫文件修改則是在

第一次編譯： 3:

(function(module, exports, __webpack_require__) {

module.exports = __webpack_require__("YOc6");

}),

第二次編譯： 4:

(function(module, exports, __webpack_require__) {

module.exports = __webpack_require__("YOc6");

}),

數(shù)字都＋1了，我們添加了個(gè)模塊引用所有編譯結(jié)果的數(shù)字序號(hào)都＋1，這數(shù)字是什么？

這些就是webpack運(yùn)行在瀏覽器時(shí)候配合webpackJSONP函數(shù)使用的moduleID和chunckID,

webpack各種loader加載.vue .css .js各種格式組件的背后，是編譯loader文件把瀏覽器不識(shí)別的文件轉(zhuǎn)換成一個(gè)個(gè)可執(zhí)行的代碼塊，代碼塊的標(biāo)示用的是兩個(gè)數(shù)組，moduleIDs數(shù)組和chunkIDs數(shù)組，放在webpack源碼中，運(yùn)行時(shí)根據(jù)遇到的模塊數(shù)量和chunk數(shù)量自增來確定唯一性。chunk可以理解為文件級(jí)別的代碼塊，編譯出來后就是個(gè)單獨(dú)的js文件可以被入口文件引用。module則是chunk內(nèi)部的一個(gè)個(gè)代碼段落.

其中，module又分為normalModule和contextModule兩種，

normalModule很好理解，就是普通的模塊代碼，es6 export翻譯成es5的形式后包裹使用，

contextModule比較特殊，是非入口文件暴露內(nèi)部模塊的一段代碼，形如

(function(module, exports, __webpack_require__) {

module.exports = __webpack_require__("0YW9"); ／／把內(nèi)部的普通模塊暴露出去

})

關(guān)于“webpack2緩存優(yōu)化的方法”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“webpack2緩存優(yōu)化的方法”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。