在vue項目中，一般引入組件都是用import

import 組件名 from '組件路徑'

webpack在npm run build的時候會打包成一個整個的js文件，如果頁面一多，會導致這個文件非常大，加載緩慢，為了解決這個問題，需要將他分成多個小文件，而且還要實現異步按需加載，即用到了再加載，而不用一股腦全部加載

1. require.ensure()

webpack提供的require.ensure(),這樣可以實現按需加載，并且你可以將多個相同類的組件打包成一個文件，只要給他們指定相同的chunkName即可，如示例中的demo將會打包成一個文件

{path: '/promisedemo',name: 'PromiseDemo',component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo') }, {path: '/hello',name: 'Hello',// component: Hellocomponent: r => require.ensure([], () => r(require('../components/Hello')), 'demo') }

2. Vue的異步組件技術，這種方法可以實現按需加載，并且一個組件會打包成一個js文件

{path: '/promisedemo',name: 'PromiseDemo',component: resolve => require(['../components/PromiseDemo'], resolve) }

3. import（）

使用import關鍵字引入,這個import(‘XXX’)函數會返回一個Promise對象;參考資料vue-router路由懶加載

{path: '/',name: 'index',component:() => import('@/views/index/index')}

總結

以上是生活随笔為你收集整理的vue 路由按需加载的全部內容，希望文章能夠幫你解決所遇到的問題。

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