vue項目實現(xiàn)按需加載的3種方式：vue異步組件技術(shù)陈辱、es提案的import()均蜜、webpack提供的require.ensure()
異步組件
異步組件就是定義的時候什么都不做，只在組件需要渲染（組件第一次顯示）的時候進(jìn)行加載渲染并緩存
const router = new Router({
routes: [
{
path: '/list',
component: (resolve) => {
// 這里是你的模塊 不用import去引入了
require(['@/components/list'], resolve)
}
}
]
})
es的import()
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
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()
此方法內(nèi)部依賴于Promise
const List = resolve => require.ensure([], () => resolve(require('@/components/list')), 'list');
// 路由也是正常的寫法 這種是官方推薦的寫的 按模塊劃分懶加載
const router = new Router({
routes: [
{
path: '/list',
component: List,
name: 'list'
}
]
}))
- 參數(shù)1：是字符串?dāng)?shù)組吠卷，模塊的依賴，會提前加載柒莉。一般都是空的。
- 參數(shù)2：依賴項加載完成之后的回調(diào)函數(shù)
所有的依賴加載完成之后尘吗，webpack會執(zhí)行這個回調(diào)函數(shù)逝她，require對象的一個實現(xiàn)會作為一個參數(shù)傳遞給回調(diào)函數(shù)，因此睬捶，可以require依賴和其他模塊提供下一步的執(zhí)行黔宛。 - 參數(shù)3：chunk名稱
多個路由指定相同的chunkName，會合并打包成一個js文件
