Vue 的懶載入

要吃早餐發表於2018-03-28
Vue

vue開發中，當頁面內容比較多的時候，我們希望對有些元件進行懶載入。下面介紹三種方法

  • 使用 System.import(url);
components: {
    'yunnex-logistics': () => System.import('./logistics-pages/not-opend.vue')
},
複製程式碼

這個方法，現在很少用了，以後可能會廢除。

  • 藉助babel-plugin-syntax-dynamic-import 外掛，使用 es7 的方法。 import();

    先下載 babel-plugin-syntax-dynamic-import 外掛，然後在.babelrc 設定。

{
  "presets": [
    [
      "env", { "modules": false } 
    ]
  ],
  "plugins": ["syntax-dynamic-import"]  // 配置了這個就可以使用 import() 函式。
}
複製程式碼

在頁面就可以這樣引入元件

components: {
    yunnexOpenLogistics: () => import('../../components/open-logistics-server.vue')
},
複製程式碼
  • 使用 require
components: {
    yunnexOpenLogistics: resolve => require(['../../components/open-logistics-server.vue'], resolve)
},
或
components: {
    yunnexOpenLogistics: () => require.ensure([], () => require('../../components/open-logistics-server.vue') )
},
複製程式碼

這個方法，相容性最好，不用配置 babel。

配置非同步元件實現懶載入的問題分析

  • 多次呼叫非同步元件，會不會導致瀏覽器多次請求載入？

    不會的，首次需要元件時，瀏覽器會去載入，載入完後會快取起來，供後面用。

  • 如果在多個非同步載入頁面，分別同步與非同步載入同一個元件，是否會造成資源重用？

    會的，同步的元件會直接打包進頁面，而非同步元件會打包進單獨的 chunk ; 解決方法就是，需要非同步載入的元件，就全部使用非同步載入的方式。

相關文章