什么是路由懒加载
当打包构建应用时,js包会变得非常大,影响页面加载
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,使加载组件更加高效,随用随加载
传统的路由加载
import Home from '@/pages/Home'
{
path: '/home',
component: Home,
meta: { show: true }
},
使用ES6推荐方式import()进行懒加载
import()是一种在JavaScript中进行懒加载的方法。
它允许在需要时动态地加载模块,而不是在应用程序启动时一次性加载所有模块。
这对于优化应用程序的性能和减少初始加载时间非常有帮助。
import()函数返回一个Promise对象
{
path: '/home',
component: ()=> import ('@/pages/Home'),
meta: { show: true }
},