非懶加載

import List from '@/components/list.vue' const router = new VueRouter({routes: [{ path: '/list', component: List }] })

方案一(常用)

const List = () => import('@/components/list.vue') const router = new VueRouter({routes: [{ path: '/list', component: List }] })

方案二

const router = new Router({routes: [{path: '/list',component: (resolve) => {// 這里是你的模塊 不用import去引入了require(['@/components/list'], resolve)}}] })

方案三

使用webpack的require.ensure技術，也可以實現按需加載。 這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。

// r就是resolve const List = r => require.ensure([], () => r(require('@/components/list')), 'list'); // 路由也是正常的寫法 這種是官方推薦的寫的 按模塊劃分懶加載 const router = new Router({routes: [{path: '/list',component: List,name: 'list'}] }))

總結

以上是生活随笔為你收集整理的react.lazy 路由懒加载_Vue面试题： 如何实现路由懒加载？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。