這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用vue怎么實(shí)現(xiàn)代碼分割，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站專注于華龍企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都做商城網(wǎng)站。華龍網(wǎng)站建設(shè)公司,為華龍等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

一、未分割時(shí)瀏覽器加載js的情況

 

可以看到，只有一個(gè)app.js，大小為595kb，若在實(shí)際的大型項(xiàng)目中，這個(gè)大小會(huì)更大

二、做了代碼分割后瀏覽器加載js情況

 

發(fā)現(xiàn)多了一個(gè)js文件，且app.js大小也變小了，下面看看點(diǎn)擊到其他頁面時(shí)加載情況

 

點(diǎn)到其他頁面后，頁面會(huì)依次加載當(dāng)前頁面的js

三、代碼中如何使用

該demo中使用的vue版本號(hào)為2.5.2，不同版本的使用方式可能會(huì)有所不同

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
  }
 ]
})

此時(shí)，我們只需將

import page1 from '@/page/page1'

改為

const page1 = () => import('@/page/page1')

這樣，我們?cè)谇袚Q路由時(shí)便達(dá)到按需加載了，怎么樣，是不是很簡(jiǎn)單

2、在組件中按需加載其他組件

我們還是先來看看修改前的代碼，此時(shí)引用組件的方式為傳統(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)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：使用vue怎么實(shí)現(xiàn)代碼分割-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/dhedjs.html