vue項(xiàng)目熱更新的坑及解決
vue項(xiàng)目熱更新坑
今天在使用vue-cli構(gòu)造的vue項(xiàng)目時(shí)，遇到一個(gè)坑。
setInterval(() => {
console.log('This is one.')
}, 10000)運(yùn)行后如下：
這時(shí)我們修改其中的代碼，不刷新網(wǎng)頁(yè)：
setInterval(() => {
console.log('This is two.')
}, 1000)結(jié)果如下，發(fā)現(xiàn)之前的計(jì)時(shí)函數(shù)以久存在，熱更新 !== 刷新頁(yè)面 ?。。≈?jǐn)記
vue項(xiàng)目熱更新慢
突然有一天，vue項(xiàng)目跑著跑著，熱更新的時(shí)候卡到75%的地方卡好久，一個(gè)熱更新要10幾秒，這簡(jiǎn)直耽誤開(kāi)發(fā)進(jìn)度，不能忍，怎么辦呢？
查找熱更新慢是哪里慢—分析原因
針對(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è)配置，重啟項(xiàng)目，就可以看到耗時(shí)了
解決辦法
圖中紅色框出來(lái)的地方耗時(shí)最嚴(yán)重，也就是卡到75%的地方耗時(shí)最嚴(yán)重，腫么辦呢？
問(wèn)度娘，大神們說(shuō)，這樣做
1、安裝babel-plugin-dynamic-import-node插件
$ npm install babel-plugin-dynamic-import-node
2、.babelrc文件里添加配置dynamic-import-node
公司項(xiàng)目腳手架為vue-cli2.0
所以在.babelrc文件里添加配置dynamic-import-node
網(wǎng)上的大神們說(shuō)，加上就好了，很興奮，終于可以好了，然而，我再跑一遍項(xiàng)目，還是一樣，還是蝸牛的速度，還是卡在75%。。。。。。心塞~~~~~~~
3、改變路由懶加載方式
求助了個(gè)大神，大神說(shuō)是路由太多了，是呀，項(xiàng)目越來(lái)越多了，腫么辦，讓試一下用import 懶加載路由，因?yàn)槲椰F(xiàn)在用的是require懶加載路由的，如下圖
把下圖中require方式換成import方式
項(xiàng)目再跑一遍，1、2秒就熱更新成功~~淚崩，終于好了，糾其原因，我猜的是安裝的插件babel-plugin-dynamic-import-node，與import路由加載方式配套使用才能發(fā)揮期作用，搞定，撒花·······
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了requirejs + vue 項(xiàng)目搭建詳解,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹的相關(guān)資料,Vue項(xiàng)目目錄結(jié)構(gòu)是指在開(kāi)發(fā)Vue項(xiàng)目時(shí),為了更好地組織和管理代碼,將不同的文件按照一定的規(guī)則和層次結(jié)構(gòu)進(jìn)行分類和存放的方式,需要的朋友可以參考下2023-12-12
Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來(lái)定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了element-ui如何防止重復(fù)提交的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue3如何通過(guò)ESLint校驗(yàn)代碼是否符合規(guī)范詳解
ESLint可以靈活設(shè)置規(guī)則,也發(fā)布了很多公開(kāi)的規(guī)則集,下面這篇文章主要給大家介紹了關(guān)于Vue3如何通過(guò)ESLint校驗(yàn)代碼是否符合規(guī)范的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開(kāi)發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫(xiě)法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vux-uploader 圖片上傳組件的安裝及使用方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vue路由守衛(wèi)+登錄態(tài)管理實(shí)例分析
這篇文章主要介紹了vue路由守衛(wèi)+登錄態(tài)管理,結(jié)合實(shí)例形式分析了vue路由守衛(wèi)與登錄態(tài)管理相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
VUE前端實(shí)現(xiàn)防抖節(jié)流Lodash工具庫(kù)舉例詳解
這篇文章主要介紹了Lodash庫(kù)和自定義防抖、節(jié)流函數(shù)的使用方法,包括它們的定義、應(yīng)用示例及應(yīng)用場(chǎng)景文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01