在本文中，我們將快速瀏覽一下可用于盡快創(chuàng)建 Web 應(yīng)用程序的技巧。如今，擁有一個快速&可持續(xù)的Web應(yīng)用程序?qū)τ诳萍脊緛碚f是一件必不可少的事情，并且擁有這個龐大的Web開發(fā)人員社區(qū)，實現(xiàn)這個目標比平常容易。

　　但首先，我想想象一下一個新的JavaScript Web應(yīng)用程序?qū)嶋H上如何在客戶端工作。

　　瀏覽器如何理解 JS Web 應(yīng)用程序？

　　讓我們通過 Web 應(yīng)用階段的渲染圖來執(zhí)行此操作。

　　對于使用客戶端渲染 (CSR) 方法的所有 JS 應(yīng)用，此圖片幾乎相同。

　　構(gòu)建我們的JS文件下載和渲染的塊，然后我們有我們的網(wǎng)站?？雌饋砗苋菀?，不是嗎?!在這些步驟的引擎蓋下是一個由新方法組成的大黑洞，它幫助我們使這個過程更快，更有效率，所以讓我們來談?wù)勊鼈儭?/p>

　　捆綁包和塊

　　你用 React、Vue.js 或 Angular 格式編寫的代碼在編寫時和渲染時不會相同，代碼由模塊捆綁器轉(zhuǎn)換為許多片段、塊或捆綁包，并帶有向后兼容和純 JS 代碼，讓瀏覽器理解代碼并向用戶呈現(xiàn)一個外觀正常的網(wǎng)站。讓我用一個由網(wǎng)絡(luò)包捆綁的小型React應(yīng)用程序向您展示它。

　　這是我們編寫的代碼

　　這是由 web 包生成的上一個代碼包的一部分

　　看!Webpack會將所有的Lodash代碼導(dǎo)入到一個文件中，其中包含我們已經(jīng)編寫的JS代碼!此文件包將被發(fā)送到瀏覽器，并在下載完成后開始呈現(xiàn)。因此，想象一個大塊文件 - 下載它的速度有多慢!

　　優(yōu)化

　　這里的大部分速度技巧都是關(guān)于通過執(zhí)行諸如延遲加載，編寫自定義庫而不是全部安裝它們，壓縮塊文件和Core Web Vite之類的事情來減小塊文件大小(我也寫了一篇關(guān)于此的文章，您可以在此處閱讀)。所以讓我們來做吧。

　　延遲加載和代碼拆分

　　這里的主要概念是防止加載不必要的代碼或在用戶需要的某些邏輯點加載它們，這樣我們就不會在第一次或每次刷新時加載整個塊，而只導(dǎo)入和下載我們當時需要的代碼!

　　模塊捆綁器

　　這個概念對于選擇Webpack的開發(fā)人員來說非常簡單，但現(xiàn)在比以前要棘手得多，因為最近出現(xiàn)了一些很酷的新模塊捆綁器，使這個過程比以前越來越高性能，我現(xiàn)在選擇這部分是Vite!

　　但是為什么維特比網(wǎng)絡(luò)包更好呢？

　　Vite 更喜歡提供源代碼而不是本機 ESM。通過允許瀏覽器執(zhí)行捆綁器的部分職責(zé)，Vite可以根據(jù)瀏覽器的要求根據(jù)需要更改源代碼。僅當在當前屏幕上使用條件動態(tài)導(dǎo)入背后的代碼時，才會處理該代碼。

　　壓縮

　　這個東西是由大多數(shù)當前的模塊捆綁器處理的，但這里的一個技巧是使用Brotli作為傳統(tǒng)GZIP算法以外的壓縮算法，Brotli將捆綁軟件大小減少了20%-30%!是的，這很酷。