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

 

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue实现路由懒加载几种方式

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活