網(wǎng)站制作NEWS
21 分鐘精通前端 Polyfill 方案
了解了本篇文章的內(nèi)容后，我們首先認(rèn)識(shí)到，盡管es2015已經(jīng)發(fā)布兩年，但瀏覽器的全面支持還遠(yuǎn)未達(dá)到完美，特別是在面對老版本瀏覽器如IE9時(shí)，兼容性成為了一個(gè)必要考慮的問題。為了解決這類問題，babel與polyfill方案成為了前端開發(fā)中的關(guān)鍵工具。
在使用babel進(jìn)行編譯時(shí)，雖然能實(shí)現(xiàn)如箭頭函數(shù)、const、let等ES2015語法的使用，但面對如fetch、Object.assign等新方法在老瀏覽器中的兼容性問題，babel并不會(huì)自動(dòng)進(jìn)行polyfill，這時(shí)便需要引入polyfill方案。
最初解決方法是使用babel-plugin-transform-xxx插件來補(bǔ)全缺失的方法，如babel-plugin-transform-object-assign插件。雖然該插件能實(shí)現(xiàn)對Object.assign方法的替換，但在多文件項(xiàng)目中，引入方法的方式導(dǎo)致了重復(fù)引用的問題，影響性能。
為了解決引入方法重復(fù)引用的問題，babel引入了babel-plugin-transform-runtime插件，該插件能從全局引入所需方法，如core-js中的方法。然而，這種方式在引入方法時(shí)存在局限性，如自動(dòng)引入的不精確性及無法處理全局對象方法的問題。
針對全局作用域的問題，babel提供了babel-polyfill插件，可以實(shí)現(xiàn)對ES2015所有方法的兼容性處理。在項(xiàng)目中引入babel-polyfill后，打包后的文件大小顯著增加，達(dá)到了251kb（未壓縮）。盡管如此，使用babel-polyfill提供了一個(gè)全面且穩(wěn)定的es2015運(yùn)行環(huán)境，適用于網(wǎng)頁應(yīng)用程序。
然而，對于庫或框架開發(fā)，babel-polyfill的大體積不適用，應(yīng)選擇不污染全局環(huán)境的babel-plugin-transform-runtime。在應(yīng)用開發(fā)中，babel-preset-env插件可以自動(dòng)識(shí)別代碼并選擇需要的polyfill，進(jìn)一步優(yōu)化文件大小，減少不必要的polyfill引入。
polyfill.io服務(wù)提供了一種根據(jù)瀏覽器選擇polyfill的解決方案，用戶只需引入cdn.polyfill.io/v2/poly...文件，服務(wù)器將根據(jù)瀏覽器UA返回對應(yīng)的polyfill。polyfill.io不僅提供CDN服務(wù)，還開源了自己的實(shí)現(xiàn)方案polyfill-service，允許用戶輕松配置自己的polyfill服務(wù)。
在使用polyfill.io前，需考慮其對國內(nèi)瀏覽器環(huán)境的兼容性問題，以及缺失polyfill時(shí)的補(bǔ)救方案。盡管如此，polyfill.io是一個(gè)創(chuàng)新且優(yōu)秀的方案，未來有望在更多網(wǎng)站中應(yīng)用。
多重隨機(jī)標(biāo)簽