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