[Vue] Lazy Load a Route by using the Dynamic Import in Vue.js
By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the non-critical routes is one of the points of the PRPL pattern.
This lesson will show you how you can use the dynamic import to lazy load non-critical routes.
When we using Vue dynamice import syntax:
const router = new VueRouter({ routes: [ { path: '/images', component: () => import('./components/Images') }, { path: '/images/:id', component: () => import('./components/Details'), props: true }, { path: '/', redirect: '/images' } ] })
To enable that, we need to install:
npm install babel-plugin-syntax-dynamic-import
.babelrc:
{ "plugins": ["syntax-dynamic-import"] }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步