babel-polyfill使用與效能最佳化
文章概覽
本文主要內容包括:什麼是babel-polyfill,如何使用,如何透過按需載入進行效能最佳化。
本文所有例子可以在 找到。
什麼是babel-polyfill
babel只負責語法轉換,比如將ES6的語法轉換成ES5。但如果有些物件、方法,瀏覽器本身不支援,比如:
全域性物件:Promise、WeakMap 等。
全域性靜態函式:Array.from、Object.assign 等。
例項方法:比如 Array.prototype.includes 等。
此時,需要引入babel-polyfill
來模擬實現這些物件、方法。
入門例子
首先,安裝依賴。
npm install babel-cli --save-dev npm install webpack@2.7 --save-dev npm install babel-polyfill --save
建立 index.js,在最前面引入依賴babel-polyfill
,接著透過webpack將依賴打包進去。
// index.jsrequire('babel-polyfill');var arr = Array.from('foo');console.log(arr); // [ 'f', 'o', 'o' ]
webpack配置檔案如下:
// webpack.config.jsvar path = require('path');module.exports = { entry: path.resolve(__dirname, 'index.js'), output: { path: path.resolve(__dirname, 'build'), filename: '[name].js' } };
webpack打包的時候,從輸出大致可以看出引入了哪些依賴。
$ `npm bin`/webpack Hash: 723f2ccdfa0bd8736d3c Version: webpack 2.7.0Time: 1080ms Asset Size Chunks Chunk Names main.js 266 kB 0 [emitted] [big] main [124] (webpack)/buildin/global.js 509 bytes {0} [built] [125] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built] [126] ./index.js 96 bytes {0} [built] [127] ./~/babel-polyfill/~/regenerator-runtime/runtime.js 24.4 kB {0} [built] [128] ./~/core-js/fn/regexp/escape.js 108 bytes {0} [built] [314] ./~/core-js/modules/es7.string.pad-start.js 499 bytes {0} [built] [315] ./~/core-js/modules/es7.string.trim-left.js 219 bytes {0} [built] [316] ./~/core-js/modules/es7.string.trim-right.js 219 bytes {0} [built] [317] ./~/core-js/modules/es7.symbol.async-iterator.js 43 bytes {0} [built] [318] ./~/core-js/modules/es7.symbol.observable.js 40 bytes {0} [built] [319] ./~/core-js/modules/es7.system.global.js 144 bytes {0} [built] [320] ./~/core-js/modules/es7.weak-map.from.js 113 bytes {0} [built] [321] ./~/core-js/modules/es7.weak-map.of.js 109 bytes {0} [built] [322] ./~/core-js/modules/es7.weak-set.from.js 113 bytes {0} [built] [327] ./~/core-js/shim.js 8.18 kB {0} [built] + 313 hidden modules
在[327] ./~/core-js/shim.js
這個依賴中,就引入了Array.from()
這個方法。
require('./modules/es6.array.from');
按需載入
在前面的例子中,一個不到100位元組的index.js,轉碼完成後,變成了259K的main.js,這從效能最佳化的角度來看是難以接受的。
$ ll -h index.js build/main.js -rw-r--r-- 1 a staff 259K 5 31 14:31 build/main.js -rw-r--r-- 1 a staff 96B 5 31 14:25 index.js
解決方法:可以採取按需引入來最佳化效能。
babel-polyfill
主要包含了core-js
和regenerator
兩部分。
babel-polyfill:提供瞭如ES5、ES6、ES7等規範中 中新定義的各種物件、方法的模擬實現。
regenerator:提供generator支援,如果應用程式碼中用到generator、async函式的話用到。
最佳化後的程式碼如下:
// index.jsrequire('core-js/modules/es6.array.from');var arr = Array.from('foo');console.log(arr); // [ 'f', 'o', 'o' ]
最佳化效果如下:(259K -> 17K)
$ ll -h index.js build/main.js -rw-r--r-- 1 a staff 17K 5 31 15:01 build/main.js -rw-r--r-- 1 a staff 112B 5 31 14:59 index.js
如果覺得逐個物件、方法按需載入比較繁瑣,也可以批次按需載入。
比如,按需載入ES6中新定義的方法/物件。
require('core-js/es6'); // core-js/es6/index.js 中引入了es6相關的polyfill
或者,按需載入 ES6 的Array物件上新定義的方法。
require('core-js/es6/array');
相關連結
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2471/viewspace-2819162/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- babel-polyfill使用與效能優化Babel優化
- 安卓效能最佳化—使用ArrayMap與SparseArray安卓
- 前端工程的效能與最佳化前端
- 效能最佳化指南:效能最佳化的一般性原則與方法
- 使用Exp和Expdp匯出資料的效能對比與最佳化
- nginx引數詳解與效能最佳化(-)Nginx
- 折騰不止!前端工程與效能最佳化前端
- 高效能網站效能最佳化與系統架構網站架構
- 高效能網站效能最佳化與系統架構(ZT)網站架構
- redis georadius原始碼分析與效能最佳化Redis原始碼
- 【效能最佳化】ORACLE資料庫效能最佳化概述Oracle資料庫
- babel-runtime和babel-polyfill的介紹和使用Babel
- oracle 效能最佳化Oracle
- 前端效能最佳化前端
- JavaScript效能最佳化JavaScript
- HarmonyOS 效能最佳化
- Sql最佳化(十六) 使用陣列技術提升效能SQL陣列
- 使用智慧最佳化器提高Oracle的效能極限Oracle
- 教你使用智慧最佳化器提高Oracle效能極限Oracle
- 前端效能最佳化——圖片最佳化前端
- 常見效能最佳化方案與實用工具 雙 buffer
- babel-polyfill VS babel-runtimeBabel
- Web 效能最佳化方法Web
- Mysql效能最佳化(三)MySql
- React 元件效能最佳化React元件
- Goldengate效能最佳化Go
- Oracle SQL效能最佳化OracleSQL
- Oracle sql 效能最佳化OracleSQL
- SQL效能最佳化之索引最佳化法SQL索引
- 效能最佳化之SQL語句最佳化SQL
- Oracle效能最佳化之SQL最佳化(轉)OracleSQL
- 桌面客戶端效能提升,最佳化使用資源消耗客戶端
- 使用智慧最佳化器提高Oracle的效能極限 (轉)Oracle
- 使用Intel 向量化編譯器最佳化效能(1) (轉)Intel編譯
- 深入瞭解Java JIT編譯器:原理與效能最佳化Java編譯
- Oracle效能最佳化之應用最佳化(轉)Oracle
- Oracle效能最佳化之最佳化排序操作(轉)Oracle排序
- npm 引數使用注意事項 :npm install babel-polyfill --save-gNPMBabel