本文主要给大家解的是关于vue懒加载的三种方式，包括vue异步组件、ES6的import()和webpack的require.ensure()，下本有具体代码，具有一定的参加价值，大家可以参考。

       未使用懒加载

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
Vue.use(Router);
export default new Router({
routes:[
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
]
}) 

       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的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
}) 

       总结

       关于vue懒加载三种方式的介绍就到这，希望对大家学习有一定的帮助，想要了解更多vue懒加载内容大家可以继续关注其他相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 利用JS制作无缝轮播图的过程和思路是什么

  这篇文章主要为大家详细介绍了如何利用JavaScript语言实现无缝轮播功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript中用set怎样实现数组去重？

  JavaScript中用set怎样实现数组去重？JavaScript实现数组去重的方法有很多，这里我们主要介绍的用set进行数组去重的方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• ElementUI加载树形数据的过程是什么

  这篇文章主要为大家详细介绍了Vue组件库ElementUI实现表格加载树形数据教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScrip怎样判断回文数，实现方法和思路是怎样？

  这篇文章我们来了解JavaScrip怎样判断回文数的相关内容，下文分享的示例是利用数组转为字符串数组，再用reserve()翻转数组，然后对于是否相等的方法来判断，下文我们来详细的了解看看实现思路及方法，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

• JS事件委托、URL合法判断和全排列的实现是怎样

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了事件委托、判断URL是否合法以及全排列的相关内容，下面一起来看一下，希望对大家有帮助。