通過externals配置來提取常用庫
利用DllPlugin和DllReferencePlugin預編譯資源模塊,通過DllPlugin來對那些我們引用但是絕對不會修改的npm包來進行預編譯,再通過DllReferencePlugin將預編譯的模塊加載進來。
使用Happypack 實現(xiàn)多線程加速編譯
要注意的第一點是,它對file-loader和url-loader支持不好,所以這兩個loader就不需要換成happypack了,其他loader可以類似地換一下
使用Tree-shaking和Scope Hoisting來剔除多余代碼
使用fast-sass-loader代替sass-loader
babel-loader開啟緩存
babel-loader在執(zhí)行的時候,可能會產(chǎn)生一些運行期間重復的公共文件,造成代碼體積大冗余,同時也會減慢編譯效率可以加上cacheDirectory參數(shù)或使用 transform-runtime 插件試試
不需要打包編譯的插件庫換成全局"script"標簽引入的方式
比如jQuery插件,react, react-dom等,代碼量是很多的,打包起來可能會很耗時
可以直接用標簽引入,然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供給模塊內(nèi)部使用相應的變量
優(yōu)化構(gòu)建時的搜索路徑
在webpack打包時,會有各種各樣的路徑要去查詢搜索,我們可以加上一些配置,讓它搜索地更快
比如說,方便改成絕對路徑的模塊路徑就改一下,以純模塊名來引入的可以加上一些目錄路徑
還可以善于用下resolve alias別名 這個字段來配置
還有exclude等的配置,避免多余查找的文件,比如使用babel別忘了剔除不需要遍歷的
如何提升Webpack構(gòu)建速度
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
相關(guān)閱讀更多精彩內(nèi)容
- 構(gòu)建速度優(yōu)化 使用 webpack 內(nèi)置的 stats stats 構(gòu)建的統(tǒng)計信息 package.json 中使...
- 提高webpack的構(gòu)建速度的幾種方法概括 通過externals配置來提取常用庫 利用DllPlugin和Dll...
- webpack webpack 最出色的功能之一就是,除了 JavaScript,還可以通過 loader 引入任...
- 1、什么是webpack webpack是一個打包模塊化javascript的工具,在webpack里一切文件皆模...