babel-polyfill使用与性能优化
文章首发于笔者的个人博客
文章概览
本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。
本文所有例子可以在 笔者的github 找到。
什么是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.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/
babel-polyfill使用与性能优化的更多相关文章
- JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...
- Web 性能优化: 使用 Webpack 分离数据的正确方法
摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...
- 最全 webpak4.0 打包性能优化清单
最全 webpak4.0 打包性能优化清单 webpack4.0如何进行打包优化? 无非是从两个角度进行优化,其一:优化打包速度,其二:优化打包体积,送你一份打包性能优化清单 1.使用loader的时 ...
- webpack 性能优化小结
背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...
- 前端监控系列4 | SDK 体积与性能优化实践
背景 字节各类业务拥有众多用户群,作为字节前端性能监控 SDK,自身若存在性能问题,则会影响到数以亿计的真实用户的体验.所以此类 SDK 自身的性能在设计之初,就必须达到一个非常极致的水准. 与此同时 ...
- 浅谈webpack4.0 性能优化(转)
前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...
- 【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...
- Tree-Shaking性能优化实践 - 原理篇
Tree-Shaking性能优化实践 - 原理篇 一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前 ...
- vue-cli3项目搭建配置以及性能优化
项目初始化 注意:安装前请确保有安装node.js,并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本,查看vue --versi ...
随机推荐
- Python 实例方法、类方法、静态方法的区别与作用
Python中至少有三种比较常见的方法类型,即实例方法,类方法.静态方法.它们是如何定义的呢?如何调用的呢?它们又有何区别和作用呢?且看下文. 首先,这三种方法都定义在类中.下面我先简单说一下怎么定义 ...
- Keras深度学习框架安装及快速入门
1.下载安装Keras 如果你是安装的Anaconda组合套件,可以直接在Prompt上执行安装命令:pip install keras 注意:最下面为Successfully...表示安装成功! 2 ...
- web前端(13)—— 了解JavaScript,JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分——javascript,学到后面你就知道它真的太重要了 什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
- web前端(6)—— 标签的属性,分类,嵌套
属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 1.HTML标签除一些特定属性外可以设置自定义属性,一个标签可以设置多个属性用空格分隔,多个属性不区分先后顺序. 2.属性值要用引 ...
- 动态Linq表达式生成
动态构建 WHERE(C=>C.Id=Value): public static IQueryable<T> WhereEqual<T>(this IQueryable& ...
- c/c++ allocator 使用
allocator 使用 作用:只开辟空间,不调用构造函数 操作一览表 allocator<T> a 定义一个名为a的allocator对象,它可以为类型为T的对象分配内存 a.alloc ...
- FastCGI Error Number: 5 (0x80070005).
在访问网站的时候,出现了以上这个错误: 在网上搜了很多方法,归纳起来就如下几种: 1, 网站安全狗]的安全策略问题 解决方案: 主动防御/禁止IIS执行程序 添加"php\php-cgi.e ...
- C# -- 使用反射(Reflect)获取dll文件中的类型并调用方法
使用反射(Reflect)获取dll文件中的类型并调用方法 需引用:System.Reflection; 1. 使用反射(Reflect)获取dll文件中的类型并调用方法(入门案例) static v ...
- Servlet中的request与response
了解这方面的知识可以查看以下博客 https://www.cnblogs.com/zhangyinhua/p/7629221.html https://www.cnblogs.com/zhaojian ...
- python之常用模块(续)
time模块 random模块 sys模块 os模块 序列化模块 time模块 有三种方式表示 在Python中,通常有三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串 ...