How can I make Google's closure library load faster?

Question

I'm writing a simple phone number parser based on [libphonenumber]. Unfortunately, "http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js" takes forever to load, and when I wget the file and just include it as src="base.js", a bunch of errors pop up.

My guess is that this is because the library has not yet loaded yet, so the goog.require() statements are failing.

What can I do?

<!DOCTYPE html>
<html>
<head>
<title>Phone Number Parser</title>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
  goog.require('goog.json');
  goog.require('goog.proto2.ObjectSerializer');
  goog.require('goog.string.StringBuffer');
</script>
<script src="phonemetadata.pb.js"></script>
<script src="phonenumber.pb.js"></script>
<script src="metadata.js"></script>
<script src="phonenumberutil.js"></script>
</head>
<body>
<script>
numbers = ['6509066389', '+40723875777', '720-935-6433', '914-262-7178', '7123040634'];
for (i in numbers) {
    console.log(format_for_five9(numbers[i]));
}

function format_for_five9(phoneNumber) {
  var $ = goog.dom.getElement;
  var regionCode = 'US'; 
  var output = new goog.string.StringBuffer();
  try {
    var phoneUtil = i18n.phonenumbers.PhoneNumberUtil.getInstance();
    var number = phoneUtil.parseAndKeepRawInput(phoneNumber, regionCode);

    number_json_serial = goog.json.serialize(new goog.proto2.ObjectSerializer(goog.proto2.ObjectSerializer.KeyOption.NAME).serialize(number));
    number_json = goog.json.parse(number_json_serial);

    if(phoneUtil.isValidNumberForRegion(number, regionCode)) {
        five9_format = number_json.national_number.toString();
    }
    else {
        five9_format = number_json.country_code.toString() + number_json.national_number.toString();
    }
  } catch (e) {
    output.append('\n' + e);
    console.log(e);
  }
  return five9_format;
}
</script>

</body>
</html>

Charles Ma Charles Ma · Accepted Answer · 2011-08-02T00:29:27

The closure library is meant to be used in conjunction with the closure compiler to compile and minify your javascript for production. It's not intended to be used as a raw file in production. Even in your dev environment you can use http://plovr.com/ to dynamically compile and serve your javascript.

Closure is very verbose in raw form because of the type annotations and the java like structure, the closure compiler will not only minify the script, but also optimize and remove unused scripts to make things faster.

Here's an example of using plovr to dynamically serve your javascript code

java -Xmx256m -jar plovr.jar serve -p 9811 /path/to/your/closure/config.js

This will serve the compiled javascript files on localhost:9811. For production:

java -jar plovr.jar build /path/to/your/closure/config.js > production.js

Have a look at the documentation http://plovr.com/docs.html on how to configure plovr to compile or serve your javascript.

How can I make Google's closure library load faster?

2 Answers