vue按需加载实例详解
vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。这种方式下一个组件生成一个js文件
用例：
{
path:'/promisedemo',name:'PromiseDemo',component:resolve=>require(['../components/PromiseDemo'],resolve)
}
es提案的import()(推荐)
webpack官方文档：webpack中使用import()
vue官方文档：路由懒加载(使用import())
用例：
//下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。constImportFuncDemo1=()=>import('../components/ImportFuncDemo1')constImportFuncDemo2=()=>import('../components/ImportFuncDemo2')//下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。//constImportFuncDemo=()=>import(/*webpackChunkName:'ImportFuncDemo'*/'../components/ImportFuncDemo')//constImportFuncDemo2=()=>import(/*webpackChunkName:'ImportFuncDemo'*/'../components/ImportFuncDemo2')exportdefaultnewRouter({routes:[{path:'/importfuncdemo1',name:'ImportFuncDemo1',component:ImportFuncDemo1},{path:'/importfuncdemo2',name:'ImportFuncDemo2',component:ImportFuncDemo2}]})
webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
举例如下：
{path:'/promisedemo',name:'PromiseDemo',component:resolve=>require.ensure([],()=>resolve(require('../components/PromiseDemo')),'demo')},{path:'/hello',name:'Hello',//component:Hellocomponent:resolve=>require.ensure([],()=>resolve(require('../components/Hello')),'demo')}
以上就是本次介绍的全部知识点内容，感谢大家的学习和对毛票票的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。