1.路由懶加載
整個網頁默認是剛打開就去加載所有頁面，路由懶加載就是只加載你當前點擊的那個模塊，
實作方式有：
1.require：加載組件，
component: resolve => require(["@/view/system/login/Login"], resolve)；
2.import引入
const Login = ()=> import(’@/views/login/index.vue’)
2.異步組件：
在大型應用中，我們可能需要將應用分割成小一些的代碼塊，并且只在需要的時候才從服務器加載一個模塊，提高頁面渲染速度，
//組件1
<tempalte>
<Parent v-if="show"></Parent>
<button @click='handleShow'>出現</button>
</tempalte>
<script>
import Partent from './chuancan/parent'//直接引入
export default {
data(){
ratun{
show:true,
}
},
components: {Parent}
methods(){
handleShow(){
console.log("出現了");
this.show = true;
}
}
}
</script>
//parent組件
<div>
父組件
</div>
頁面效果：
可以看出Parent組件對應的.js檔案已經在剛進入頁面中就被加載進來了
異步加載：
我們想要的效果是點擊按鈕后再去請求js資源，
//組件1
<tempalte>
<Parent v-if="show"></Parent>
<button @click='handleShow'>出現</button>
</tempalte>
<script>
export default {
data(){
return{
show:false,
}
},
components:{
Parent:()=>import (/*webpackChunkName:'async'*/'./chuancan/parent')
//動態引入，將這個包命名為async
},
methods(){
handleShow(){
console.log("出現了");
this.show = true;
}
}
}
</script>
此時頁面中沒.js檔案
當點擊按鈕后，才出現了async.js檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305481.html
標籤：其他
上一篇：JavaScript之手撕new
下一篇：聊一聊C#與.NET之間的關系