So the README mentions some way of making custom builds via command line but it's not very elaborate. I'll probably have to read the Gruntfile for more details but before I do that I'd like to ask about a more powerful, automated approach.
My questions are:
- Which of the following things already exist?
- Which are too impractical to implement / not worth the effort?
- Which don't exist because nobody has tried?
First, consider the following use cases:
A I'm creating an app targeted at a very specific browser engine. While this is not too common for regular websites it does occur more frequently when engines like webkit are used to provide a GUI for desktop applications (here's an example). I only need a small subset of the entire polyfill.
B I'm creating a regular stand-alone web app and I want to server the absolute minimum to individual browser versions. Instead of sending the same monolithic polyfill.js to every browser I want to host specialized bundles. My server side code can then simply parse the client info and include the relevant bundle in a template (with a fallback to the big file for exotic browsers). For example if I access the site with Firefox 45 my templates will include
<script src="https://mysite.com/assets/polyfill-ff45.js"></script>
Advantages of this approach:
- Much smaller source needs to be transmitted, especially to modern browsers that already support many of the relevant features natively. This also means less code needs to be executed on each page load.
- Might need even less code since most checks for existing features should no longer be necessary. I already know that browser version X doesn't support feature Y so I can just polyfill it without checking.
I imagine two ways of creating those bundles:
- Access caniuse.com to determine which features need to be polyfilled in which browsers (similar to postcss's autoprefix). Even if it's not reliable on a per-function level it might be enough to categorically exclude larger chunks. This would provide an easy way to generate a large set of browser-specific bundles.
- Create a build-script that can be run directly in any browser and will output a new script containing only those polyfills that were needed. In a sense this is like caching the results of all those little "what do we need" checks in core-js. The result is stored on the server. There are npm packages that simulate browsers so it might still be possible to automate this.
- Use the same script as in 2. but store the result on the client (localStorage). It can then be loaded from there if it exists (though I'm not sure if that's a potential security hole since any code executed on the site could manipulate that code).
What do you think? Is this a reasonable approach or am I so dreaming?
So the README mentions some way of making custom builds via command line but it's not very elaborate. I'll probably have to read the Gruntfile for more details but before I do that I'd like to ask about a more powerful, automated approach.
My questions are:
First, consider the following use cases:
A I'm creating an app targeted at a very specific browser engine. While this is not too common for regular websites it does occur more frequently when engines like webkit are used to provide a GUI for desktop applications (here's an example). I only need a small subset of the entire polyfill.
B I'm creating a regular stand-alone web app and I want to server the absolute minimum to individual browser versions. Instead of sending the same monolithic polyfill.js to every browser I want to host specialized bundles. My server side code can then simply parse the client info and include the relevant bundle in a template (with a fallback to the big file for exotic browsers). For example if I access the site with Firefox 45 my templates will include
Advantages of this approach:
I imagine two ways of creating those bundles:
What do you think? Is this a reasonable approach or am I so dreaming?