webpack bundle中parentJsonpFunction的作用


parentJsonpFunction作用:使異步加載的模塊在多個不同的bundle內同步。

 

假設有多入口文件

 

 

bundle1.js:

 

 

bundl2.js:

 

 

在webpack打包后

 

 

 

加載流程:

 

1.bundle1: webpack_require__.e.. ---> 生成【script】

2.bundle2: webpack_require__.e.. ---> 生成【script】

3.進入到0.js內部了,現在在執行bundle1生成的script標簽,此時執行的是window.webpackJsonp.push(執行的是bundle2的webpackjsonpcallback方法..) 將模塊加載到bundle2中

4.通過parentJsonpFunction進入到了bundle1中,將這個模塊也加載到bundle1中,再通過parentJsonpFunction將data掛載到了window.webpackJsonp數組下

5.調用bundle1的webpack_require__.e的.then了

 (resolve(webpack_require__(./show.js).bind(…)).then.. webpackrequire的時候可以加載到這個已經加載到modules里面的module了

6.調用bundle2的.then了 (resolve(webpack_require__(./show.js).bind(…)).then.. webpack

webpackrequire的時候可以加載到這個已經加載到modules里面的module了,(因為剛才的過程中已經加載了,所以這里可以直接加載)

7.執行bundle1的.then 執行bundle2的.then 輸出bundle1最終的內容 輸出bundle2最終的內容

8.進入到0.js內部了,這是因為創建的第二個script標簽加載了

  執行window.webpackJsonp.push… (這個是bundle2的webpackjsonpcallback) 重新加載了bundle2的module,然后執行到parentJsonpFunction,重新加載了一下bundle1的module,再執行到parentJsonpFunction 最終在window的webpackjsonp數組里又push入一條內容 (注意:這里第二個script標簽運行,重新給bundle2和bundle1的modules進行了加載)

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM