資訊專欄INFORMATION COLUMN
摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實(shí)用的模式。本系列文章基于對(duì)性能優(yōu)化過(guò)程的學(xué)習(xí)。路徑時(shí)才被下載。為了便于理解，文件名稱并不是由生成的真實(shí)名稱。接下來(lái)，我們將學(xué)習(xí)其他部分和多帶帶的組件也能夠從主文件分割出來(lái)并延遲加載。
在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載。現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割 Vue.js 應(yīng)用程序最實(shí)用的模式。
本系列文章基于對(duì) Vue Storefront 性能優(yōu)化過(guò)程的學(xué)習(xí)。通過(guò)使用下面的技術(shù)，我們能夠?qū)⒊跏嘉募拇笮p少70%，并在眨眼間使其加載。
Part 1?—?Introduction to performance optimization and lazy loading.
Part 2?—?Lazy loading routes and vendor bundle anti-pattern.
Part 3?—?Lazy loading Vuex modules
Part 4?—?Delivering good waiting experience and lazy loading individual components?—?soon
Part 5?—?Lazy loading libs and finding smaller equivalents?—?soon
Part 6?—?Performance-friendly usage of UI libraries
Part 7?—?Making use of Service Worker cache?—?soon
Part 8?—?Prefetching
應(yīng)用程序增長(zhǎng)的問(wèn)題Vue-router 是一個(gè)庫(kù)，它允許將我們的web應(yīng)用程序自然地分割成多帶帶的頁(yè)面。每個(gè)頁(yè)面都是與某個(gè)特定URL路徑相關(guān)聯(lián)的路由。
了解了這一點(diǎn)，假設(shè)我們有一個(gè)簡(jiǎn)單的應(yīng)用程序，其結(jié)構(gòu)如下:
整個(gè)JS代碼打包在一個(gè)文件中 - ?app.js
你可能已經(jīng)注意到，我們正在訪問(wèn)的路徑，可能不需要 Home.vue 或 About.vue（和它依賴的lodash），但它們都在相同的 app.js 文件中，無(wú)論用戶訪問(wèn)哪一個(gè)路徑，都會(huì)被下載。多么浪費(fèi)下載和解析時(shí)間啊!
如果我們下載一個(gè)額外的路由，這并不是什么大不了的事，但你可以想象這個(gè)應(yīng)用會(huì)變得越來(lái)越大，任何新的增加將意味著在首次訪問(wèn)時(shí)要下載更大的文件。
僅僅一秒鐘的時(shí)間足以讓用戶心理發(fā)生變化，并很有潛在可能會(huì)離開我們的網(wǎng)站，這是不能接受的。
來(lái)自 Ilya Grigorik 關(guān)于性能和人類感知的精彩演講
基于路由的代碼分割以上圖片中出現(xiàn)的英文譯文：
Wetware perception reaction times 人腦感知反應(yīng)時(shí)間
instant 立刻
slight perceptible delay 輕微可察覺的延遲
Task focus,perceptible delay 明顯的延遲
Mental context switch?心理發(fā)生變化
I"ll come back later 我一會(huì)兒再來(lái)
為了避免讓應(yīng)用程序變得更糟，我們只需要使用上一篇文章中學(xué)習(xí)的動(dòng)態(tài)導(dǎo)入語(yǔ)法為每個(gè)路由創(chuàng)建多帶帶的包。
像在 Vue.js 中很容易實(shí)現(xiàn)延遲加載組件一樣，我們要做的不是直接將組件導(dǎo)入到路由對(duì)象中，而是傳遞一個(gè) 動(dòng)態(tài)導(dǎo)入函數(shù)，只有在訪問(wèn)這個(gè)路由時(shí)，才會(huì)下載對(duì)應(yīng)的路由組件。
所以不要像這樣靜態(tài)導(dǎo)入路由組件：
import RouteComponent form "./RouteComponent.vue"
const routes = [{ path: /foo", component: RouteComponent }]
我們需要?jiǎng)討B(tài)導(dǎo)入它，這將創(chuàng)建一個(gè)新的包，并將此路由作為入口點(diǎn)：
const routes = [
{ path: /foo", component: () => import("./RouteComponent.vue") }
]
知道了這些，讓我們看看動(dòng)態(tài)導(dǎo)入后打包的文件和路由是什么樣子的:
使用這個(gè)設(shè)置，webpack 將創(chuàng)建三個(gè)包：
app.js 我們的主文件，包含了應(yīng)用程序入口點(diǎn)（main.js）和每個(gè)路由所需要的庫(kù)/組件。
home.js/** 路徑時(shí)才被下載。
about.js/about** 路徑時(shí)才會(huì)被下載。
_為了便于理解，文件名稱并不是由webpack生成的真實(shí)名稱。實(shí)際上是根據(jù)webpack配置生成 0.js1.js** 等_，具體取決于您的webpack配置。
這種技術(shù)幾乎適用于所有的應(yīng)用，并且可以產(chǎn)生非常好的效果。
在許多情況下，基于路由的代碼分割將解決所有的性能問(wèn)題，并且可以在不到幾分鐘的時(shí)間內(nèi)應(yīng)用到幾乎任何應(yīng)用程序中!
Vue生態(tài)系統(tǒng)中的代碼拆分你可能正在使用 Nuxt 或 vue-cli 來(lái)創(chuàng)建你的應(yīng)用程序。如果是這樣，重要的是要知道它們都有關(guān)于代碼拆分的一些自定義行為：
在 vue-cli3prefetchingvue-cliprefetching** 的知識(shí)，請(qǐng)看這篇文章。
在 Nuxt路由系統(tǒng)，所有頁(yè)面路由的代碼分割都是開箱即用的。
現(xiàn)在讓我們來(lái)看看非常流行且常被用到的反模式（anti-pattern），它可以降低基于路由的代碼分割的影響。
Vendor bundle 反模式Vendor bundle 通常用于包含 node_modules 中的所有模塊的多帶帶js文件。
雖然把所有文件都打包在一起，以便將所有依賴關(guān)系保存在一個(gè)地方并緩存它們可能很吸引人，但這種方法引入了我們將所有路由打包在一起時(shí)遇到的同樣的問(wèn)題：
你看到問(wèn)題了嗎?即使我們只需要在一個(gè)路由中使用 lodash（它是其中一個(gè)依賴項(xiàng)），它就會(huì)被打包在 vendor.js 中以及所有其他依賴項(xiàng)中，因此它始終將會(huì)被下載。
將所有依賴項(xiàng)打包在一個(gè)文件中聽起來(lái)很吸引人，但這會(huì)延長(zhǎng)應(yīng)用程序的加載時(shí)間。我們可以做得更好!
我們的應(yīng)用程序使用基于路由的代碼分割，就足以確保只下載所需要的代碼。但這會(huì)導(dǎo)致一些代碼重復(fù)。
假設(shè) Home.vue 也需要 lodash。
在這種情況下，從 /about (about .vue) 跳轉(zhuǎn)到 / (Home.vue) 將會(huì)下載 lodash 兩次。
雖然仍然比下載大量冗余代碼要好，但是如果我們已經(jīng)知道了有這種依賴關(guān)系，那么做不到被重用就沒(méi)有意義，對(duì)吧?
這就是 webpack splitChunksPlugin 可以幫助我們的地方。只要在 webpack 的配置中添加下面這幾行代碼，我們就可以將公共依賴項(xiàng)分組到一個(gè)多帶帶的文件中，這樣就可以被共享了。
// webpack.config.js
optimization: {
splitChunks: {
chunks: "all"
}
}
在 chunk 屬性中，我們只是告訴 webpack 應(yīng)該優(yōu)化那些代碼塊。正如您可能已經(jīng)猜到的那樣，將該屬性設(shè)置為 all 意味著它應(yīng)該優(yōu)化所有依賴項(xiàng)。
您可以在 webpack文檔 中閱讀關(guān)于此過(guò)程的更多信息。
總結(jié)按路由拆分代碼是保持初始加載文件大小較小的最佳（也是最簡(jiǎn)單）方法之一。接下來(lái)，我們將學(xué)習(xí)其他部分(Vuex和多帶帶的組件)也能夠從主文件分割出來(lái)并延遲加載。
如果對(duì)你有幫助，請(qǐng)關(guān)注【前端技能解鎖】：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109448.html
摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊。總結(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來(lái)分割應(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)用程序快速加載變得越來(lái)越困難。在本系列文章...
摘要：延伸閱讀學(xué)習(xí)與實(shí)踐資料索引與前端工程化實(shí)踐前端每周清單半年盤點(diǎn)之篇前端每周清單半年盤點(diǎn)之與篇前端每周清單半年盤點(diǎn)之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單；本文則是對(duì)于半年來(lái)發(fā)布的前端每周清單...
摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的元素是更新之前的鉤子函數(shù)說(shuō)明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于的操作。鉤子函數(shù)說(shuō)明實(shí)例銷毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架 庫(kù)和框架的區(qū)別 我們所說(shuō)的前端框架與庫(kù)的區(qū)別？ Library 庫(kù)，本質(zhì)上是一...
摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來(lái)自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...
摘要：以為例，編寫來(lái)幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫(kù)使用各種模塊化寫法以及語(yǔ)法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...
閱讀 1230·2021-11-11 16:54
閱讀 1744·2021-10-13 09:40
閱讀 940·2021-10-08 10:05
閱讀 3503·2021-09-22 15:50
閱讀 3706·2021-09-22 15:41
閱讀 1800·2021-09-22 15:08
閱讀 2345·2021-09-07 10:24
閱讀 3578·2019-08-30 12:52
