为啥需要懒加载
当一个vue项目很大的时候,使用webpack打包会导致第一次加载时间太快,这样可以导致首次加载白屏情况,给用户更好的体验,即vue路由的懒加载。
非懒加载方式实现
import HelloWorld from '@/components/HelloWorld'
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
懒加载实现两种方式
vue懒加载主要有两种方式,使用 ES中的import 和 vue异步组件
1.使用ES种的import方式实现
const HelloWorld = () => import("@/components/HelloWorld");
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}]
})
2.Vue异步组件方式实现
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: resolve => { require(['@/components/HelloWorld'],resovle); }
}]