路由組件按需加載的幾種方法
阿新 • • 發佈:2017-10-25
推薦 require 自動 文件夾 demo nta pre span 還要
在Vue項目中,一般使用vue-cli構建項目後,我們會在Router文件夾下面的index.js裏面引入相關的路由組件,如:
import Hello from ‘@/components/Hello‘ import Boy from ‘@/components/Boy‘ import Girl from ‘@/components/Girl‘
這樣做的結果就是webpack在npm run build的時候會打包成一個整個的js文件,如果頁面一多,會導致這個文件非常大,加載緩慢,為了解決這個問題,需要將他分成多個小文件,而且還要實現異步按需加載,即用到了再加載,而不用一股腦全部加載
1.webpack提供的require.ensure(),這樣可以實現按需加載,並且你可以將多個相同類的組件打包成一個文件,只要給他們指定相同的chunkName即可,如示例中的demo將會打包成一個文件。
{ path: ‘/promisedemo‘, name: ‘PromiseDemo‘, component: r => require.ensure([], () => r(require(‘../components/PromiseDemo‘)), ‘demo‘) }, { path: ‘/hello‘, name: ‘Hello‘, // component: Hello component: r => require.ensure([], () => r(require(‘../components/Hello‘)), ‘demo‘) }
2.Vue的異步組件技術,這種方法可以實現按需加載,並且一個組件會打包成一個js文件
{ path: ‘/promisedemo‘, name: ‘PromiseDemo‘, component: resolve => require([‘../components/PromiseDemo‘], resolve) }
3.es提案的import(),也是我推薦的方法
首先,可以將異步組件定義為返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件本身):
const Foo = () => Promise.resolve({ /* 組件定義對象 */ })
第二,在 Webpack 2 中,我們可以使用動態 import語法來定義代碼分塊點 (split point):
import(‘./Foo.vue‘) // 返回 Promise
註意:如果您使用的是 Babel,你將需要添加 syntax-dynamic-import
插件,才能使 Babel 可以正確地解析語法。
結合這兩者,這就是如何定義一個能夠被 Webpack 自動代碼分割的異步組件。
const Foo = () => import(‘./Foo.vue‘)
這樣做的結果是每個組件都會打包成一個js文件,有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用 命名 chunk,一個特殊的註釋語法來提供 chunk name
const Foo = () => import(/* webpackChunkName: "group-foo" */ ‘./Foo.vue‘)
路由組件按需加載的幾種方法