一、什么是路由懒加载？
路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（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
三、把组件按组分块
1.使用 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 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
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',
],
},
},
},
},
})
除了路由懒加载，我们还可以与其他优化策略相结合，如代码分割等，实现更完善的性能优化。通过灵活应用这些技术，我们可以为用户提供更快速、流畅的 Web 应用体验。
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
