转译或不转译 Polymer 2 应用程序?

Transpiling or not transpiling Polymer 2 applications?

我正在编写 Polymer 2 应用程序。默认是将 ES6 转换为 ES5,以便您可以使用 ES6 语法并确保它能正常工作。

问题是每个人(甚至支持浏览器)都可以接收转译后的代码。

两个问题:

这实际上取决于您要创建的应用的受众。至于我自己的项目,我可以在我的 Google 分析中看到仍有一些人通过 Safari 8、9 甚至 IE 11 访问它。我不能只告诉他们使用不同的浏览器,因为有几个原因...主要是经济原因(个人或公司)

因此,我仍然默认只转译回 ES5(考虑到我现在正在使用 Webpack,同时等待脚本 type="module" 稳定)。

至于最简单的方法,他们说如果您使用 Polymer-CLI 的服务功能,它会根据浏览器的功能自动转换您的代码。

或者你可以有一个简单的 javascript 代码来尝试检查 ES6 方法,然后如果它有效,它加载捆绑代码的 ES6 版本...如果没有,它加载 ES5 版本捆绑代码 + custom-elements-es5-adapter。但是这个会带来一些性能损失,因为在加载必要的文件之前等待解析初始 JS 脚本进行检查,而不是立即加载它们(不过我还没有测试过)

或者您可以在服务器中检查正在调用的浏览器类型,然后试探性地猜测您要发送的版本代码类型。

至于转换代码开销的性能,它有点微不足道,因为如果您只是使用 Polymer.Element,您至少可以获得 12KB 的代码...那么您将拥有就像剩下 30+KB 来显示内容,这足以拥有 PRPL+50

简单的答案是使用 prpl-server-node,它完全符合我所说的,甚至更多。 具体来说:


差异化服务

现代浏览器提供了可提高性能的强大功能,但大多数应用程序也需要支持旧版浏览器。 prpl-server 通过使用 user-agent header.

检测浏览器功能,可以为不同的浏览器提供不同版本的应用程序

建造

prpl-server 了解构建的概念,即针对特定浏览器功能集优化的应用程序变体。