路由懶載入優化

首先得需要外掛程式支援：syntax-dynamic-import

import vue from 'vue'

import vuerouter from 'vue-router'
/*import first from '@/components/first'
import second from '@/components/second'*/
vue.use(vuerouter)
//方案1
const first =()=>import(/* webpackchunkname: "group-foo" */ "../components/first.vue");
const second = ()=>import(/* webpackchunkname: "group-foo" */ "../components/second.vue");
const three = ()=>import(/* webpackchunkname: "group-fooo" */ "../components/three.vue");
const four = ()=>import(/* webpackchunkname: "group-fooo" */ "../components/four.vue");
//方案2
const first = r => require.ensure(, () => r(require('../components/first.vue')), 'chunkname1')
const second = r => require.ensure(, () => r(require('../components/second.vue')), 'chunkname1')
const three = r => require.ensure(, () => r(require('../components/three.vue')), 'chunkname2')
const four = r => require.ensure(, () => r(require('../components/four.vue')), 'chunkname2')
//懶載入路由
const routes = [
, ,, ,
//這裡require元件路徑根據自己的配置引入
]//最後建立router 對路由進行管理，它是由建構函式 new vuerouter() 建立，接受routes 引數。
const router = new vuerouter()
export default router;

// 進入路由

beforerouteenter (to, from, next) )
})},
// 路由變化
beforerouteupdate (to, from, next) )
}

個人比較習慣這樣解決：

首先封裝 promise 用於控制 dispatch 流。

// store.js

const generate = commit => (id, mutation) => )
})}

// store.js

[action.youraction] () ,
[mutation.yourmutation] (state, data)

// yourcomponent.vue

import store from './yourroute/store.js'
export default )
},computed: )
},}

import vuefrom'vue'

import vuerouterfrom'vue-router'

/*import first from '@/components/first'

import second from '@/components/second'*/

vue.use(vuerouter)

//方案1

constfirst =()=>import(/* webpackchunkname: "group-foo" */"../components/first.vue");

constsecond = ()=>import(/* webpackchunkname: "group-foo" */"../components/second.vue");

constthree = ()=>import(/* webpackchunkname: "group-fooo" */"../components/three.vue");

constfour = ()=>import(/* webpackchunkname: "group-fooo" */"../components/four.vue");

//方案2

constfirst = r => require.ensure(, () => r(require('../components/first.vue')),'chunkname1')

constsecond = r => require.ensure(, () => r(require('../components/second.vue')),'chunkname1')

constthree = r => require.ensure(, () => r(require('../components/three.vue')),'chunkname2')

constfour = r => require.ensure(, () => r(require('../components/four.vue')),'chunkname2')

//懶載入路由

constroutes = [

,

,

, ,

//這裡require元件路徑根據自己的配置引入

]

//最後建立router 對路由進行管理，它是由建構函式 new vuerouter() 建立，接受routes 引數。

constrouter =newvuerouter()

exportdefaultrouter;

vue專案優化，路由懶載入

當打包專案時，js包會變得非常的大影響頁面載入，影響頁面載入，如果我們把不同路由對應的元件分割成不同的 塊，當路由被訪問時才載入對應的元件，這樣就更加高效了。1.安裝 babel plugin syntax dynamic import 2.配置babel plugins在babel.config....

路由懶載入

路由的使用 路由懶載入 import home from components home 一般的引入元件方式 const login resolve require components login resolve const routes 使用非同步元件，減少首頁載入js大小，webpack分割 ...

路由懶載入

當打包構建應用是，jacascript包會非常大，印象頁面載入，如果可以把不同路由對應的元件分割成不同的 塊，然後當路由被訪問時才對元件進行載入，就可以更加高效了 懶載入主要作用是將路由對應的元件打包成乙個個js 塊，只有在這個路由被訪問到的時候才載入對應的元件 const home resolve...