直到更多的浏览器支持ES2015(又名ES6)功能,使用transpilers和polyfills将是唯一的出路。结账the ES6 compatibility table,以确定您今天可以使用您的网站支持的浏览器的功能。

请记住,有两个主要部分ES6:

新的语言功能

新的原生API功能

直到所有浏览器您的网站支持有支持新的ES6语言功能,如果没有首先将它们转换为ES5等价物,您将无法在脚本中使用它们。我用babel,它运作得很好。生成的ES5等效代码执行得很好。它还击败了我试图手动编写等效的ES5代码。 babel生成的代码已经由babel的测试套件进行了全面测试,并且已经被全球数以千计的开发人员使用。另外,使用ES6编写代码更短,更易于维护。这节省了大量的开发人员时间。当有一天,当所有的浏览器您的网站支持对所有的ES6功能的支持,那么你就可以在你的构建关闭transpiling一步,你会得到的原生浏览器性能的全部好处,而不必手动手动转换您的将ES5代码写入ES6。

许多新的原生API功能,可今天提供polyfill使用。当你想使用ES6功能和你需要支持旧的浏览器时,才需要填充工具。随着填充工具,只有旧的浏览器可能比本机实现处理速度较慢。由于大多数现代浏览器已经支持许多本地ES6 API功能,因此许多用户将获得浏览器本机实现的完整性能。根据我对polyfills的经验,我没有注意到任何重大的性能影响。

如果您担心现代浏览器不必要的下载和运行填充工具都是多余的,那么有您能技术做的影响降到最低。 1)在服务器端,您可以检测发出请求的浏览器,并确定是否打扰在响应中发送polyfill脚本标记。2)您可以正确版本化polyfill,并确保设置了Web服务器的缓存,以便浏览器在首次下载后很少发出对polyfill的请求。

巴贝尔曾经能够在您的html文件中传输ES6代码,但该功能已被删除。您可以将您的嵌入式代码移至单独的外部JavaScript文件。如果您不喜欢引发其他请求获取此外部JavaScript文件的想法,则可以执行以下操作:1)将ES6代码写入单独的文件中。 2)通过babel运行此文件3)使用您的服务器端脚本语言直接在您的HTML中包含传输的内容。