標籤:資源 特性 匯入 情況 模組 傳統 非同步載入 import tar
淺談webpack打包原理模組化機制
webpack並不強制你使用某種模組化方案,而是通過相容所有模組化方案讓你無痛接入項目。有了webpack,你可以隨意選擇你喜歡的模組化方案,至於怎麼處理模組之間的依賴關係及如何按需打包,webpack會幫你處理好的。
關於模組化的一些內容,可以看看我之前的文章:js的模組化進程
核心思想:
- 一切皆模組:
正如js檔案可以是一個“模組(module)”一樣,其他的(如css、image或html)檔案也可視作模 塊。因此,你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。這意味著我們可以將事物(業務)分割成更小的易於管理的片段,從而達到重複利用等的目的。
- 按需載入:
傳統的模組打包工具(module bundlers)最終將所有的模組編譯產生一個龐大的bundle.js檔案。但是在真實的app裡邊,“bundle.js”檔案可能有10M到15M之大可能會導致應用一直處於載入中狀態。因此Webpack使用許多特性來分割代碼然後產生多個“bundle”檔案,而且非同步載入部分代碼以實現按需載入。
檔案管理
- 每個檔案都是一個資源,可以用require/import匯入js
- 每個入口檔案會把自己所依賴(即require)的資源全部打包在一起,一個資源多次引用的話,只會打包一份
- 對於多個入口的情況,其實就是分別獨立的執行單個入口情況,每個入口檔案不相干(可用CommonsChunkPlugin最佳化)
打包原理
把所有依賴打包成一個bundle.js檔案,通過代碼分割成單元片段並按需載入。
,entry.js是入口檔案,調用了util1.js和util2.js,而util1.js又調用了util2.js。
打包後的bundle.js例子
/******/ ([/* 0 */ //模組id/***/ function(module, exports, __webpack_require__) { __webpack_require__(1); //require資源檔id __webpack_require__(2);/***/ },/* 1 *//***/ function(module, exports, __webpack_require__) { //util1.js檔案 __webpack_require__(2); var util1=1; exports.util1=util1;/***/ },/* 2 *//***/ function(module, exports) { //util2.js檔案 var util2=1; exports.util2=util2;/***/ }....../******/ ]);
- bundle.js是以模組 id 為記號,通過函數把各個檔案依賴封裝達到分割效果,如上代碼 id 為 0 表示 entry 模組需要的依賴, 1 表示 util1模組需要的依賴
- require資源檔 id 表示該檔案需要載入的各個模組,如上代碼
_webpack_require__(1)
表示 util1.js 模組,__webpack_require__(2)
表示 util2.js 模組
exports.util1=util1
模組化的體現,輸出該模組
淺談webpack打包原理