VUE项目路由懒加载

路由懒加载

我们一般情况下都是在router下面的index.js文件中,使用下面的代码方式来引入模块

import User from '@/components/user/user'

然后,等项目开发完成,需要打包上线,我们在打包时候会发现下面的界面:

然后打包完成 的dist文件夹下面按照上图的路径可以找到这两个文件:

有这些可以看出来,我们是将所有的js文件全部整合到这几个以.js为结尾的文件了,所以导致文件特别大,第一次打开系统时候加载比较慢;那又没有什么好的解决办法呢? 答案当然是肯定的啦~
那就是路由懒加载
其实实现起来很简单,就是要把模块引入方式改变一下

// import User from '@/components/user/user' 通常写法
const User = resolve => require(['@/components/user/user'], resolve) // 路由懒加载写法

修改完之后我们再次进行打包,然后你发现界面就这样的:

出现好多js文件,它是把每个模块的JS分别打包一个JS文件,然后按需引入.这样就能保证系统在第一次加载时快了.
想要知道路由懒加载的原理还要从webpack打包工具了解了,想深入学习的小伙伴后续会更新哦~