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)直耽誤開發(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編譯過程中的步驟耗時(shí)時(shí)間
加上這個(gè)配置，重啟項(xiàng)目，就可以看到耗時(shí)了
解決辦法
圖中紅色框出來的地方耗時(shí)最嚴(yán)重，也就是卡到75%的地方耗時(shí)最嚴(yán)重，腫么辦呢？
問度娘，大神們說，這樣做
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)上的大神們說，加上就好了，很興奮，終于可以好了，然而，我再跑一遍項(xiàng)目，還是一樣，還是蝸牛的速度，還是卡在75%。。。。。。心塞~~~~~~~
3、改變路由懶加載方式
求助了個(gè)大神，大神說是路由太多了，是呀，項(xiàng)目越來越多了，腫么辦，讓試一下用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)文章
axios是vue-resource后出現(xiàn)的Vue請(qǐng)求數(shù)據(jù)的插件。下面我們通過本文給大家介紹vue axios用法教程詳解，感興趣的朋友一起看看吧2017-07-07
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章給大家分享了vue檢測(cè)對(duì)象和數(shù)組的變化的相關(guān)知識(shí)點(diǎn)與實(shí)例代碼，有興趣的朋友參考下。2018-06-06
vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)
這篇文章主要介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下2018-12-12
Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)
下面小編就為大家分享一篇Vue-Router2.X多種路由實(shí)現(xiàn)方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 自適應(yīng)高度表格的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05