webpack優化 速度優化 檔案搜尋範圍

2021-08-28 05:39:49 字數 1501 閱讀 3321

在使用實際專案開發中,為了提公升開發效率,很明顯你會使用很多成熟第三方庫;即便自己寫的**,模組間相互引用,為了方便也會使用相對路勁,或者別名(alias);這中間如果能使得webpack更快尋找到目標,將對打包速度產生很是積極的影響。於此,我們需要做的即:減小檔案搜尋範圍,從而提公升速度;實現這一點,可以有如下兩法:

webpack的resolve.modules配置模組庫(即 node_modules)所在的位置,在 js 裡出現import 'vue'這樣不是相對、也不是絕對路徑的寫法時,會去 node_modules 目錄下找。但是預設的配置,會採用向上遞迴搜尋的方式去尋找,但通常專案目錄裡只有乙個 node_modules,且是在專案根目錄,為了減少搜尋範圍,可以直接寫明node_modules的全路徑;同樣,對於別名(alias)的配置,亦當如此:

function resolve (dir) 

module.exports =

},...

}

需要額外補充一點的是,這是 webpack2.* 以上的寫法。在 1.* 版本中,使用的是resolve.root,如今已經被棄用為resolve.modules;同時被棄用的還有resolve.fallbackresolve.modulesdirectories

webpack的裝載機(loaders),允許每個子項都可以有以下屬性:

test:必須滿足的條件(正規表示式,不要加引號,匹配要處理的檔案)

exclude:不能滿足的條件(排除不處理的目錄)

include:匯入的檔案將由引導程式轉換的路徑或檔案陣列(把要處理的目錄包括進來)

loader:一串「!」分隔的裝載機(2.0版本以上,"-loader"不可以省略)

loaders:作為字串的裝載器陣列

對於include,更精確指定要處理的目錄,這可以減少不必要的遍歷,從而減少效能損失。同樣,對於已經明確知道的,不需要處理的目錄,則應該予以排除,從而進一步提公升效能。假設你有乙個第三方元件的引用,它肯定位於node_modules,通常它將有乙個 src 和乙個 dist 目錄。如果配置webpack來排除 node_modules,那麼它將從 dist 已經編譯的目錄中獲取檔案。否則會再次編譯它們。故而,合理的設定 include & exclude,將會極大地提公升webpack打包優化速度,比如像這樣:

module: ,,},

},}

]},

webpack 打包速度優化

const path require path const webpack require webpakc module.exports output plugins new webpack.dllplugin 混淆壓縮 new webpack.optimize.uglifyjsplugin 第三步...

Webpack 構建速度優化

profile 記錄構建中的耗時資訊 json 以json格式輸出構建結果,最後只輸出乙個json檔案 包含所有的構建資訊 const jarvis require webpack jarvis plugins new jarvis 優化loader配置 優化resolve.modules配置 re...

webpack優化 速度優化 多執行緒

1 背景 對於webpack來說,預設的配置都是單執行緒的,並沒有充分利用電腦cpu的資源,可以充分利用cpu實現多執行緒打包和壓縮專案,以達到節省編譯時間的目的。2 介紹 使用 1 webpack parallel uglify plugin webpack預設提供的uglifyjs外掛程式,由於...