建站
咨詢
售后
建站咨詢
新聞中心
超過(guò) 90% 的瀏覽器能夠運(yùn)行現(xiàn)代 JavaScript，但傳統(tǒng) JavaScript 的流行仍然是當(dāng)今 Web 性能問(wèn)題的最大原因之一。
成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)隆化,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
當(dāng)今的 Web 受到傳統(tǒng) JavaScript 限制，沒(méi)有任何單一優(yōu)化可以像使用 ES2017 語(yǔ)法編寫、發(fā)布和傳輸網(wǎng)頁(yè)或軟件包那樣提高性能。
現(xiàn)代 JavaScript
現(xiàn)代 JavaScript 的特征不是使用特定的 ECMAScript 規(guī)范版本編寫代碼，而是使用所有現(xiàn)代瀏覽器都支持的語(yǔ)法。Chrome、Edge、Firefox 和 Safari 等現(xiàn)代網(wǎng)絡(luò)瀏覽器占據(jù)瀏覽器市場(chǎng)的 90% 以上，依賴相同底層渲染引擎的其他瀏覽器占另外 5%。這意味著全球 95% 的 Web 流量所來(lái)自的瀏覽器支持過(guò)去 10 年來(lái)最廣泛使用的 JavaScript 語(yǔ)言特性，包括：
- 類 (ES2015)
- 箭頭函數(shù) (ES2015)
- 生成器 (ES2015)
- 塊范圍 (ES2015)
- 解構(gòu) (ES2015)
- 剩余和展開(kāi)參數(shù) (ES2015)
- 對(duì)象速記 (ES2015)
- 異步/等待 (ES2017)
較新版本的語(yǔ)言規(guī)范中的特性在現(xiàn)代瀏覽器中獲得的支持通常不太一致。例如，許多 ES2020 和 ES2021 特性僅在 70% 的瀏覽器市場(chǎng)獲得支持 — 仍然是大多數(shù)瀏覽器，但還不夠安全，不能直接依賴這些特性。這意味著盡管“現(xiàn)代”JavaScript 是一個(gè)活動(dòng)目標(biāo)，但 ES2017 擁有最廣泛的瀏覽器兼容性，同時(shí)包含大多數(shù)常用的現(xiàn)代語(yǔ)法特性。換句話說(shuō)，ES2017 目前最接近現(xiàn)代語(yǔ)法。
傳統(tǒng) JavaScript
傳統(tǒng) JavaScript 是明確避免使用上述所有語(yǔ)言特性的代碼。大多數(shù)開(kāi)發(fā)人員使用現(xiàn)代語(yǔ)法編寫源代碼，但將所有內(nèi)容編譯為傳統(tǒng)語(yǔ)法以增加瀏覽器支持。編譯為傳統(tǒng)語(yǔ)法確實(shí)會(huì)增加瀏覽器支持，但效果通常比我們想象的小。在許多情況下，支持度從 95% 左右增加到 98%，但同時(shí)產(chǎn)生了大量成本：
- 傳統(tǒng) JavaScript 通常比等效的現(xiàn)代代碼大 20% 左右，而且速度更慢。工具缺陷和錯(cuò)誤配置通常會(huì)進(jìn)一步擴(kuò)大這一差距。
- 安裝的庫(kù)占典型生產(chǎn) JavaScript 代碼的 90%。庫(kù)代碼會(huì)由于polyfill 和 helper 重復(fù)而產(chǎn)生更高的傳統(tǒng) JavaScript 開(kāi)銷，而發(fā)布現(xiàn)代代碼可以避免這個(gè)問(wèn)題。
npm 上的現(xiàn)代 JavaScript
Node.js 標(biāo)準(zhǔn)化了一個(gè) "exports" 字段來(lái)定義軟件包的入口點(diǎn)：
{
"exports": "./index.js"
}"exports" 字段引用的模塊意味著 Node 版本至少為 12.8，它支持 ES2019。這意味著使用 "exports" 字段引用的任何模塊都可以使用現(xiàn)代 JavaScript 編寫。軟件包使用者必須假定具有 "exports" 字段的模塊包含現(xiàn)代代碼并在必要時(shí)進(jìn)行轉(zhuǎn)換。
僅現(xiàn)代
如果要發(fā)布采用現(xiàn)代代碼的軟件包，并讓使用者在將其用作依賴項(xiàng)時(shí)處理轉(zhuǎn)換，則僅使用 ??"exports"?? 字段。
{
"name": "foo",
"exports": "./modern.js"
}
不推薦這種方法。在完美的世界中，每個(gè)開(kāi)發(fā)人員都已經(jīng)將編譯系統(tǒng)配置為將所有依賴項(xiàng) (node_modules) 轉(zhuǎn)換為所需語(yǔ)法。但是，目前情況并非如此，僅使用現(xiàn)代語(yǔ)法發(fā)布軟件包將使其無(wú)法在通過(guò)舊版瀏覽器訪問(wèn)的應(yīng)用程序中使用。
具有傳統(tǒng)回退的現(xiàn)代代碼
將 "exports" 字段與 "main" 一起使用，以便使用現(xiàn)代代碼發(fā)布軟件包，但還包括用于舊版瀏覽器的 ES5 + CommonJS 回退。
{
"name": "foo",
"exports": "./modern.js",
"main": "./legacy.cjs"
}
具有傳統(tǒng)回退的現(xiàn)代代碼和 ESM 捆綁程序優(yōu)化
除了定義回退 CommonJS 入口點(diǎn)，還可以使用 "module" 字段指向類似的傳統(tǒng)回退捆綁包，但該捆綁包使用 JavaScript 模塊語(yǔ)法 (import 和 export)。
{
"name": "foo",
"exports": "./modern.js",
"main": "./legacy.cjs",
"module": "./module.js"
}許多捆綁程序（如 webpack 和 Rollup）依賴該字段來(lái)利用模塊特性和實(shí)現(xiàn)搖樹(shù)優(yōu)化。這仍然是一個(gè)傳統(tǒng)捆綁包，不包含除了 import/export 語(yǔ)法之外的任何現(xiàn)代代碼，所以使用這種方法來(lái)傳輸具有傳統(tǒng)回退、但仍然針對(duì)捆綁進(jìn)行了優(yōu)化的現(xiàn)代代碼。
應(yīng)用程序中的現(xiàn)代 JavaScript
第三方依賴項(xiàng)構(gòu)成了 Web 應(yīng)用程序中絕大多數(shù)的典型生產(chǎn) JavaScript 代碼。雖然 npm 依賴項(xiàng)在歷史上一直以 ES5 語(yǔ)法的形式發(fā)布，但這不再是一個(gè)安全假設(shè)，并且依賴項(xiàng)更新可能會(huì)破壞應(yīng)用程序的瀏覽器支持。
隨著越來(lái)越多的 npm 包轉(zhuǎn)向現(xiàn)代 JavaScript，確保構(gòu)建工具設(shè)置為能夠處理它們很重要。您所依賴的一些 npm 包很有可能已經(jīng)在使用現(xiàn)代語(yǔ)言特性。有許多選擇可使用 npm 中的現(xiàn)代代碼而不會(huì)破壞應(yīng)用程序在舊版瀏覽器中的體驗(yàn)，但總體思路是讓編譯系統(tǒng)將依賴項(xiàng)轉(zhuǎn)換為與源代碼相同的目標(biāo)語(yǔ)法。
webpack
從 webpack 5 開(kāi)始，現(xiàn)在可以配置 webpack 在生成捆綁包和模塊的代碼時(shí)將使用的語(yǔ)法。這不會(huì)轉(zhuǎn)換您的代碼或依賴項(xiàng)，只影響由 webpack 生成的“粘附”代碼。要指定瀏覽器支持目標(biāo)，請(qǐng)?jiān)谀捻?xiàng)目中添加一個(gè) browserslist 配置，或者直接在 webpack 配置中添加：
module.exports = {
target: ['web', 'es2017'],
};還可以將 webpack 配置為生成優(yōu)化的捆綁包，當(dāng)以現(xiàn)代 ES 模塊環(huán)境為目標(biāo)時(shí)，這些捆綁包會(huì)省略不必要的包裝函數(shù)。這也將 webpack 配置為使用