記一次vue-cli3.4.1版本關於懶載入問題

---

使用懶載入按理來說應該在當路由被訪問的時候才載入對應元件

可是vue腳手架在生成構建專案時做了一件事，就是將懶載入使用預載入的方式在首屏載入後瀏覽器空閒時進行了請求

這樣的問題是懶載入的效果變成了預載入，導致懶載入效果不明顯，誤以為懶載入配置錯誤

---

環境：

使用vue-cli初始化專案

注意這裡的about.js，該元件經過懶載入處理，可是卻在首屏載入時產生了請求

問題點：

在index.html頁面中標籤裡有這麼一段程式碼

<link href="/about.js" rel="prefetch">

這種情況是因為vue-cli腳手架自動將懶載入使用預載入方式處理了。

解決：

新增一個vue.config.js檔案

module.exports={
    chainWebpack:config =>{
        config.plugins.delete('prefetch')
    }
}
複製程式碼

將perfetch外掛刪除，這樣懶載入效果將恢復正常。 vue-cli文件Prefetch