有条件地加载 polyfill答案

【问题标题】：Conditionally load polyfills有条件地加载 polyfill
【发布时间】：2015-12-24 21:30:03
【问题描述】：

我正在构建一个我的目标群体非常普遍的网站（13 岁左右，所以你好 IE9，你好古老的 android 浏览器），所以我需要一些东西（视口、计算等）的 polyfill。在我使用 Modernizr 和一些条件用户代理来定位 IOS 6-7 等之前。然后使用 yepnope.js 我正在加载特定的 polyfill。

现在modernizr 3.0 已经发布，我注意到Modernizr.load() 已被弃用。 yepnope.js 库也已弃用。正如他们在网站上所说的那样

“您应该遵循一些新的最佳实践。”

但我找不到他们中的任何一个。谷歌搜索了一段时间后，每个人都推荐 Modernizr 和 Yepnope。但是这个问题太新鲜了（弃用，Modernizr的新版本），我找不到任何新的替代方法。

也许使用一些模块加载器（如 require.js）可以完成这项工作？如果是，如何？

【问题讨论】：

通常，polyfill 在添加自己的方法之前测试现有方法。它们通常足够小，无论您确定是否需要它们，都可以将它们扔进去。
感谢您的回答。但是如果我想要很多 polyfill，为什么要发出多个 http 请求呢？或者通过合并和uglify js文件，为什么要让它变大？

标签： javascript modernizr polyfills

【解决方案1】：

我在https://cdn.polyfill.io 维护polyfill 服务，它可能会满足您的需求。我们有一个包含大约 800 个 polyfill 的库，它们有选择地捆绑在一起，只提供给需要它们的用户。您可以自己运行该服务，也可以只从我们的 CDN 加载 polyfill。

【讨论】：

【解决方案2】：

我见过的关于这项技术的最全面的文章是 Philip Walton 的 Loading Polyfills Only When Needed。在这里引用任何部分都太长了，应该完整阅读，所以我不会将部分复制/粘贴到这个答案中。

【讨论】：

【解决方案3】：

我花了一上午的时间自己解决了这个问题。您可以使用jQuery's getScript method。我刚刚在这里回答了一个类似的问题：https://stackoverflow.com/a/34518146/411436

【讨论】：

【解决方案4】：

来自yepnope repo

在有条件地加载内容时，我们建议您为您正在测试的事物的每个组合输出一个构建。这听起来可能会生成很多文件（它可能），但是电脑在这方面做得很好。然后您可以将脚本内联到您的页面仅加载（异步！）单个构建脚本已针对该用户的功能进行了调整。所有的性能胜利条件加载，并且没有加载 100 的延迟问题一下子搞定。

【讨论】：

是的，我已经在 yepnope repo 中看到了。所以推荐的方法是制作一个带有条件的脚本并异步加载它。但是使用 polyfill，脚本将是 laaarge！也许一个好方法是在条件下导入 js 文件？
脚本不会比通过 yepnope 加载脚本更大。它应该下注相同的内容。通过条件导入js文件正是yepnope所做的