如何制作微信小程序_解析vue路由异步组件和懒加

解析vue路由异步组件和懒加载案例       这篇文章主要介绍了解析vue路由异步组件和懒加载案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

案例:

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

first
 template 
 div 我是第一个页面 /div 
 /template 

路由index.js代码,异步组件方式有两种,代码中的方案1和方案2;注意:方案1需要添加插件

import Vue from 'vue'
import VueRouter from 'vue-router'
/*import First from '@/components/First' 
import Second from '@/components/Second'*/

const first =()= import(/* webpackChunkName: "group-foo" */ "../components/first.vue"); const second = ()= import(/* webpackChunkName: "group-foo" */ "../components/second.vue"); const three = ()= import(/* webpackChunkName: "group-fooo" */ "../components/three.vue"); const four = ()= import(/* webpackChunkName: "group-fooo" */ "../components/four.vue"); //方案2 const first = r = require.ensure([], () = r(require('../components/first.vue')), 'chunkname1') const second = r = require.ensure([], () = r(require('../components/second.vue')), 'chunkname1') const three = r = require.ensure([], () = r(require('../components/three.vue')), 'chunkname2') const four = r = require.ensure([], () = r(require('../components/four.vue')), 'chunkname2')
//最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。

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

运行 npm run build结果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。