- vue異步組件
- es提案的import()
- webpack的require,ensure()
vue異步組件技術(shù) ==== 異步加載
vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實(shí)現(xiàn)按需加載 .
但是,這種情況下一個(gè)組件生成一個(gè)js文件
/* vue異步組件技術(shù) */
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
},{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'],resolve)
}
組件懶加載方案二 路由懶加載(使用import)
// 下面2行代碼拣凹，沒有指定webpackChunkName况凉，每個(gè)組件打包成一個(gè)js文件裳食。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代碼馋缅，指定了相同的webpackChunkName坎匿，會(huì)合并打包成一個(gè)js文件奈惑。 把組件按組分塊
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
{
path: '/about',
component: About
}, {
path: '/index',
component: Index
}, {
path: '/home',
component: Home
}
webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技術(shù)盈简，也可以實(shí)現(xiàn)按需加載凑耻。
這種情況下，多個(gè)路由指定相同的chunkName柠贤，會(huì)合并打包成一個(gè)js文件香浩。
/* 組件懶加載方案三: webpack提供的require.ensure() */
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
path: '/about',
name: 'about',
component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}
