在vue單頁(yè)應(yīng)用中，若不做任何處理，所有vue文件會(huì)打包為一個(gè)文件，這個(gè)文件非常的大，造成網(wǎng)頁(yè)在首次進(jìn)入時(shí)比較緩慢。做了代碼分割后，會(huì)將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，能夠提高頁(yè)面首次進(jìn)入的速度，網(wǎng)站性能也能夠得到提升。

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

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

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

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

點(diǎn)到其他頁(yè)面后，頁(yè)面會(huì)依次加載當(dāng)前頁(yè)面的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、在組件中按需加載其他組件

我們還是先來(lái)看看修改前的代碼，此時(shí)引用組件的方式為傳統(tǒng)正常的方式

import vOther from '@/components/other'

export default {

components: {

vOther

}

}

我們只需做如下修改，便能達(dá)到我們想要的效果，將

import vOther from '@/components/other'

改為

const vOther = () => import('@/components/other')

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的vue如何split_vue代码分割的实现(codesplit)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。