vue项目性能优化3,优化:路由懒加载

基于webpack 3、vue 2和vue-cli 2的性能优化。

让页面打开更快,解决白屏问题。
如果拆分的文件太多,会造成网络请求很多,这时,可以适当合并。可以使用import或者require.ensure()。

打开src/router/index.js文件,修改:
修改前:
import Vue from ‘vue’
import Router from ‘vue-router’

import login from ‘@/components/login’

Vue.use(Router)

export default new Router({
mode:‘history’,
routes: [
{
path: ‘/login’,
name: ‘login’,
component: login
}
]
});

修改后:
import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router)

export default new Router({
mode:‘history’,
routes: [
{
path: ‘/login’,
name: ‘login’,
component: resolve => require([’@/components/login’], resolve)
}
]
});

你可能感兴趣的:(vue)