国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack2的那些事兒 ------ 生成的文件是怎么運行的

anonymoussf / 1415人閱讀

摘要:打算寫幾篇文章如果能堅持的話來總結下,文章不是教你怎么使用,而是讓你更好的了解你在使用的是怎么去運行的,想來想去,第一篇就先介紹下生成的文件,是怎么去執行的。

謝謝你們看我扯技術,最近在對webpack2進行的配置進行梳理和學習,webpack是在去年使用vue開始接觸的,個人感覺webpack 融入到編程過程中,提供了模塊化,將各種類型的文件都看成模塊,通過不同的 loader 進行處理和代碼組織,是一個比較新穎的編程體驗,應該說webpack的編程適用場景比較廣泛,能夠比較方便的引入第三方的各種 npm 模塊進行使用, 方便快速開發工作。
打算寫幾篇文章(如果能堅持的話= =)來總結下 webpack,文章不是教你怎么使用webpack,而是讓你更好的了解你在使用的webpack是怎么去運行的 ,想來想去,第一篇就先介紹下webpack生成的文件,是怎么去執行的。

webpack 的生成信息

首先我們要先通過 webpack 去生成文件(好一句廢話),文章所有的代碼都會在文章最后面給出鏈接,下面是本文章使用的代碼的目錄:

我們現在只要關注js目錄,里面有兩個入口 app.jsbar.js,然后會引用 es5,es6中的各種測試模塊,具體大家可以看代碼。然后代碼一跑!只見命令行蹭蹭蹭跑出來了好多信息,像下面一樣:

首先我們來看下生成的信息:

Asset : 這個一看就明白是生成的文件相對于配置中output.path的路徑,可以看到圖中生成的文件都是在 output.path底下的;然后我們仔細看下文件名,比如第一個0.fb6d7f4.js,是由[name/chunkname].[hash/chunkhash].js組成的,這個可以在output.filename 中配置,關于hashchunkhash的區別,這個后面會專門通過一篇文章進行簡介。

Size : 這個就沒啥好說的,就是生成文件的大小

Chunks : 我們會看到有些 Chunks是兩個數字,有些是一個,其實還可能出現更多,經過我的一堆實驗= =,發現Chunks中的第一個數字,就是這個文件的 ChunkId,而后面的是當前這個文件依賴的文件的ChunkId,從圖中我們可以看到,第一個文件的ChunkId0,它依賴的是ChunkId3manifest.a890c12.js

Chunk Names : 這個就是這個生成文件的chunkName,可以用于文件命名,可以看到如果沒有在entry中指定,那么chunkName會等于chunkId

程序加載流程

了解了生成的信息,接下來我們把項目跑起來(可以用 anywhere 跑項目),通過chrome developer tool可以看到請求情況

可以看到請求了頁面html之后,按順序分別加載了 manifest,index,0,2文件,這里我們先來分析下文件的分割和加載流程。

分割

可以看到頁面的 js 被分割成為了4個文件,通常來說,一個項目定義了一個 entry point,
webpack會以這個entry point作為入口,進行代碼回溯,如果存在System.import或者是require.ensure的異步模塊調用,webpack會對使用的模塊進行多帶帶打包,比如文件中的02這兩個 js,如果沒有異步模塊調用,那么會將所有的代碼生成在一個文件中,webpack 為了使得打包的代碼進行優化,可以使用CommonsChunkPlugin插件對代碼進行處理,將庫文件多帶帶打包,通過規則生成對應的 chunk 文件,其中的manifest為 默認的 chunk,其中包含了打包文件的runtime信息,還有webpackJsonp模塊加載的封裝庫,所有的生成模塊都是采用webpackJsonp進行封裝的。

manifest

從上面的圖中可以看到,瀏覽器按順序分別加載了 manifest,index,0,2文件,其中manifest相當于webpackruntime工具,用于做模塊加載,其他文件是邏輯文件; manifest中封裝了webpackJsonpCallback方法和__webpack_require__方法,下面我們來進行分析:

webpackJsonpCallback(chunkIds, moreModules, executeModule):webpackJsonpCallback是chunk封裝的包裝方法,webpack在生成每一個chunk的時候都是通過這個方法進行包裝的,我們在上面看到的 chunksId,會作為第一個參數,被包含進這個chunkmodule會被以數組的形式傳入第二個參數moreModules中,如果這個chunk中包含可以執行的modules,需要將 moduleId傳入第三個參數 executeModule中,下面是 這個方法的代碼片段:
這個方法主要做了下面幾件事:

加載chunk

我們可以看到這個方法用第一個循環分別將chunkIds處理進入installedChunks對象中,installedChunks對象用于記錄chunk的加載情況,分別用0表示當前的chunkId已經加載完成,用一個長度為3的數組表示當前的chunk正在加載中,數據中其實存儲著加載過程中的resolve方法、reject方法和pormise對象,這種只在通過require.ensure或者是System.import才會出現。因此我們可以看到,第一個for循環中判斷如果chunkId在 installedChunks 中存在且不為0,則判斷是異步加載的模塊已經加載成功,將chunkresolve方法傳入resolves數組,然后后面運行,然后將chunk對應的狀態設置為0。如果判斷之后不存在,這認為這是一個同步加載的chunk,直接設置為0,表示chunk已經加載完畢。

加載 module

加載 module 的邏輯比較簡單,判斷純不存在這個module之后,將 其寫入modules參數之中

運行需要執行的module

如果executeModule存在,則對其中對應moduleId的模塊進行運行

__webpack_require__: 這個對象包含了多個方法,主要用于modulechunk的加載,處理和運行,下面我們一個一個分析:

__webpack_require__(moduleId) :代碼如下
這個方法接收一個moduleId,構建一個 module 對象存入installedModules中,并且初始化這個 module, 最后返回module.export

__webpack_require__.e(chunkId) : 這個方法用于通過異步的方式加載 chunk 文件,代碼如下:
這個方法總體來說就是加載一個 script 文件,生成一個 promise對象,當 script 加載完成后運行,又會執行前面的webpackJsonpCallback注冊chunk,然后promise.resolve。這里面需要注意的是紅框里面的東西,這個涉及到一個優化點,如果沒有在使用CommonsChunkPlugin多帶帶打包manifest,那么一般來說他會和你指定的其他庫通過CommonsChunkPlugin打包在一起,那么你會發現即使你只是修改了庫之外的邏輯,庫文件生成的文件的hash或者是chunkhash也是會變的,原因就在于manifest中紅框部分是動態生成的,導致文件的 hash 產生變化,不利于緩存,因此建議多帶帶打包manifest

__webpack_require__.oe:定義一個統一的錯誤處理函數

__webpack_require__.p:這個是和webpackoutput.publicPath對應的值

__webpack_require__.o: Object.prototype.hasOwnProperty的封裝
前面幾個方法在 ES5的情景下面已經足夠運行這個模塊系統,我們都知道webpack2加入了對ES6 MODULE的支持,下面幾個__webpack_require__是為ES6使用的:

__webpack_require__.d:代碼如下:
這個是用于ES6中命名的export比如 webpack 遇到這種export,會對其用__webpack_require__.d進行包裝,變成:

__webpack_require__.i:用于返回一個正確的上下文的函數回去,針對的是export直接為一個可運行方法的時候

以上就是webpack manifest中的大部分重要的函數,其實主要就是通過webpackJsonpCallback來注冊載入對應的chunk文件,通過__webpack_require__來處理模塊的關系。

總結

整個webpack 的在運行時都是通過 manifest去做控制處理的, webpackJsonpCallback對應的是對加載的chunk文件的處理,__webpack_require__是對加載模塊的處理,了解這些可以使我們更好的去優化我們的代碼,幫助我們去調試代碼,幫助我們在復雜情況下去解決問題提供一些其他的思路。

最后附上代碼:先介紹下,webpack-base是我在使用webpack的過程中自己總結的一套腳手架,文檔還沒有完善,如果需要文檔可以在issue里面提,本次的項目在分支上面開發,代碼點擊這里

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81789.html

相關文章

  • 無痛學會各種 2 Vue2+Vuex2+Webpack2 前后端同構渲染

    摘要:它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候,它就會直接重用完全相同的同時跳過比對。需要注意的是,中的操作必須是同步的,不可以存在異步操作的情況。 新增:哈哈,最近又推出了 vue 的文章,在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術,這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

    fish 評論0 收藏0
  • 無痛學會各種 2 Vue2+Vuex2+Webpack2 前后端同構渲染

    摘要:它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候,它就會直接重用完全相同的同時跳過比對。需要注意的是,中的操作必須是同步的,不可以存在異步操作的情況。 新增:哈哈,最近又推出了 vue 的文章,在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術,這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

    30e8336b8229 評論0 收藏0
  • 無痛學會各種 2 Vue2+Vuex2+Webpack2 前后端同構渲染

    摘要:它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候,它就會直接重用完全相同的同時跳過比對。需要注意的是,中的操作必須是同步的,不可以存在異步操作的情況。 新增:哈哈,最近又推出了 vue 的文章,在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術,這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

    Pluser 評論0 收藏0
  • [聊一聊系列]聊一聊iconfont那些事兒

    摘要:歡迎大家收看聊一聊系列,這一套系列文章,可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解,得從一個新的規則說起。因為用戶沒有安裝的話,我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺,可以選自己喜歡的圖標導出。 歡迎大家收看聊一聊系列,這一套系列文章,可以幫助前端工程師們了解前端的方方面面(不僅僅是代碼):https://segmentfault.com/blog/fr...

    Markxu 評論0 收藏0
  • [聊一聊系列]聊一聊iconfont那些事兒

    摘要:歡迎大家收看聊一聊系列,這一套系列文章,可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解,得從一個新的規則說起。因為用戶沒有安裝的話,我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺,可以選自己喜歡的圖標導出。 歡迎大家收看聊一聊系列,這一套系列文章,可以幫助前端工程師們了解前端的方方面面(不僅僅是代碼):https://segmentfault.com/blog/fr...

    2501207950 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<