1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
| import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
//上面直接引入模块方式,页面初始化全部加载
//第一种方式
//例如原本:import Layout from '@/views/layout'
let Layout = ( resolve ) => {
return require.ensure( [], () => {
resolve( require( '@/views/layout' ) )
} )
}
let Project = ( resolve ) => {
return require.ensure( [], () => {
resolve( require( '@/views/backend/project' ) )
} )
}
//第二种方式
let Doc = ( resolve ) => {
return import ( '@/views/backend/doc' )
}
let Workbench = ( resolve ) => {
return import ( '@/views/backend/workbench' )
}
/*
区别:
1、require是有webpack社区提供方案,import为es6官方提供;
2、使用1、require方式可以将多个模块js组合分割打包,
require下面方法ensure第一个参数是依赖,如果不需要请写[](空数组)
而import只能将每个模块独立打包成一个js文件;
也就是说,如果现在有三个导航A、B、C,你现在用require可以将A单独分割出来做懒加载,进入a模块只请求A,
B和C你可以组合在一起进行分割,进入B和C将加载共同一个文件;
例如:
let Doc = (resolve) => {
return require.ensure([], () => {
resolve(require('@/views/backend/doc'))
}, "abc")
}*//*
let Workbench = (resolve) => {
return require.ensure([], () => {
resolve(require('@/views/backend/workbench'))
}, "abc")
}
3、如上例子,最后一个参数'abc'名称就是进行匹配哪几个文件打包在一起加载
*/
import Login from '@/components/login'
Vue.use( Router )
let router = new Router( {
mode: 'history',
linkActiveClass: 'is-active',
routes: [ {
path: '/',
name: 'Home',
component: Home
},
{
path: '/management',
name: 'Management',
component: Layout,
children: [ {
path: '/project',
name: 'Project',
component: Project,
meta: {
login: true
}
},
{
path: '/workbench',
name: 'Workbench',
component: Workbench,
meta: {
login: true
}
},
{
path: '/doc',
name: 'Doc',
component: Doc,
meta: {
login: false
}
}
]
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '*',
redirect: '/'
}
]
} )
export default router |
共 0 条评论关于"Vue+Webpack实现懒加载(按需加载)两种方式及区别"
最新评论