Vue的三种按需加载方式

常见面试题

作者 Trekerz 日期 2019-11-29
Vue的三种按需加载方式

一、vue异步组件技术

  • vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况下一个组件生成一个js文件。
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}

二、es提案的import()

// 没有指定webpackChunkName,每个组件打包成一个js文件;
// 指定了相同的webpackChunkName,会合并打包成一个js文件
{
path: '/importfuncdemo1',
name: 'ImportFuncDemo1',
component: import('../components/ImportFuncDemo1')
}

三、webpack提供的require.ensure()

{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},

参考资料:

https://segmentfault.com/a/1190000011519350

https://segmentfault.com/a/1190000013630936


–end–