vue组件按需加载[刷][理]

vue异步组件技术

vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。
但是,这种情况下一个组件生成一个js文件,举例如下:

1
2
3
4
5
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}

es提案的import() (推荐使用这种方式)

此方式需要webpack > 2.4支持,参考 webpack官方文档:webpack中使用import(),vue官方文档:路由懒加载(使用import())
vue-router配置路由,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
routes: [
{
path: '/importfuncdemo1',
name: 'ImportFuncDemo1',
component: ImportFuncDemo1
},
{
path: '/importfuncdemo2',
name: 'ImportFuncDemo2',
component: ImportFuncDemo2
}
]
})

webpack提供的require.ensure()

vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName(都指定是demo),会合并打包成一个js文件。举例如下:

1
2
3
4
5
6
7
8
9
10
11
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
path: '/hello',
name: 'Hello',
// component: Hello
component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}

前面3种方式总体代码参考

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
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。
// const ImportFuncDemo1 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo1')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
// savedPosition is only available for popstate navigations.
return savedPosition
} else {
const position = {}
// new navigation.
// scroll to anchor by returning the selector
if (to.hash) {
position.selector = to.hash
}
// check if any matched route config has meta that requires scrolling to top
if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x = 0
position.y = 0
}
// if the returned position is falsy or an empty object,
// will retain current scroll position.
return position
}
}

export default new Router({
mode: 'history',
scrollBehavior,
routes: [
{
path: '/',
name: 'StoreDemo',
// 使用vue的[异步组件](https://cn.vuejs.org/v2/guide/components.html#异步组件)技术,可以实现按需加载
// 但是,这种情况下一个组件生成一个js文件
component: resolve => require(['../components/StoreDemo'], resolve),
// 配置了scrollToTop为true,点击这个路由,页面会滚到顶部
// 如果没配置scrollToTop或配置scrollToTop为false,点击这个路由,页面保持原先的滚动位置
// 效果说明:点击这个路由后,滚动页面隐藏顶部的一部分,再点击路由:/promisedemo,页面保持原先的滚动位置;再点击这个路由,页面会滚动到顶部,因为配置了scrollToTop为true
meta: { scrollToTop: true }
},
{
path: '/promisedemo',
name: 'PromiseDemo',
// 使用webpack的[require.ensure](https://doc.webpack-china.org/api/module-methods#require-ensure)技术,也可以实现按需加载。
// 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件;如果不指定chunkName,则和使用vue的异步组件一样,每个组件生产打包成一个js文件。
// 这个组件PromiseDemo 和下面的 Hello 组件,指定了相同的chunkName(名字为:demo),因此会合并打包成一个js文件。
component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
path: '/hello',
name: 'Hello',
component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
},
{
path: '/importfuncdemo1',
name: 'ImportFuncDemo1',
component: ImportFuncDemo1
},
{
path: '/importfuncdemo2',
name: 'ImportFuncDemo2',
component: ImportFuncDemo2
},
{
path: '/pluginsdemo',
name: 'PluginsDemo',
component: resolve => require.ensure([], () => resolve(require('../components/PluginsDemo')), 'PluginsDemo')
}
]
})

参考文章