vue48 —— vue-router-- 路由的懒加载

本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103259509

本文介绍了在Vue项目中如何实现路由的懒加载，以减小打包后应用的体积。详细讲述了三种方法：结合Vue的异步组件和Webpack、AMD写法以及使用ES6的动态导入。通过这些方法，可以按需加载路由对应的组件，提高页面加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包构建应用时，js包会很大，影响页面加载

引用后直接使用：

src - index.js：

import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path:'/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userid',  
    component: User
  }
]

打包后的dist文件夹：
在这里插入图片描述
app.js 是开发代码（业务代码）
manifest.js 存放的是底层支撑
verdor.js 第三方框架代码

路由懒加载：

方式一：结合vue的异步组件和webpack （了解）

const Home = resolve => {require.ensure(['../components/Home.vue'],() => {resolve(require('../components/Home.vue'))})}

方式二：AMD写法（了解）

const About = resolve => require(['../components/About.vue'],resolve)

方式三：ES6

const User = () => import('../components/User.vue')

src - index.js：

...
const About =  () => import('../components/About')
const User =  () => import('../components/User')
...
const routes = [
  {
    path: '/',
    redirect: '/home' 
  },
  {
    path:'/home',
    // component: Home 引用后直接使用
    component: () => import('../components/Home')  // 路由懒加载
  },
  {
    path: '/about',
   component: About
  },
  {
    path: '/user/:userid', 
    component: User
  }
]