vue实现路由懒加载几种方式

一、为什么需要路由懒加载

vue在项目打包之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。

使用路由懒加载可以分割代码，提高初始页的加载效率。

二、路由懒加载的方式

1、使用ES6的import ( ) –推荐使用

const 组件名 = ( ) => import(‘组件路径’)

(下面代码，没有指定WebpackChunkName，每个组件打包成一个js文件)

const home = () => import('../view/home')

(下面代码，指定了相同的webpackChunkName名’testDom‘，会合并打包成一个js文件)

const home = () => import(/* webpackChunkName: 'testDom' */ '../view/home')
const login= () => import(/* webpackChunkName: 'testDom' */ '../view/login')

2、使用vue异步组件resolve

const 组件名 = resolve => require([‘组件路径’],resolve)

(这种情况下一个组件生成一个js文件)

const home = resolve => require(['../view/home'],resolve)

3、webpack提供的require.ensure( )

这种模式也可以通过参数中的webpackChunkName将js分开打包。
const 组件名 = resolve => require.ensure([], () => resolve(require(‘组件路径’)), ‘webpackChunkName’)

const home = resolve => require.ensure([], () => resolve(require('../view/home')), 'testDom')