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

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

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

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

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

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

　　捆綁包和塊

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

　　這是我們編寫的代碼

　　這是由 web 包生成的上一個(gè)代碼包的一部分

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

　　優(yōu)化

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

　　延遲加載和代碼拆分

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

　　模塊捆綁器

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

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

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

　　壓縮

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