webpack2緩存優化的方法

這篇文章主要介紹了webpack2緩存優化的方法的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇webpack2緩存優化的方法文章都會有所收獲，下面我們一起來看看吧。

隨著Vue,react等MVVM的應用，ES6等新語言特性被引入瀏覽器端開發中，能高效組織組件化代碼，使用ES6 import引用等特性的webpack被許多業務項目使用。

1、“污染”情況的示例

形如上圖的目錄結構，項目有3個獨立的入口文件放在pages目錄下，共同依賴一個vue.min.js,分別不同文件依賴alib.js,blib.js,一個vue組件list.vue; 我們使用下面的配置來生成一個每個js文件一一對應的編譯后文件。

LsLoader目錄下運行 gulp webpack,分析依賴，webpack 開始打包，生成結果如下

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

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

現在我們需要添加個依賴，該動成為->

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

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

修改完畢，gulp webpack ,webpack打包。按道理只有list2.js會發生改變，生成新md5被用戶下載到客戶端。實際結果呢？

怎么改了一個文件其他也變了，我根本沒動啊。我修改了個文件其他頁面的緩存也跪了，不科學啊。

這種現象，我稱為打包意外污染。

2、污染原理

觀察我們前后打包的源碼進行比對，除了page_list2文件是確實修改外，alibjs等文件沒改源碼的結果文件后變化點在這里

第一次編譯：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");

}),

數字都＋1了，我們添加了個模塊引用所有編譯結果的數字序號都＋1，這數字是什么？

這些就是webpack運行在瀏覽器時候配合webpackJSONP函數使用的moduleID和chunckID,

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

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

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

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

(function(module, exports, __webpack_require__) {

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

})

關于“webpack2緩存優化的方法”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“webpack2緩存優化的方法”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。