建站
咨詢
售后
建站咨詢
新聞中心
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用vue怎么實(shí)現(xiàn)代碼分割，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
站在用戶的角度思考問題，與客戶深入溝通，找到白銀區(qū)網(wǎng)站設(shè)計與白銀區(qū)網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋白銀區(qū)地區(qū)。
一、未分割時瀏覽器加載js的情況
可以看到，只有一個app.js，大小為595kb，若在實(shí)際的大型項(xiàng)目中，這個大小會更大
二、做了代碼分割后瀏覽器加載js情況
發(fā)現(xiàn)多了一個js文件，且app.js大小也變小了，下面看看點(diǎn)擊到其他頁面時加載情況
點(diǎn)到其他頁面后，頁面會依次加載當(dāng)前頁面的js
三、代碼中如何使用
該demo中使用的vue版本號為2.5.2，不同版本的使用方式可能會有所不同
1、首先，看一下路由按需加載的做法
下面是修改前的代碼
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import page1 from '@/page/page1'
import page2 from '@/page/page2'
import page3 from '@/page/page3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/page1',
name: 'page1',
component: page1
},
{
path: '/page2',
name: 'page2',
component: page2
},
{
path: '/page3',
name: 'page3',
component: page3
}
]
})此時，我們只需將
import page1 from '@/page/page1'
改為
const page1 = () => import('@/page/page1')這樣，我們在切換路由時便達(dá)到按需加載了，怎么樣，是不是很簡單
2、在組件中按需加載其他組件
我們還是先來看看修改前的代碼，此時引用組件的方式為傳統(tǒng)正常的方式
import vOther from '@/components/other'
export default {
components: {
vOther
}
}我們只需做如下修改，便能達(dá)到我們想要的效果，將
import vOther from '@/components/other'
改為
const vOther = () => import('@/components/other')上述就是小編為大家分享的使用vue怎么實(shí)現(xiàn)代碼分割了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題：使用vue怎么實(shí)現(xiàn)代碼分割
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/peoceo.html
