转译或不转译 Polymer 2 应用程序?
Transpiling or not transpiling Polymer 2 applications?
我正在编写 Polymer 2 应用程序。默认是将 ES6 转换为 ES5,以便您可以使用 ES6 语法并确保它能正常工作。
问题是每个人(甚至支持浏览器)都可以接收转译后的代码。
两个问题:
对旧版浏览器说 "no" 并停止转译是不是太疯狂了?
是否有一种简单的方法可以将特定浏览器重定向到应用程序的非转译版本?
这实际上取决于您要创建的应用的受众。至于我自己的项目,我可以在我的 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 了解构建的概念,即针对特定浏览器功能集优化的应用程序变体。
我正在编写 Polymer 2 应用程序。默认是将 ES6 转换为 ES5,以便您可以使用 ES6 语法并确保它能正常工作。
问题是每个人(甚至支持浏览器)都可以接收转译后的代码。
两个问题:
对旧版浏览器说 "no" 并停止转译是不是太疯狂了?
是否有一种简单的方法可以将特定浏览器重定向到应用程序的非转译版本?
这实际上取决于您要创建的应用的受众。至于我自己的项目,我可以在我的 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 了解构建的概念,即针对特定浏览器功能集优化的应用程序变体。