文章首发于笔者的个人博客

文章概览

本文主要内容包括:什么是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-jsregenerator两部分。

  • 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/

babel-polyfill使用与性能优化的更多相关文章

  1. JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...

  2. Web 性能优化: 使用 Webpack 分离数据的正确方法

    摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...

  3. 最全 webpak4.0 打包性能优化清单

    最全 webpak4.0 打包性能优化清单 webpack4.0如何进行打包优化? 无非是从两个角度进行优化,其一:优化打包速度,其二:优化打包体积,送你一份打包性能优化清单 1.使用loader的时 ...

  4. webpack 性能优化小结

    背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...

  5. 前端监控系列4 | SDK 体积与性能优化实践

    背景 字节各类业务拥有众多用户群,作为字节前端性能监控 SDK,自身若存在性能问题,则会影响到数以亿计的真实用户的体验.所以此类 SDK 自身的性能在设计之初,就必须达到一个非常极致的水准. 与此同时 ...

  6. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

  7. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  8. Tree-Shaking性能优化实践 - 原理篇

    Tree-Shaking性能优化实践 - 原理篇   一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前 ...

  9. vue-cli3项目搭建配置以及性能优化

    项目初始化 注意:安装前请确保有安装node.js,并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本,查看vue --versi ...

随机推荐

  1. Linux进程调度器概述--Linux进程的管理与调度(十五)

    调度器面对的情形就是这样, 其任务是在程序之间共享CPU时间, 创造并行执行的错觉, 该任务分为两个不同的部分, 其中一个涉及调度策略, 另外一个涉及上下文切换. 1 背景知识 1.1 什么是调度器 ...

  2. c/c++链队列

    链队列 链队列就是简化了的单链表 nodequeue.h #ifndef __NODEQUEUE__ #define __NODEQUEUE__ #include <stdio.h> #i ...

  3. spring cloud 实践之hystrix注意事项

    当我们写类似下面代码时 package demo1.demo1; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org ...

  4. js中split()方法得到的数组长度

    js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...

  5. 远程连接ubuntu的MongoDB遇到的坑

    首先连接不上,先查看云服务器上的安全组是否添加了对应的端口 如果打开了,那么久查看MongoDB是否允许远程连接 # mongod.conf # for documentation of all op ...

  6. 【Linux基础】VI命令模式下删除拷贝与粘贴

    在VI命令模式下:y 表示拷贝, d 表示删除,p标识粘贴 1.删除 dw 表示删除从当前光标到光标所在单词结尾的内容. d0 表示删除从当前光标到光标所在行首的内容. d$ 表示删除从当前光标到光标 ...

  7. MySQL高级知识(八)——ORDER BY优化

    前言:在使用order by时,经常出现Using filesort,因此对于此类sql语句需尽力优化,使其尽量使用Using index. 0.准备 #1.创建test表. drop table i ...

  8. tomcat 设置连接数

    maxConnections.maxThreads.acceptCount的含义及关系maxThreads:tomcat同时处理请求的任务个数,默认值为200maxConnections :tomca ...

  9. Mysql SQL分组取每组前几条记录

    按name分组取最大的两个val: [比当前记录val大的条数]小于2条:即当前记录为为分组中的前两条 > (select count(*) from tb where name = a.nam ...

  10. UVA10410-Tree Reconstruction(BFS序和DFS序的性质)

    Problem UVA10410-Tree Reconstruction Accept:708  Submit:4330 Time Limit: 3000 mSec Problem Descripti ...