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

文章概览

本文主要内容包括:什么是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. spark大批量读取Hbase时出现java.lang.OutOfMemoryError: unable to create new native thread

    这个问题我去网上搜索了一下,发现了很多的解决方案都是增加的nproc数量,即用户最大线程数的数量,但我修改了并没有解决问题,最终是通过修改hadoop集群的最大线程数解决问题的. 并且网络上的回答多数 ...

  2. VMware虚拟机安装CentOS系统图文教程

    上一篇:VMware虚拟机安装教程详解图文         上一篇文章给大家介绍了虚拟机的安装,本文为大家详细介绍一下如何在虚拟机安装CentOS系统:   一:VMware虚拟机创建:   1:打开 ...

  3. perfect-scrollbar在vue中的使用

    1.下载perfect-scrollbar依赖包 npm install perfect-scrollbar 2.perfect-scrollbar特性 1)直接下载依赖包及包含css样式和js 2) ...

  4. Linux网卡聚合时,其中一个网卡有两种配置的解决方法

    先来看看: ficonfig 其中第一网卡是ssh使用: 第二个网卡是在Linux 最小化安装后IP的配置(手动获取静态IP地址)这个文章中配置过ip是192.168.1.2:在Linux重命名网卡名 ...

  5. c/c++ 图相关的函数(二维数组法)

    c/c++ 图相关的函数(二维数组法) 遍历图 插入顶点 添加顶点间的线 删除顶点 删除顶点间的线 摧毁图 取得与v顶点有连线的第一个顶点 取得与v1顶点,v1顶点之后的v2顶点的之后的有连线的第一个 ...

  6. RHEL/Centos7 安装图形化桌面

    Linux是一个多任务的多用户的操作系统,好多linux爱好者在安装完linux后经常遇到一个问题——没有图形化桌面.今天小编在安装RHEL7的时候,一步留神没有安装图形化桌面,下面分享一下安装图形化 ...

  7. Windows 版本说明,Enterprise、Ultimate、Home、Professional知多少

    关于Windows 的安装光盘版本很多种,很多人不知道选择哪些. Ultimate 旗舰版,VISTA开始有了这个级别,是最全最高级的,一般程序开发的电脑,玩游戏的电脑,建议用它,不过对配置稍有一些要 ...

  8. 【项目 · Wonderland】会议一 · 可达鸭

    [软件工程实践 · 团队项目] 第一次作业 Part 0 · 简 要 目 录 Part 1 · 队 伍 阵 容 Part 2 · 会 议 记 录 相 关 Part 3 · 会 议 讨 论 记 录 Pa ...

  9. 06.Python网络爬虫之requests模块(2)

    今日内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 知识点回顾 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 引入 ...

  10. nodejs前后分离

    proxy: { '/api': { target: 'http://localhost:3000/', pathRewrite: {'^/api' : ''}, changeOrigin: true ...