vue的路由配置文件(routers.js),一般使用import引入的寫法,當項目打包時路由里的所有component都會打包在一個js中,在項目剛進入首頁的時候,就會加載所有的組件,所以導致首頁加載較慢,而用require會將component分別打包成不同的js,按需加載,訪問此路由時才會加載這個js,所以就避免進入首頁時加載內容過多。
require: 運行時調用,理論上可以運用在代碼的任何地方,import:編譯時調用,必須放在文件開頭
示例:
import寫法:
import userCenter from '@/page/usercenter/index.vue' export default [ { path: '/userCenter', name: 'user-center', component: userCenter }, { path: '/news/detail', name: 'news-detail', component: () => import('@/page/news/detail.vue') } ]
require寫法:
export default [ { path: '/userCenter', name: 'user-center', component: resolve => require(['@/page/userCenter/index.vue'], resolve) }, { path: '/news/detail', name: 'news-detail', component: () => resolve => require(['@/page/news/detail.vue'], resolve) } ]