vue懒加载的方式有哪几个？
发布时间：2022-04-07 15:42:53 所属栏目：语言 来源：互联网
导读：本文主要给大家解的是关于vue懒加载的三种方式，包括vue异步组件、ES6的import()和webpack的require.ensure()，下本有具体代码，具有一定的参加价值，大家可以参考。 vue异步组件 component:resolve={reuqire([需要加载的路由地址]),resolve) import Vue fro
|
本文主要给大家解的是关于vue懒加载的三种方式，包括vue异步组件、ES6的import()和webpack的require.ensure()，下本有具体代码，具有一定的参加价值，大家可以参考。 vue异步组件 component:resolve=>{reuqire([‘需要加载的路由地址']),resolve) import Vue from 'vue'; import Router from 'vue-router'; const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve} Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] }) ES6的import() import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld=()=>import('@/components/HelloWorld'); Vue.use('Router') export default new Router({ routes:[{ {path:'./', name:'HelloWorld', component:HelloWorld } }] }) webpack的require.ensure() require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。 第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。第三个参数是错误回调。第四个参数是单独打包的chunk的文件名 总结 关于vue懒加载三种方式的介绍就到这，希望对大家学习有一定的帮助，想要了解更多vue懒加载内容大家可以继续关注其他相关文章。 （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
