关闭

babel-polyfill使用与性能优化

时间: 2018-06-01阅读: 1789标签: babel

文章概览

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。

本文所有例子可以在 笔者的github 找到。


什么是babel-polyfill

babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,比如:

  1. 全局对象:Promise、WeakMap 等。
  2. 全局静态函数:Array.from、Object.assign 等。
  3. 实例方法:比如 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.js
require('babel-polyfill');

var arr = Array.from('foo');
console.log(arr);  // [ 'f', 'o', 'o' ]

webpack配置文件如下:

// webpack.config.js
var 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.0
Time: 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.js
require('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');

相关链接

https://babeljs.io/docs/usage/polyfill/

原文来源:程序猿小卡的博客

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/847

关闭

前端中的编译原理:从零打造一个实用的 Babel 插件

说起编译原理,可能我们脑海中首先浮现的就是 “编译器” 这个词汇。维基百科上对编译器的定义是: 编译器是一种计算机程序,它会将某种编程语言写成的源代码(原始语言)转换成另一种编程语言(目标语言)

Babel是什么?

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情

babel 版本原因运行报错,解决办法

学习 babel 时,遇到的问题,使用旧版本 babel 命名规则安装后运行报错,初步查找到原因是因为 babel 各个preset和plugin新旧不同版本之间存在兼容问题,提示使用 npx babel-upgrade 可以自动升级,但是我升级失败了

深入类和继承内部原理+Babel和 TypeScript 之间转换

在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。

babel polyfill 的一些理解

为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。简单来讲,babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。

Babel中的stage-0,stage-1,stage-2以及stage-3的作用(转)

大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码

如何将ES6转换成ES5?

ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

使用 Webpack 与 Babel 配置 ES6 开发环境

在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。

Babel_如何写一个Babel插件

Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!