淺談webpack打包原理

來源:互聯網
上載者:User

標籤:資源   特性   匯入   情況   模組   傳統   非同步載入   import   tar   

淺談webpack打包原理模組化機制

webpack並不強制你使用某種模組化方案,而是通過相容所有模組化方案讓你無痛接入項目。有了webpack,你可以隨意選擇你喜歡的模組化方案,至於怎麼處理模組之間的依賴關係及如何按需打包,webpack會幫你處理好的。

關於模組化的一些內容,可以看看我之前的文章:js的模組化進程

核心思想:
  1. 一切皆模組: 
    正如js檔案可以是一個“模組(module)”一樣,其他的(如css、image或html)檔案也可視作模 塊。因此,你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。這意味著我們可以將事物(業務)分割成更小的易於管理的片段,從而達到重複利用等的目的。
  2. 按需載入: 
    傳統的模組打包工具(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;/***/ }....../******/ ]);
  1. bundle.js是以模組 id 為記號,通過函數把各個檔案依賴封裝達到分割效果,如上代碼 id 為 0 表示 entry 模組需要的依賴, 1 表示 util1模組需要的依賴
  2. require資源檔 id 表示該檔案需要載入的各個模組,如上代碼_webpack_require__(1) 表示 util1.js 模組,__webpack_require__(2) 表示 util2.js 模組
  3. exports.util1=util1 模組化的體現,輸出該模組

淺談webpack打包原理

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.