webpack優化公司內部分享ppt小記

Webpack整個的構建過程是基於事件流

• Webpack 就像一條生產線，要通過一系列處理流程後才能將源文件轉換成輸出結果。 這條生產線上的每一個處理流程的職責都是單一的，多個流程之間有存在依賴關係，只有完成當前處理後才能交給下一個流程去處理。 插件就像是一個插入到生產線中的一個功能，在特定的時機對生產線上的資源作處理。 Webpack 經過 Tapable 來組織這條複雜的生產線。 Webpack 在運行過程當中會廣播事件，插件只須要監聽它所關心的事件，就能加入到這條生產線中，去改變生產線的運做。 Webpack 的事件流機制保證了插件的有序性，使得整個系統擴展性很好。

構建過程

1. 化webpack，初始化構造配置參數，構建compiler對象，掛載Tapable事件流鉤子函數（plugin的apply方法）
2. 入口，讀取entries入口配置信息
3. 階段，依次讀取入口文件，loader內容轉換，AST語法樹轉換，依賴收集，逐個拉取依賴並重覆上述過程，最終獲得轉換後的內容以及依賴關係
4. 資源，根據入口與模塊之間的依賴關係，組裝chunk代碼塊，生成文件輸出列表
5. 成功，根據配置輸出文件路徑和文件名，將文件寫入文件系統，完成構建

優化

resolve優化

減小 resolve 的解析

1. resolve.extensions：用來代表文件後綴列表，默認查找順序是 ['.js', '.json']，若是你的導入文件沒有添加後綴就會按照這個順序查找文件。咱們應該儘量減小後綴列表長度，而後將出現頻率高的後綴排在前面
2. resolve.alias：能夠經過別名的方式來映射一個路徑，能讓 Webpack 更快找到路徑
3. resolve.mainFields:[‘main’]，設置儘可能少的值能夠減小入口文件的搜索步驟
4. module.noParse，排除不須要掃描的文件

loader優化

1. Loader 的文件搜索範圍
2. cache-loader（將loader編譯後的結果寫入硬盤緩存）
3. HappyPack能夠將 Loader 的同步執行轉換爲並行的（目前基本棄用了）
4. 排除node_modules等不須要編譯的文件（ exclude: /node_modules/ ）
5. 配置loader緩存參數，例如label（ loader: 'babel-loader?cacheDirectory=true' ）

plugin優化

1. 使用 DLLPlugin打包公共代碼
2. ParallelUglifyPlugin開啓多進程壓縮JS文件
3. IgnorePlugin(內置插件) 忽略某些模塊
4. LimitChunkCountPlugin合併細小的chunk代碼塊，減小http請求；MinChunkSizePlugin合併細小代碼塊

optimization

1. splitChunks分塊，緩存複用率在minChunks上的代碼塊
2. minimizer中ParallelUglifyPlugin插件並行壓縮代碼
3. concatenateModules串聯到單個模塊中的模塊圖段，production模式下默認開啓

• ...production模式下默認開啓的優化選項