首頁 > web前端 > js教程 > 主體

如何使用Webpack的程式碼分離實作Vue的載入

不言
發布: 2018-08-06 13:48:12
原創
1539 人瀏覽過

這篇文章帶給大家的內容是關於如何使用Webpack的程式碼分離實現Vue的加載,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

當一個Vue的專案體積變得十分龐大的時候,使用Webpack的程式碼分離功能將會Vue ComponentsroutesVuex 的程式碼進行分離並按需加載,會極大的提高App的首屏加載速度。

在Vue的專案中,我們可以在三種不同的情況下使用懶載入和程式碼分離功能:

  • Vue元件,也稱為非同步元件

  • Vue-Router

  • Vuex

三者的共同點都是使用的動態import ,這在Webpack的第二個版本就開始被支援。

在Vue元件中進行懶載入

#在Eggheads中有關於使用Vue非同步元件實作按需載入元件的解釋。

實作非同步元件只需要使用import函數去註冊元件即可:

Vue.component('AsyncCmp', () => import('./AsyncCmp'))
登入後複製

也可以使用本機註冊元件的方式:

new Vue({
  // ...
  components: {
    'AsyncCmp': () => import('./AsyncCmp')
  }
})
登入後複製

使用箭頭函數指向import函數,Vue將會在需要該元件的時候才執行請求載入該元件的程式碼。

如果匯入的元件是使用命名的方式進行匯出的,你可以在Promise的回傳值中使用物件解構的方式實作按需載入元件。以下是載入KeenUI的 UiAlert元件的範例:

components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
登入後複製

在Vue router中進行懶載入

Vue router在原生支援懶載入。和懶載入元件的方式一樣,都是使用import函數。例如我們想在/login這個路由下懶載入Login元件。

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})
登入後複製

在Vuex中進行懶載入

Vuex的registerModule方法允許我們動態的建立Vuex的模組。如果我們使用import函數在Promise中傳回模組作為載重(payload),就實作了懶載入。

const store = new Vuex.Store()

...

// 假设我们想加载'login'这个模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})
登入後複製

總結

在Vue Webpack中是懶載入十分簡單。趕快使用上面學習到的方法將你的Vue專案進行程式碼分離並在它們需要的時候進行按需加載,這樣可以顯著減少應用首屏加載的時間。

相關推薦:

系統歸納JS常用的方法整理(收藏)

webpack4和react 建立多頁面應用程式的實作方法

以上是如何使用Webpack的程式碼分離實作Vue的載入的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!