vue項目熱更新坑怎么解決

這篇文章主要講解了“vue項目熱更新坑怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue項目熱更新坑怎么解決”吧！

vue項目熱更新坑

今天在使用vue-cli構造的vue項目時，遇到一個坑。

setInterval(() => {
  console.log('This is one.')
}, 10000)

運行后如下：

這時我們修改其中的代碼，不刷新網頁：

setInterval(() => {
  console.log('This is two.')
}, 1000)

結果如下，發現之前的計時函數以久存在，熱更新 !== 刷新頁面 ！！！謹記

vue項目熱更新慢

突然有一天，vue項目跑著跑著，熱更新的時候卡到75%的地方卡好久，一個熱更新要10幾秒，這簡直耽誤開發進度，不能忍，怎么辦呢？

查找熱更新慢是哪里慢—分析原因

針對這個分析了一下熱更新慢的原因，步驟如下

首先先在package中的啟動命令加上

--progress --watch --colors --profile

先解釋一下這幾個參數的含義

• –progress 構建進度

• –watch 實時監測

• –profile 編譯過程中的步驟耗時時間

加上這個配置，重啟項目，就可以看到耗時了 

解決辦法

圖中紅色框出來的地方耗時最嚴重，也就是卡到75%的地方耗時最嚴重，腫么辦呢？

問度娘，大神們說，這樣做

1、安裝babel-plugin-dynamic-import-node插件

$ npm install babel-plugin-dynamic-import-node

2、.babelrc文件里添加配置dynamic-import-node

公司項目腳手架為vue-cli2.0

所以在.babelrc文件里添加配置dynamic-import-node

網上的大神們說，加上就好了，很興奮，終于可以好了，然而，我再跑一遍項目，還是一樣，還是蝸牛的速度，還是卡在75%。。。。。。心塞~~~~~~~

3、改變路由懶加載方式

求助了個大神，大神說是路由太多了，是呀，項目越來越多了，腫么辦，讓試一下用import 懶加載路由，因為我現在用的是require懶加載路由的，如下圖

把下圖中require方式換成import方式

項目再跑一遍，1、2秒就熱更新成功~~淚崩，終于好了，糾其原因，我猜的是安裝的插件babel-plugin-dynamic-import-node，與import路由加載方式配套使用才能發揮期作用。

感謝各位的閱讀，以上就是“vue項目熱更新坑怎么解決”的內容了，經過本文的學習后，相信大家對vue項目熱更新坑怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！