使用Webpack的代碼分離實現Vue懶加載（譯文）

SmallBoyO 發布于2019-08-23 10:42 / 2229人閱讀

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

當一個Vue的項目體積變得十分龐大的時候，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進行分離并按需加載，會極大的提高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項目進行代碼分離并在它們需要的時候進行按需加載，這樣可以顯著減少應用首屏加載的時間。

原文鏈接： Lazy Loading in Vue using Webpack"s Code Splitting

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

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

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

Vue.js應用性能優化：第二部分---路由懶加載和 Vendor bundle 反模式

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

0x584a 2019-08-26 13:45 評論0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
記一次vue-webpack項目優化實踐【更新】

摘要：優化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優化空間較小。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。項目現狀項目是一個數據監測平臺，引入了ehcart和three.js 負責項目的數據可視化；打包后，體積高達2.1M，這個體積相比于我的項目規模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
提升90%加載速度——vuecli下的首屏性能優化

摘要：如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。前言之前用vuecli做了個博客，是一個單頁面項目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務器上試試好家伙...

dreamtecher 2019-08-23 18:09 評論0 收藏0