“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）

vue异步组件
es提案的import()
webpack的require,ensure()

vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件

/* vue异步组件技术 */
{path: '/home',name: 'home',component: resolve => require(['@/components/home'],resolve)
},{path: '/index',name: 'Index',component: resolve => require(['@/components/index'],resolve)
},{path: '/about',name: 'about',component: resolve => require(['@/components/about'],resolve)
}

组件懒加载方案二路由懒加载(使用import)

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{path: '/about',component: About
}, {path: '/index',component: Index
}, {path: '/home',component: Home
}

webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */
{path: '/home',name: 'home',component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {path: '/index',name: 'Index',component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {path: '/about',name: 'about',component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）相关推荐

“约见”面试官系列之常见面试题之第一百零七篇之vue的作用（建议收藏）
Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容 ...
“约见”面试官系列之常见面试题之第一百零四篇之vue优点（建议收藏）
vue的优点: 1.轻量级框架只关注视图层,是一个构建数据的视图集合,大小只有几十kb Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统 2.简单易学国人开发,中文文档,不存在语言障 ...
“约见”面试官系列之常见面试题之第一百零六篇之css只在当前组件中起作用（建议收藏）
方法很简单,在组件中的style前面加上scoped就可以了,示例:
“约见”面试官系列之常见面试题之第一百零五篇之v-if与v-show（建议收藏）
相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还 ...
“约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式（建议收藏）
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个 ...
“约见”面试官系列之常见面试题之第一百零一篇之vue-router传参（建议收藏）
vue-router传递参数分为两大类编程式的导航 router.push 声明式的导航 <router-link> 编程式的导航 router.push 编程式导航传递参数有两种类型: ...
“约见”面试官系列之常见面试题之第六十九篇之document.ready和onload的区别（建议收藏）
document.ready和onload的区别为:加载程度bai不同du.执行次数不同.执行速度zhi不同. 一.加载程度不同 1.document.ready:在DOM加载完成dao后就可以可以对 ...
“约见”面试官系列之常见面试题之第六十六篇之事件委托的原理和实现（建议收藏）
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...
“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...

“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）

“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）相关推荐

最新文章

热门文章