一、什么是路由懶加載？

路由懶加載，也叫延遲加載或按需加載，是在需要的時(shí)候進(jìn)行加載的一種技術(shù)。在單頁面應(yīng)用（SPA）中，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會異常的大，造成進(jìn)入首頁時(shí)需要加載的內(nèi)容過多，時(shí)間過長，會出現(xiàn)長時(shí)間的白屏，即使做了loading也不利于用戶體驗(yàn)。而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)。

在 Vue.js 中，懶加載可以幫助你減小應(yīng)用的初始加載大小，并在路由被訪問時(shí)再加載對應(yīng)的組件。這可以通過使用 Vue 的異步組件和 Webpack 的代碼分割功能來實(shí)現(xiàn)。

官方解釋：
當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會變得非常大，影響頁面加載。
如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對應(yīng)組件，這樣就更加高效了。
路由懶加載做了什么事情？
主要作用是將路由對應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊
只有在這個(gè)路由被訪問到的時(shí)候，才加載對應(yīng)的組件，否則不加載！

二、實(shí)現(xiàn)路由懶加載的方法？

方法1.Vue異步加載技術(shù)：

在vue-router配置路由時(shí)，將需要懶加載的組件配置為一個(gè)異步組件。
在異步組件的加載函數(shù)中，使用require函數(shù)按需加載組件代碼。
將加載后的組件返回給vue-router，使其能夠正確渲染對應(yīng)的頁面。

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()語法將組件導(dǎo)入。
在import()中指定需要加載的組件文件路徑，并使用動態(tài)導(dǎo)入的方式將其加載。
動態(tài)導(dǎo)入的組件會被webpack自動分割到一個(gè)單獨(dú)的文件中，按需加載。
推薦使用這種方式，但是注意wepack的版本>2.4

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

// 下面沒有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件。
// const Home = () => import('@/views/Home.vue')
// const About = () => import('@/views/About.vue')

// 下面指定了相同的webpackChunkName，會合并打包成一個(gè)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()實(shí)現(xiàn)懶加載：

vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實(shí)現(xiàn)按需加載。
這種情況下，多個(gè)路由指定相同的chunkName，會合并打包成一個(gè)js文件。
require.ensure可實(shí)現(xiàn)按需加載資源，包括js,css等。他會給里面require的文件單獨(dú)打包，不會和主文件打包在一起。
require.ensure()的語法：

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

參數(shù)：

• 第一個(gè)參數(shù)dependencies是一個(gè)數(shù)組，代表了當(dāng)前require進(jìn)來的模塊的一些依賴；
• 第二個(gè)參數(shù)callback就是一個(gè)回調(diào)函數(shù)。其中需要注意的是，這個(gè)回調(diào)函數(shù)有一個(gè)參數(shù)require，通過這個(gè)require就可以在回調(diào)函數(shù)內(nèi)動態(tài)引入其他模塊。值得注意的是，雖然這個(gè)require是回調(diào)函數(shù)的參數(shù)，理論上可以換其他名稱，但是實(shí)際上是不能換的，否則webpack就無法靜態(tài)分析的時(shí)候處理它；
• 第三個(gè)參數(shù)errorCallback比較好理解，就是處理error的回調(diào)；
• 第四個(gè)參數(shù)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

三、把組件按組分塊

1.使用 webpack

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用命名 chunk，一個(gè)特殊的注釋語法來提供 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 會將任何一個(gè)異步模塊與相同的塊名稱組合到相同的異步塊中。

2.使用 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',
                    ],
                },
            },
        },
    },
})

除了路由懶加載，我們還可以與其他優(yōu)化策略相結(jié)合，如代碼分割等，實(shí)現(xiàn)更完善的性能優(yōu)化。通過靈活應(yīng)用這些技術(shù)，我們可以為用戶提供更快速、流暢的 Web 應(yīng)用體驗(yàn)。
vue中vue-router路由懶加載（按需加載）的作用以及常見的實(shí)現(xiàn)方法