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

客官°小女子只卖身不卖艺 2022-12-27 06:27 105阅读 0赞

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

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 条评论，105人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue路由懒加载

*一、当打包构建应用时，Javascript包会变得很大，影响页面加载。** **二、懒加载就是将不同路由对应的组件分隔成不同的代码块，然后当路由被访问时，才加载对应...

偏执的太偏执、/ 2024年04月17日 14:31/ 0 赞/ 42 阅读

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

一、为什么需要路由懒加载 vue在项目打包之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着

客官°小女子只卖身不卖艺/ 2022年12月27日 06:27/ 0 赞/ 106 阅读

相关 vue 路由懒加载

vue路由懒加载resolve方式与import方式路由懒加载使用路由懒加载是为了更好的用户体验，首屏组件加载的速度快一点，解决了白屏的问题懒加载就是延迟加

末蓝、/ 2022年11月10日 05:37/ 0 赞/ 155 阅读

相关 vue-router路由懒加载以及三种实现方式

1. 什么是路由懒加载？也叫延迟加载，即在需要的时候进行加载，随用随载。 1. 官方解释： 1：当打包构建应用时，JavaScript 包会变得非常

小灰灰/ 2022年11月03日 01:35/ 0 赞/ 180 阅读

相关 vue项目实现路由按需加载(路由懒加载)的3种方式

想获取更多的前端技术-请专注公众号：胖梅web前端 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

梦里梦外;/ 2022年03月12日 14:24/ 0 赞/ 237 阅读

相关 vue路由懒加载，vue router 导入方式

一：直接导入 import Hello from '@/components/Hello' @是在webpack.base.conf.js 配置： ![复制代码

一时失言乱红尘/ 2022年01月22日 01:25/ 0 赞/ 356 阅读

相关 Vue路由懒加载

当vue打包过大时可以用路由懒加载来减小包的体积路由懒加载是通过es6的一种写法没有懒加载是这样的 ![watermark_type_ZmFuZ3p

超、凢脫俗/ 2022年01月12日 07:09/ 0 赞/ 396 阅读

相关 vue路由加懒加载的方式

1、当一个vue项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况，也给用户更好的体验。这样就是v

女爷i/ 2021年12月07日 09:55/ 0 赞/ 285 阅读

相关 vue：路由中组件懒加载的两种方式

{ path: '/parent', name: 'parent', component: () => i

青旅半醒/ 2021年11月29日 13:52/ 0 赞/ 324 阅读

相关 Vue路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高

谁践踏了优雅/ 2021年09月29日 02:26/ 0 赞/ 404 阅读