标签：end callback mda div pac call 路由 动态 code
使用异步组件加载，打包的时候会将每个组件分开打包到不同的js文件中：
{path: ‘/index‘, name: ‘index‘,
meta:{
title:‘首页‘,
requireAuth:true
},
/*这是异步加载组件，当你访问时 ，才会加载 ,vue-router中，require代替import解决vue项目首页加载时间过久的问题*/
component: resolve => {
clearTimeout(_pageTimer);
//这里是设置定时器，超过时间，如果没有被停止，则输出“网络加载超时”
_pageTimer = setTimeout(function () {
tipsCallback();//作用输出字符串提示
},timeout);
require([‘@/page/index/index.vue‘], function (component) {
//在组件加载完后，如果定时器存在，则清除定时器。
if(_pageTimer){clearTimeout(_pageTimer);}
resolve(component)
})
}},
官方推荐使用这种方式，注意如果你希望在Vue router 的路由组件中使用这种语法的话，你必须使用 Vue Router 2.4.0+ 版本。
{ path: ‘/index‘, component: () => import(‘@/page/index/index‘), name: ‘首页‘ },
语法：require.ensure(dependencies: String[], callback: function(require), chunkName: String)
这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。
当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。
chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
{ path: ‘/index‘, component: r => require.ensure([], () => r(require(‘@/pages/index/index‘)), ‘index‘), meta: { title: ‘首页‘ } }
这里只是做记录使用。
vue--按需加载的3种方式（解决网页首次加载速度慢的问题）
标签：end callback mda div pac call 路由 动态 code
原文地址：https://www.cnblogs.com/xujianwu/p/11429737.html
