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

創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元江城做網(wǎng)站,已為上家服務,為江城各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

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

1、“污染”情況的示例

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

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

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

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

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

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

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

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

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

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

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");

}),

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

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

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

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

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

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

(function(module, exports, __webpack_require__) {

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

})

關于“webpack2緩存優(yōu)化的方法”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“webpack2緩存優(yōu)化的方法”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。