詳解webpack 熱更新優(yōu)化
前言
隨著項(xiàng)目的界面越來(lái)越多,webpack的熱更新越來(lái)越慢,有時(shí)會(huì)達(dá)到5,7s之久,這對(duì)于開(kāi)發(fā)效率影響是非常巨大的。
分析過(guò)程
于是今天就針對(duì)這個(gè)分析了一下熱更新慢的原因,步驟如下
首先先在package中的啟動(dòng)命令加上
--progress --watch --colors --profile
先解釋一下這幾個(gè)參數(shù)的含義
- --progress 構(gòu)建進(jìn)度
- --watch 實(shí)時(shí)監(jiān)測(cè)
- --profile 編譯過(guò)程中的步驟耗時(shí)時(shí)間
加上了這幾個(gè)參數(shù),重啟項(xiàng)目,就可以開(kāi)始觀察耗時(shí)時(shí)間了,修改了某個(gè)文件之后,查看控制臺(tái),如下
圖中紅色部分就是耗時(shí)最長(zhǎng)的地方了,好了,發(fā)現(xiàn)了耗時(shí)時(shí)間長(zhǎng)的地方了,經(jīng)過(guò)百度搜索,發(fā)現(xiàn)也有個(gè)問(wèn)題和我這個(gè)非常類似,他的原因是因?yàn)槭褂昧藆glifyJsPlugin插件,這么一想,我的項(xiàng)目中的webpack配置中也用到了這個(gè)插件,于是把這個(gè)插件移到生產(chǎn)環(huán)境中使用,修改之后重啟項(xiàng)目,修改某個(gè)文件之后,查看控制臺(tái),如下
效果非常驚人,總的耗時(shí)已經(jīng)在1,2s之內(nèi)了,效率提高了不少!!如果也有這種煩惱的小伙伴也可以試一下哦
另一種解決方案
這種方案的思路為,開(kāi)發(fā)環(huán)境中,每人負(fù)責(zé)的都是一部分模塊或者組件,所以熱更新可以只編譯自己當(dāng)前需要的頁(yè)面,而沒(méi)必要把所有的頁(yè)面全部編譯。創(chuàng)建一個(gè) selfConfig.js 設(shè)置需要保存的頁(yè)面,然后在 webpack 配置中,配置,只屬于需要的頁(yè)面去編譯熱更新。加快開(kāi)發(fā)環(huán)境中的編譯速度。
// selfConfig.js module.exports = [ 'imScence', 'mLogin' ];
// webpack.base.conf.js // 部分關(guān)鍵代碼 const selfConfig = require("./selfConfig"); for (let moduleName of modules) { if (selfConfig.length === 0) { devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js'); } else { if (selfConfig.includes(moduleName)) { devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js'); } } buildEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js'); }
以上事例設(shè)置完成后,只會(huì)熱更新兩個(gè)頁(yè)面,但是這種方案的弊端是,其他頁(yè)面本地環(huán)境將是白屏打不開(kāi)(因?yàn)閴焊鶝](méi)編譯),所以這種方案還是根據(jù)適合自己的場(chǎng)景使用。
注意: 每次修改 selfConfig.js 需要重起 webpack 服務(wù)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動(dòng)
方便做一些問(wèn)題提交等宣傳效果,多用于文字滾動(dòng)2008-10-10js中將URL中的參數(shù)提取出來(lái)作為對(duì)象的實(shí)現(xiàn)代碼
將URL中的參數(shù)提取出來(lái)作為對(duì)象的實(shí)現(xiàn)代碼,適合希望獲取url參數(shù)的朋友。2011-08-08JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及遇到的坑
JavaScript是一個(gè)神奇的語(yǔ)言,字符串轉(zhuǎn)數(shù)字有5種方法,各有各的坑法!接下來(lái)通過(guò)本文給大家介紹JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及其陷阱,感興趣的朋友一起看看吧2018-07-07javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁(yè)內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實(shí)現(xiàn)禁止復(fù)制頁(yè)面內(nèi)容的方法,非常的實(shí)用,有需要的小伙伴可以參考下。2015-12-12