一、什么是路由懒加载？
路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（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 应用体验。
