vue cli如何正確關閉prefetch

2021-10-06 19:46:56 字數 1809 閱讀 8902

webpack4.6.0+新增了對prefetching和preloading的支援

通過在宣告匯入時使用內聯指令可以讓webpack輸出「resource hint」，告訴瀏覽器

import


(/* webpackprefetch: true */


'loginmodal');


import


(/* webpackpreload: true */


'chartinglibrary'


);
結合 vue 的非同步元件和 webpack 的**分割功能，輕鬆實現路由元件的懶載入

const


foo=()


=>


import


('./foo.vue'


)const router =


newvuerouter(]


})
可以通過內聯指令設定chunkname將所有元件都打包在同個非同步塊 (chunk) 中

const


foo=()


=>


import


(/* webpackchunkname: "group-foo" */


'./foo.vue'


)const


bar=()


=>


import


(/* webpackchunkname: "group-foo" */


'./bar.vue'


)const


baz=()


=>


import


(/* webpackchunkname: "group-foo" */


'./baz.vue'


)
prefetch 鏈結將會消耗頻寬。如果你的應用很大且有很多 async chunk，而使用者主要使用的是對頻寬較敏感的移動端，那麼你可能需要關掉 prefetch 鏈結並手動選擇要提前獲取的**區塊

因為專案中用了路由懶載入，而且元件數量比較多，所以想著關掉會讓首屏載入快些

// vue.config.js


module.exports =)}


}
設定之後沒有效果，於是列印出config一**竟

為毛是preload和prefetch後面有個index，於是就換下名字再次嘗試

config.plugins.


delete


('prefetch-index').


delete


('preload-index'


);
webpackconfig


.plugin


(`preload-$`


).use(preloadplugin,[,


fileblacklist:


[/\.map$/


,/hot-update\.js$/]}


])webpackconfig


.plugin


(`prefetch-$`


).use(preloadplugin,[}


])})
再看看我的入口配置，果然是index

參考文章

[1]:

[2]:

如何正確的關閉socket linux

曾經遇到過好幾個問題，都是與客戶端或者服務端沒有完整關閉socket相關的。在 裡，隨處可見這類問題，只是隱藏較深，不容易暴露bug而已。乙個半關閉狀態的socket，其發起關閉的一方狀態是fin wait2，另一方是wait close 關於 遠端已經關閉連線，為何socket send 還是返回...

Vue cli專案開發階段如何關閉eslint檢查

在剛學vue cli過程中，對於eslint的檢查真是十分惱火，實在是過於嚴格，例如定義乙個變數如果沒有引用，也會報錯。這樣會讓你無暇顧及程式本身，你會花很久時間去處理eslint的問題 其實你的程式本身並無問題 這裡筆者也嘗試過網上的方法，但都是治標不治本，最後還是在vue.config.js配置...

如何才能正確的關閉Socket連線

從tcp協議角度來看，乙個已建立的tcp連線有兩種關閉方式，一種是正常關閉，即四次揮手關閉連線 還有一種則是異常關閉，我們通常稱之為連線重置 reset 首先說一下正常關閉時四次揮手的狀態變遷，關閉連線的主動方狀態變遷是fin wait 1 fin wait 2 time wait，而關閉連線的被動...