vue路由的異步加載(懶加載)方法。

lncwwn 發布于2019-08-23 11:31 / 774人閱讀

摘要：所以我們就需要把某些路由用異步加載懶加載的方式進行加載先來看正常的加載方式下面是第一種異步加載方法下面是第二種異步加載方法因為我們公司的項目整個就是用結合的方式搭建的。

vue本身不多介紹。直接說問題，因為vue的所有路由都是加載在一個app.js里的，如果項目巨大，那么首頁加載會是災難。所以我們就需要把某些路由用異步加載(懶加載)的方式進行加載.

1.先來看正常的加載方式

import Login from "@/components/pages/signIn/signIn";

export default new Router({
  routes: [ {
      path: "/login",
      component: Login,
    }]
});

2.下面是第一種異步加載方法

export default new Router({
  routes: [ {
      path: "/login",
      component: resolve=>require(["@/components/pages/signIn/signIn"],resolve),
    }]
});

3.下面是第二種異步加載方法(因為我們公司的項目整個就是用vue結合webpack的方式搭建的。所以這個方法直接使用是沒問題的。如果只是部分的界面使用vue的，可能試一下才能確定能不能用，可能要考慮import能否支持(轉化)的問題，畢竟這是ES6新特性)

export default new Router({
  routes: [ {
      path: "/login",
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});

云服務器 GPU云服務器異步加載js的方法 js實現數據的懶加載圖片懶加載懶加載異常

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97068.html

Vue.js路由懶加載[譯]

摘要：所以，那些使用較少的路由組件不必打包進里，只需要在路由被訪問時按需加載。寫起來像這樣空數組用來指定該路由組件需要加載的依賴不過，你最好不要使用這種包裹起來的寫法，因為會使用靜態分析來檢測和分割塊。作者：Joshua Bemenderfer 原文地址: lazy-loading-routes 譯者：jeneser 當你的SPA（單頁應用程序）變得復雜時，打包構建后的Javascript...

beita 2019-08-21 11:54 評論0 收藏0
vue的路由懶加載和組件的按需加載

摘要：懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。路由的懶加載按需加載的寫法效果按需加載會在頁面第一次請求的時候，把相關路由組件塊的添加上非按需加載則會把所有的路由組件塊的包打在一起。當業務包很大的時候建議用路由的按需加載懶加載。懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。在單頁應用中，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要...

Lucky_Boy 2019-08-21 16:50 評論0 收藏0
使用Webpack的代碼分離實現Vue懶加載（譯文）

摘要：當一個的項目體積變得十分龐大的時候，使用的代碼分離功能將，或的代碼進行分離并按需加載，會極大的提高的首屏加載速度。如果我們使用函數在中返回模塊作為載荷，就實現了懶加載。當一個Vue的項目體積變得十分龐大的時候，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進行分離并按需加載，會極大的提高App的首屏加載速度。 showImg(https:...

SmallBoyO 2019-08-23 10:42 評論0 收藏0