生产环境部署es6代码

时间流转，来到了9102年的末尾，距离es6正式发布已通过去了4年半。在前端发展的时间长河中，咱们送别了YUI，ie（也许），jQuery，如今，是时候送别es5了。

收益在哪

程序员在进行技术决策的时候，一般的目的是为了kpi，升值加薪，这个技术很流行，不，固然是为了对业务产生价值。

不难发现，直接部署es6代码能够带来的好处包括：

• 代码体积减少
• 性能提高
• 缩短构建时间

代码体积减少

首先，es6带来了新的语法和特性，这可让代码更简洁，使得代码量减小。其次，babel转译以后，会产生一些helper，引入一些polyfill，并且有一些语法特性没法在运行时进行处理，必须在转译过程当中修改源代码，这也会致使代码量增长。固然，部署es6代码也须要babel转译一部分更新的语法，并非说彻底不使用babel。

一个Google工程师的试验结果，es6代码的bundle size比es5代码减小了50%。而我本身的实践的结果没有这么夸张，是25%左右。

version	bundle size	Gzipped
es5	221kb	39kb
es6	170kb	29kb

之因此我和他的测试结果差别较大，是由于最终的结果跟每一个人的代码风格和代码内容有很大的关系。我用来进行测试的代码是一个线上项目的代码，我我的的代码风格是大量使用es6/7/8语法，不过项目自己大量是在写业务逻辑，而且项目使用了Vue，其实不少js代码是模板编译以后生成的渲染函数。

因此，大概的结论是es6的代码会比es5的代码体积减小15% ~ 50%，具体能减小多少，取决于代码风格以及代码内容。代码风格越现代，代码中"生成的代码"越少，收益越高。

性能提高

es6代码相对于es5代码，性能更高的缘由我认为有2个

• 代码量减小带来的解析时间减小，这个正比于代码体积的减小
• 运行性能的提升

对于第一点，浏览器解析代码时间的减小应该占比较小，经过chrome的Performance面板能够看到，解析一个200kb的js文件Compile Script耗时为10ms（测试机器为台式机，i7/16G）。

对于第二点，运行时性能。在es6刚刚发布的时候，不少新特性的性能是比较低的，由于js引擎没有足够的时间去进行优化，相比较而言，es5以及更老的代码通过了浏览器的长时间优化，在es6刚出来的时候，很对人也对es6的性能有很大的担心。

Github上有一个仓库，专门对es6和es5进行了性能对比。

从对比结果能够看出来，在chrome 72版本上，es6代码的性能优于babel转译成的es5代码，和手写的es5代码比起来各有千秋，基本算是55开。

并且，浏览器对于es6的性能优化是持续性的，最近V8就会由于React hooks而改进数组解构的性能。

针对运行时的es6代码和es5代码的性能对比，我也用一个线上项目进行了实验。实验方式以下

1. 利用performance API在打包后的app.js文件开头记下时间戳，在js文件末尾减去开始的时间，获得一个时间，众所周知，打包以后的app.js是一个当即执行函数，因此这个时间包含了app.js文件中部分代码的运行时间
2. 利用chrome 的Performance面板，能够直接获得一段js的执行时间Evaluate Script

实验结果以下（20次的平均值）

version	记录的运行时间	Performance面板的Evaluate Script
es5	258.88ms	295.29ms
es6	206.28ms	241.59ms

测试条件下，es6的代码取得了20%左右的运行性能提高

风险在哪儿

js的运行环境很是复杂，桌面端、移动端、各类小程序、各类webview、node.js，可否部署es6代码只能依靠本身判断。

就我我的的经验而言，大部分的中后台项目都具有直接部署es6代码的条件，并且咱们在具体的实施中确定会有降级方案，让不支持es6的状况下运行es5的代码。

如何实施

Vue用户能够经过Vue cli的 --modern直接开启现代模式

非Vue使用者，能够经过这篇文章提到的方案来进行。大概就是利用script标签的type=module做为浏览器是否全面支持es6的检测，并经过type=nomodule来进行降级处理。

// 不支持module的浏览器，下载但不会执行
<script type="module" src="es6.js"></script>

// 支持module的浏览器，不会下载
<script nomodule src="es5.js"></script>
复制代码

一个须要注意的点是safari 10不支持nomodule，因此须要针对它解决重复下载并执行的问题。(ps: safari浏览器是新时代的毒瘤)

虽然，一个降级的方案能够保证咱们的代码能够在只支持es5的浏览器上也能够执行，可是同时这些老的浏览器会下载2份代码，带来的损失很是大，由于老设备一般也意味着低性能和低网速，它们更不能承受性能损失。因此我认为，若是你的业务须要兼容es5的用户达到了20%以上，我就不赞同采用这个方案。

若是能够肯定彻底不须要兼容es5的用户，能够直接修改browserlist到全面支持es6的浏览器版本，而且不用考虑降级方案，此时还会带来构建速度提高这一额外的好处。

browserslist示例

Chrome >= 60
Safari >= 10.1
iOS >= 10.3
Firefox >= 54
Edge >= 15
复制代码

结语

时间带走一切，es5也不例外。

参考

• deploying-es2015-code-in-production-today
• myst729.github.io/posts/2018/…