@vue/cli项目 路由懒加载的实现以及prefetch预加载问题

目录

什么是懒加载？

为什么需要懒加载？

1 . vue异步组件技术 ==== 异步加载 

非懒加载：​

          懒加载：

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

3.webpack提供的require.ensure() 

4.路由懒加载代码实现后，由此引出的prefetch预加载问题使首屏加载变慢

5.prefetch预加载的解决办法

---

什么是懒加载？

        把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

为什么需要懒加载？

        像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

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

1 . 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) }

非懒加载：

懒加载：