最近研究了vue性能优化涉及到vue异步组件和懒加载。一番研究得出如下的解决方案

原理：利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件需要时候才下載。

首先是组件创建四个组件分别命名为first、second、three和four；内容如下

vue路由懒加载不生效index.js代码，异步组件方式有两种代码中的方案1和方案2；注意：方案1需要添加插件

 
 
 { //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面 
 path:'/', //重定向就是给它重新指定一个方向，加载一个组件； 
//这里require组件路径根据自己的配置引入 
 
 

最后如果想要让build之后的代码更便于识别，配置webpack代码

注意方案1和方案2只能用一个然後运行项目试验一下就可以了。

以上就是本文的全部内容希望对大家的学习有所帮助，也希望大家多多支持脚本之家

一、为什么要使用vue路由懒加载不苼效懒加载

　　为给客户更好的客户体验首屏组件加载速度更快一些，解决白屏问题

　　懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载

　　常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

1、未用懒加载，vue中vue路由懒加载不生效代码如下

2、vue異步组件实现懒加载

　　　　（不加 { } 表示直接return）

 相同与vue路由懒加载不生效懒加载，

vue路由懒加载不生效和组件的常用两种懒加载方式：

1、vue異步组件实现vue路由懒加载不生效懒加载

2、es提出的import(推荐使用这种方式)