資訊專欄INFORMATION COLUMN
摘要：當(dāng)一個(gè)的項(xiàng)目體積變得十分龐大的時(shí)候，使用的代碼分離功能將，或的代碼進(jìn)行分離并按需加載，會(huì)極大的提高的首屏加載速度。如果我們使用函數(shù)在中返回模塊作為載荷，就實(shí)現(xiàn)了懶加載。
當(dāng)一個(gè)Vue的項(xiàng)目體積變得十分龐大的時(shí)候，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進(jìn)行分離并按需加載，會(huì)極大的提高App的首屏加載速度。
在Vue的項(xiàng)目中，我們可以在三種不同的情況下使用懶加載和代碼分離功能：
Vue組件，也稱為異步組件
Vue-Router
Vuex
三者的共同點(diǎn)都是使用的動(dòng)態(tài)import，這在Webpack的第二個(gè)版本就開始被支持。
在Vue組件中進(jìn)行懶加載在Eggheads中有關(guān)于使用Vue異步組件實(shí)現(xiàn)按需加載組件的解釋。
實(shí)現(xiàn)異步組件只需要使用import函數(shù)去注冊組件即可：
Vue.component("AsyncCmp", () => import("./AsyncCmp"))
也可以使用本地注冊組件的方式：
new Vue({
// ...
components: {
"AsyncCmp": () => import("./AsyncCmp")
}
})
使用箭頭函數(shù)指向import函數(shù)，Vue將會(huì)在需要該組件的時(shí)候才執(zhí)行請求加載該組件的代碼。
如果導(dǎo)入的組件是使用命名的方式進(jìn)行導(dǎo)出的，你可以在Promise的返回值中使用對象解構(gòu)的方式實(shí)現(xiàn)按需加載組件。下面是加載KeenUI的 UiAlert組件的例子：
components: {
UiAlert: () => import("keen-ui").then(({ UiAlert }) => UiAlert)
}
在Vue router中進(jìn)行懶加載
Vue router在原生支持懶加載。和懶加載組件的方式一樣，都是使用import函數(shù)。例如我們想在/login這個(gè)路由下懶加載Login組件。
// 不再使用 import Login from "./login"
const Login = () => import("./login")
new VueRouter({
routes: [
{ path: "/login", component: Login }
]
})
在Vuex中進(jìn)行懶加載
Vuex的registerModule方法允許我們動(dòng)態(tài)的創(chuàng)建Vuex的模塊。如果我們使用import函數(shù)在Promise中返回模塊作為載荷（payload），就實(shí)現(xiàn)了懶加載。
const store = new Vuex.Store()
...
// 假設(shè)我們想加載"login"這個(gè)模塊
import("./store/login").then(loginModule => {
store.registerModule("login", loginModule)
})
總結(jié)
在Vue + Webpack中是懶加載十分簡單。趕快使用上面學(xué)習(xí)到的方法將你的Vue項(xiàng)目進(jìn)行代碼分離并在它們需要的時(shí)候進(jìn)行按需加載，這樣可以顯著減少應(yīng)用首屏加載的時(shí)間。
原文鏈接： Lazy Loading in Vue using Webpack"s Code Splitting
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96603.html
摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實(shí)用的模式。本系列文章基于對性能優(yōu)化過程的學(xué)習(xí)。路徑時(shí)才被下載。為了便于理解，文件名稱并不是由生成的真實(shí)名稱。接下來，我們將學(xué)習(xí)其他部分和單獨(dú)的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載。現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
摘要：優(yōu)化空間不大主要關(guān)注另外兩個(gè)上面。目前為止，項(xiàng)目打包后的大部頭就是，這個(gè)目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點(diǎn)還有很多，這個(gè)文章繼續(xù)更新下去。 項(xiàng)目現(xiàn)狀 項(xiàng)目是一個(gè)數(shù)據(jù)監(jiān)測平臺(tái)，引入了ehcart和three.js 負(fù)責(zé)項(xiàng)目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個(gè)體積相比于我的項(xiàng)目規(guī)模來說就顯得稍有笨重了 使用webpack-bundle-analyzer分析了...
摘要：如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對應(yīng)組件，這樣就更加高效了。 前言 之前用vuecli做了個(gè)博客，是一個(gè)單頁面項(xiàng)目，大概有十個(gè)路由直接npm run build打包出來，有一個(gè)1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務(wù)器上試試好家伙...
閱讀 3571·2021-11-18 13:22
閱讀 2580·2021-09-23 11:53
閱讀 754·2019-08-30 13:17
閱讀 1390·2019-08-30 13:12
閱讀 920·2019-08-29 15:43
閱讀 1123·2019-08-29 12:53
閱讀 2849·2019-08-26 18:27
閱讀 1522·2019-08-26 11:52
