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

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')
Logo

前往低代码交流专区

更多推荐