7

I'm building a website which my target group is very general (ages 13-oo, so hello IE9, hello ancient android browser), so I need polyfills for some stuff (viewport, calc etc). Before I used Modernizr and some conditionals user agents to target IOS 6-7 etc. Then with yepnope.js I was loading the specific polyfills.

Now that modernizr 3.0 is out, I noticed that the Modernizr.load() is deprecated. Also the yepnope.js library is deprecated. As they say on their website

"There are new best practices that you should likely follow instead."

But I can't find any of them. After googling for some time everyone recommend Modernizr and Yepnope. But this issue is so fresh (the deprecation, the new version of Modernizr), and I can't find any new alternative method.

Maybe using of some module loader (like require.js) will do the job? And if yes, how?

  • Usually, the polyfill tests for an existing method before adding one of its own. They're typically small enough that you can throw them in whether you're certain you'll need them or not. – Blazemonger Sep 27 '15 at 15:29
  • Thank you for your answer. But If I want many polyfills why to make multiple http requests? Or by merging and uglify the js files, why to make it bigger at size? –  Sep 27 '15 at 15:32

4 Answers4

6

I maintain the polyfill service at https://cdn.polyfill.io which may meet your needs. We have a library of around 800 polyfills, which are bundled selectively and served only to users that need them. You can run the service yourself or just load the polyfills from our CDN.

Andrew
  • 2,094
  • 19
  • 24
5

The most comprehensive write-up I've seen on this technique is Philip Walton's Loading Polyfills Only When Needed. It's too long to quote any parts here and should be read in its entirety so I'm not going to copy/paste sections into this answer.

Guy
  • 65,082
  • 97
  • 254
  • 325
2

I've spent my morning figuring this out myself. You can use jQuery's getScript method. I just answered a similar q here: https://stackoverflow.com/a/34518146/411436

Community
  • 1
  • 1
mhk
  • 121
  • 4
1

from the yepnope repo

When it comes to loading things conditionally, we suggest that you output a build for each combination of the things you're testing. This might sound like it will generate a lot of files (it might), but computers are pretty good at that. Then you can inline a script into your page that only loads (asynchronously!) a single built script that is tuned to the features of that user. All the performance win of conditional loading, and none of the latency problems of loading 100 things at once.

Patrick
  • 13,872
  • 5
  • 35
  • 53
  • Yeah I already saw that in the yepnope repo. So the recommended method is to make a script with conditionals and load it async. But with the polyfills the script will be laaarge! Maybe a good method will be to import js files on conditionals? –  Sep 28 '15 at 09:48
  • the script won't be any larger then it would be by loading it via yepnope. It should bet the same content. Importing js files via conditionals is exactly what yepnope did – Patrick Sep 28 '15 at 15:16