- vue異步組件
- es提案的import()
- webpack的require,ensure()
vue異步組件技術(shù) ==== 異步加載
vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .
但是,這種情況下一個組件生成一個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，每個組件打包成一個js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代碼，指定了相同的webpackChunkName毅往，會合并打包成一個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ù)沐寺，也可以實現(xiàn)按需加載渴杆。
這種情況下寥枝，多個路由指定相同的chunkName宪塔，會合并打包成一個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')
}
