Vue项目路由按需加载（懒加载）三种方式解析

2024-01-23 04:30:50

作为一名资深的Vue开发者，路由按需加载（懒加载）是我经常用到的一种技术。它可以帮助我减少包的大小，从而提高应用程序的性能。在本文中，我将介绍三种常见的Vue项目路由按需加载方式，并附有实际应用实例，希望能对大家有所帮助。

Vue异步组件

Vue异步组件是一种声明式的方式来实现路由按需加载。它使用<component>标签的async属性来指定要加载的组件。当组件第一次被渲染时，Vue会自动加载它。

// route.js
import Home from './Home.vue'
import About from './About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

<!-- App.vue -->
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import routes from './route.js'

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
</script>

es路由懒加载

es路由懒加载是另一种实现路由按需加载的方式。它使用ES6的import()函数来加载组件。当组件第一次被渲染时，Vue会自动加载它。

// route.js
const Home = () => import('./Home.vue')
const About = () => import('./About.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

<!-- App.vue -->
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import routes from './route.js'

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
</script>

require.ensure

require.ensure是webpack提供的一种实现路由按需加载的方式。它使用require.ensure()函数来加载组件。当组件第一次被渲染时，Webpack会自动加载它。

// route.js
const Home = () => require.ensure([], () => {
  return import('./Home.vue')
})
const About = () => require.ensure([], () => {
  return import('./About.vue')
})

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

<!-- App.vue -->
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import routes from './route.js'

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
</script>