vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法

一、什么是路由懒加载？

路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（SPA）中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

在 Vue.js 中，懒加载可以帮助你减小应用的初始加载大小，并在路由被访问时再加载对应的组件。这可以通过使用 Vue 的异步组件和 Webpack 的代码分割功能来实现。

官方解释：

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

路由懒加载做了什么事情？

主要作用是将路由对应的组件打包成一个个的js代码块
只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

二、实现路由懒加载的方法？

方法1.Vue异步加载技术：

在vue-router配置路由时，将需要懒加载的组件配置为一个异步组件。
在异步组件的加载函数中，使用require函数按需加载组件代码。
将加载后的组件返回给vue-router，使其能够正确渲染对应的页面。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [{
            path: '/home',
            name: 'home',
            component: resolve => require(['@/components/home'], resolve)
        },
        {
            path: '/about',
            name: 'about',
            component: resolve => require(['@/components/about'], resolve)
        }
    ]
})
export default router

方法2.ES6推荐方式imprort ()----推荐使用

在需要懒加载的组件文件中，使用ES6的import()语法将组件导入。
在import()中指定需要加载的组件文件路径，并使用动态导入的方式将其加载。
动态导入的组件会被webpack自动分割到一个单独的文件中，按需加载。
推荐使用这种方式，但是注意wepack的版本>2.4

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 下面没有指定webpackChunkName，每个组件打包成一个js文件。
// const Home = () => import('@/views/Home.vue')
// const About = () => import('@/views/About.vue')

// 下面指定了相同的webpackChunkName，会合并打包成一个js文件。
const Home = () => import( /* webpackChunkName: 'ImportFuncDemo' */ '@/views/Home.vue')
const About = () => import( /* webpackChunkName: 'ImportFuncDemo' */ '@/views/About.vue')

const router = new VueRouter({
    routes: [{
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/about',
            name: 'About',
            component: About
        }
    ]
})
export default router

方法3.webpack提供的require.ensure()实现懒加载：

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。

require.ensure()的语法：

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

参数：

第一个参数dependencies是一个数组，代表了当前require进来的模块的一些依赖；
第二个参数callback就是一个回调函数。其中需要注意的是，这个回调函数有一个参数require，通过这个require就可以在回调函数内动态引入其他模块。值得注意的是，虽然这个require是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则webpack就无法静态分析的时候处理它；
第三个参数errorCallback比较好理解，就是处理error的回调；
第四个参数chunkName则是指定打包的chunk名称。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [{
            path: '/',
            name: 'Home',
            component: (resolve) => {
                require.ensure(['@/views/Home.vue'], () => {
                    resolve(require('@/views/Home.vue'))
                })
            }
        },
        {
            path: '/about',
            name: 'About',
            component: (resolve) => {
                require.ensure(['@/views/About.vue'], () => {
                    resolve(require('@/views/About.vue'))
                })
            }
        }
    ]
})
export default router

三、把组件按组分块

使用 webpack

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)：

const UserDetails = () =>
    import( /* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
    import( /* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
    import( /* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

使用 Vite

在Vite中，你可以在rollupOptions下定义分块：

// vite.config.js
export default defineConfig({
    build: {
        rollupOptions: {
            // https://rollupjs.org/guide/en/#outputmanualchunks
            output: {
                manualChunks: {
                    'group-user': [
                        './src/UserDetails',
                        './src/UserDashboard',
                        './src/UserProfileEdit',
                    ],
                },
            },
        },
    },
})

除了路由懒加载，我们还可以与其他优化策略相结合，如代码分割等，实现更完善的性能优化。通过灵活应用这些技术，我们可以为用户提供更快速、流畅的 Web 应用体验。