亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue.js路由懶加載[譯]

beita / 2835人閱讀

摘要：所以，那些使用較少的路由組件不必打包進(jìn)里，只需要在路由被訪問時(shí)按需加載。寫起來像這樣空數(shù)組用來指定該路由組件需要加載的依賴不過，你最好不要使用這種包裹起來的寫法，因?yàn)闀?huì)使用靜態(tài)分析來檢測(cè)和分割塊。

作者：Joshua Bemenderfer

原文地址: lazy-loading-routes

譯者：jeneser

當(dāng)你的SPA（單頁(yè)應(yīng)用程序）變得復(fù)雜時(shí)，打包構(gòu)建后的Javascript包會(huì)變得非常大，以至于嚴(yán)重影響頁(yè)面的加載時(shí)間。幸運(yùn)的是：vue-router支持WebPack內(nèi)置的異步模塊加載系統(tǒng)。所以，那些使用較少的路由組件不必打包進(jìn)bundles里，只需要在路由被訪問時(shí)按需加載。
使用

假設(shè)你的路由配置是這樣的：

import MainPage from "./routes/MainPage.vue"
import OtherMassivePage from "./routes/OtherMassivePage.vue"

const routes = [
  { path: "/main", component: MainPage },
  { path: "/other", component: OtherMassivePage }
]

簡(jiǎn)單來說，你可以使用require.ensure來替代import。它能幫你將OtherMassivePage組件以及該組件的所有依賴分割到一個(gè)多帶帶的chunk中去。

現(xiàn)在重啟你的應(yīng)用，你會(huì)發(fā)現(xiàn)并沒有什么改變。但，當(dāng)你打開開發(fā)人員工具，選擇檢查網(wǎng)絡(luò)，再一次訪問/other路徑時(shí)，你會(huì)看到一個(gè)新的文件被加載進(jìn)來。

import MainPage from "./routes/MainPage.vue"
const OtherMassivePage = r => require.ensure([], () => r(require("./routes/OtherMassivePage.vue")))

const routes = [
  { path: "/main", component: MainPage },
  { path: "/other", component: OtherMassivePage }
]

是的，這看起來是有點(diǎn)奇怪，相信我，它并不是那么糟糕。

還有一種方法是將路由對(duì)應(yīng)的組件定義成異步組件。寫起來像這樣：

const OtherMassivePage = resolve => {
  // 空數(shù)組用來指定該路由組件需要加載的依賴
  require.ensure([], () => {
    resolve(require("./routes/OtherMassivePage.vue"))
  })
}

不過，你最好不要使用這種包裹起來的寫法，因?yàn)閃ebPack會(huì)使用靜態(tài)分析來檢測(cè)和分割塊。比較好的做法是，將他們寫成一行以減少空間的占用。

按組分塊

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步 chunk 中。只需要?給 chunk 命名，提供require.ensure第三個(gè)參數(shù)作為 chunk 的名稱：

// 這兩條路由被打包在相同的塊中，訪問任一路由都會(huì)延遲加載該路由組件
const OtherMassivePage = r => require.ensure([], () => r(require("./routes/OtherMassivePage.vue")), "big-pages")
const WeightLossPage = r => require.ensure([], () => r(require("./routes/WeightLossPage.vue")), "big-pages")

不像許多其他的WebPack任務(wù)，這個(gè)方法出乎意料的簡(jiǎn)單，并且能產(chǎn)生意想不到的有用結(jié)果。如果你正在維護(hù)那些變得臃腫不堪的大型單頁(yè)應(yīng)用，我會(huì)毫不猶豫的將這種方法推薦給你。

End

作者：Joshua Bemenderfer

原文地址: lazy-loading-routes

譯者：jeneser

譯者GitHub：https://github.com/jeneser

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

勘誤&討論： New issue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87253.html

相關(guān)文章

  • 架構(gòu)師之路

    摘要：因?yàn)橛脩舨挥迷诘谝淮芜M(jìn)入應(yīng)用時(shí)下載所有代碼，用戶能更快的看到頁(yè)面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的，讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

    NikoManiac 評(píng)論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第二部分---路由懶加載和 Vendor bundle 反模式

    摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實(shí)用的模式。本系列文章基于對(duì)性能優(yōu)化過程的學(xué)習(xí)。路徑時(shí)才被下載。為了便于理解，文件名稱并不是由生成的真實(shí)名稱。接下來，我們將學(xué)習(xí)其他部分和單獨(dú)的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載。現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...

    0x584a 評(píng)論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第一部分---介紹性能優(yōu)化和懶加載

    摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊?？偨Y(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動(dòng)優(yōu)先（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點(diǎn)，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...

    ZweiZhao 評(píng)論0 收藏0

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    Tecode 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<