Skip to content
This repository was archived by the owner on Apr 14, 2021. It is now read-only.

Document how to load Intl polyfill with Browserify #83

Closed
slorber opened this issue Mar 10, 2015 · 12 comments
Closed

Document how to load Intl polyfill with Browserify #83

slorber opened this issue Mar 10, 2015 · 12 comments

Comments

@slorber
Copy link

slorber commented Mar 10, 2015

Hi,

Yepnope is deprecated and recommend using a packaging tool such as Browserify. I'm using Browserify but I have absolutly no idea on how to load Intl polyfill with it.

Should I call bundle.add, should I use a shim configuration?

@slorber
Copy link
Author

slorber commented Mar 10, 2015

@caridy
Copy link
Collaborator

caridy commented Mar 10, 2015

I will not recommend using browserify/webpack for polyfills because that means loading all that extra baggage for modern browsers, so you're essentially penalizing users running the latest version of chrome for example. Even though those polyfills will not be applied because they don't need to, they will be loaded and patched.

@slorber
Copy link
Author

slorber commented Mar 10, 2015

So this seems a bit contradictory to what yepnope authors think :)

I don't care so much about bundle, as I split my bundle in appLibs.js + app.js, appLibs.js takes some time to load only the first time and is cached after that. And connection throughput is pretty good, even on mobile. Issuing a new request on mobile just to load yepnope can actually take more time than having some useless polyfills into a single bundle file.

@caridy
Copy link
Collaborator

caridy commented Mar 10, 2015

from the historical POV: yepnope was creating by alex way before polyfills became popular :)

from the perf POV: it is not only about loading cacheable content (appLibs.js) it is about the cost of parsing and executing that code unnecessarily, and penalizing users of newer/evergreen browsers.

from the eng POV: using yepnope means that your app logic will have to wait for a callback (yepnope callback) to initialize your code, which isn't ideal, while using something like the polyfill service, you can have something like this:

<script>
console.log(new Intl.NumberFormat('en').format(Date.now()));
</script>

and you know that will work, there is no wrapping, it just works, and more than that, it works in the best possible way!

@slorber
Copy link
Author

slorber commented Mar 13, 2015

@caridy I understand your point about parsing and loading in memory unnecessary JS.

I don't understand what you mean by "the polyfill service"?

@caridy
Copy link
Collaborator

caridy commented Mar 13, 2015

@slorber https://cdn.polyfill.io/v1/docs/, that's one example of a polyfill service. Probably the most successful one. I don't think they support Intl yet, but we can ask them.

@slorber
Copy link
Author

slorber commented Mar 13, 2015

never heard of this before but I really like this! thanks
polyfillpolyfill/polyfill-service#108

@xjamundx
Copy link

Yeah running into the same thing for webpack, where the webpack build even minified adds like 600kb. I know there are things like the ContextReplacementPlugin that people used to solve a similar issue for moment, but I'm looking for any guidance. http://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack

Edit: In my case it looks like the solution was just require('intl/Intl'). I don't need any country-specific stuff as I'm just using the basic messaging stuff..with react-intl

@xjamundx
Copy link

Proper webpack answer:

// lib/compat.js
module.exports = function(callback) {
    // shim for Intl needs to be loaded dynamically
    // so we callback when we're done to represent
    // some kind of "compatReady" event
    if (!window.Intl) {
        require(['intl/Intl'], function(Intl) {
            window.Intl = Intl;
            callback();
        });
    } else {
        setTimeout(callback, 0); // force async
    }
};

// app.js
var compatReady = require('lib/compat');
compatReady(startApp);

Edit: Also posted to stackoverflow http://stackoverflow.com/questions/29804786/intl-js-polyfill-shim-with-webpack/29804787

@caridy
Copy link
Collaborator

caridy commented Jul 8, 2015

Intl support is in QA for the polyfill service: http://qa.polyfill.io/v1/polyfill.js?features=Intl.~locale.es, I will close this issue as soon as it lands in production, after updating the docs on how to load the polyfill.

@caridy
Copy link
Collaborator

caridy commented Jul 9, 2015

Some progress on this: #121

@caridy
Copy link
Collaborator

caridy commented Feb 11, 2016

Webpack and Browserify are now documented in the README.md.

@caridy caridy closed this as completed Feb 11, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants