Reduce JS loaded on critical path

As a precursor to incorporating a new language switcher in the new
version of Vector I'd like to improve the performance of loading
the switcher.

It seems most code can be deferred until the language selector
button is clicked.

This shaves around 30kb of resources off the critical path for
most users. There's potential here for a positive performance
impact so we should follow up the deployment by checking the
associated performance graphs to see if there's improvement.

Note, if the compact personal links feature is enabled
there is no performance saving for now. This will be addressed in follow
ups.

Bug: T153844
Bug: T153845
Bug: T237061
Change-Id: I740600d18859422b2f98a5ef92d0321f6e9615a2

extension.json

@@ -232,7 +232,6 @@
 			"scripts": "js/ext.uls.interface.js",
 			"styles": "css/ext.uls.interface.less",
 			"dependencies": [
-				"ext.uls.common",
 				"mediawiki.jqueryMsg",
 				"mediawiki.storage",
 				"mediawiki.user",
@@ -279,6 +278,7 @@
 				"ext.uls.languagenames",
 				"ext.uls.messages",
 				"jquery.uls",
+				"ext.uls.webfonts",
 				"jquery.uls.grid",
 				"mediawiki.util"
 			],
@@ -322,7 +322,6 @@
 			"targets": [ "desktop", "mobile" ],
 			"scripts": "js/ext.uls.webfonts.js",
 			"dependencies": [
-				"ext.uls.common",
 				"ext.uls.preferences",
 				"jquery.client"
 			],

resources/js/ext.uls.common.js

@@ -32,7 +32,6 @@
 
 	mw.uls = mw.uls || {};
 	mw.uls.previousLanguagesStorageKey = 'uls-previous-languages';
-	mw.uls.languageSettingsModules = [ 'ext.uls.displaysettings' ];
 
 	/**
 	 * Change the language of wiki using API or set cookie and reload the page

resources/js/ext.uls.displaysettings.js

@@ -116,12 +116,37 @@
 
 		constructor: DisplaySettings,
 
+		/**
+		 * Loads the webfonts module sets the `webfonts` property when its safe to do so
+		 */
+		setupWebFonts: function () {
+			var d = $.Deferred();
+			mw.loader.using( [ 'ext.uls.webfonts.fonts' ] ).then( function () {
+				if ( this.isWebFontsEnabled ) {
+					mw.webfonts.setup();
+				}
+
+				// Allow the webfonts library to finish loading (hack)
+				setTimeout( function () {
+					this.$webfonts = $( document.body ).data( 'webfonts' );
+					d.resolve();
+				}.bind( this ), 1 );
+			}.bind( this ) );
+			return d;
+		},
 		/**
 		 * Render the module into a given target
 		 */
 		render: function () {
+			this.setupWebFonts().then( function () {
+				this.renderAfterDependenciesLoaded();
+			}.bind( this ) );
+		},
+		/**
+		 * Render the module into a given target after all
+		 */
+		renderAfterDependenciesLoaded: function () {
 			this.$parent.$settingsPanel.empty();
-			this.$webfonts = $( document.body ).data( 'webfonts' );
 			this.$parent.$settingsPanel.append( this.$template );
 			this.prepareLanguages();
 			this.prepareUIFonts();
@@ -546,13 +571,7 @@
 				displaySettings.markDirty();
 
 				if ( this.checked ) {
-					mw.loader.using( 'ext.uls.webfonts.fonts', function () {
-						mw.webfonts.setup();
-
-						// Allow the webfonts library to finish loading
-						setTimeout( function () {
-							displaySettings.$webfonts = $( document.body ).data( 'webfonts' );
-
+					displaySettings.setupWebFonts().then( function () {
 						mw.webfonts.preferences.enable();
 
 						displaySettings.prepareContentFonts();
@@ -564,7 +583,6 @@
 						displaySettings.$webfonts.refresh();
 
 						$fontSelectors.removeClass( 'hide' );
-						}, 1 );
 					} );
 				} else {
 					$fontSelectors.addClass( 'hide' );

resources/js/ext.uls.ime.js

@@ -20,7 +20,8 @@
 ( function () {
 	'use strict';
 
-	var mwImeRulesPath, inputSelector, inputPreferences, ulsIMEPreferences, customHelpLink;
+	var mwImeRulesPath, inputSelector, inputPreferences, ulsIMEPreferences, customHelpLink,
+		languageSettingsModules = [ 'ext.uls.displaysettings' ];
 
 	mwImeRulesPath = mw.config.get( 'wgExtensionAssetsPath' ) +
 		'/UniversalLanguageSelector/lib/jquery.ime/';
@@ -145,7 +146,7 @@
 
 		// Apparently we depend on some styles which are loaded with
 		// these modules. This needs refactoring.
-		mw.loader.using( mw.uls.languageSettingsModules, function () {
+		mw.loader.using( languageSettingsModules, function () {
 			$moreSettingsLink.languagesettings( {
 				defaultModule: 'input',
 				onClose: function () {

resources/js/ext.uls.interface.js

@@ -19,6 +19,7 @@
 
 ( function () {
 	'use strict';
+	var languageSettingsModules = [ 'ext.uls.displaysettings' ];
 
 	/**
 	 * Construct the display settings link
@@ -195,8 +196,10 @@
 
 						event.preventDefault();
 						deferred.done( function () {
+							mw.loader.using( [ 'ext.uls.common' ] ).then( function () {
 								mw.uls.changeLanguage( event.target.lang );
 							} );
+						} );
 
 						mw.hook( 'mw.uls.language.revert' ).fire( deferred );
 
@@ -312,7 +315,7 @@
 					}
 				};
 
-				mw.loader.using( mw.uls.languageSettingsModules, function () {
+				mw.loader.using( languageSettingsModules, function () {
 					$ulsTrigger.languagesettings( languageSettingsOptions ).trigger( 'click' );
 				} );
 
@@ -329,7 +332,7 @@
 						mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'personal' );
 					}
 				} else {
-					mw.loader.using( mw.uls.languageSettingsModules, function () {
+					mw.loader.using( languageSettingsModules, function () {
 						$ulsTrigger.languagesettings();
 
 						$ulsTrigger.trigger( 'click', eventParams );
@@ -354,7 +357,7 @@
 							},
 							onReady: function () {
 								var uls = this;
-								mw.loader.using( mw.uls.languageSettingsModules, function () {
+								mw.loader.using( languageSettingsModules, function () {
 									addDisplaySettings( uls );
 									addInputSettings( uls );
 								} );
@@ -427,7 +430,9 @@
 			mw.storage.set( 'uls-previous-language-code', currentLanguage );
 			mw.storage.set( 'uls-previous-language-autonym', currentAutonym );
 			// Store this language in a list of frequently used languages
+			mw.loader.using( [ 'ext.uls.common' ] ).then( function () {
 				mw.uls.addPreviousLanguage( currentLanguage );
+			} );
 		}
 	}
 

resources/js/ext.uls.webfonts.js

@@ -135,7 +135,10 @@
 		mw.webfonts.preferences.load();
 
 		if ( mw.webfonts.preferences.isEnabled() ) {
-			mw.loader.using( 'ext.uls.webfonts.fonts', mw.webfonts.setup );
+			// Queue to next idle period to optimize loading.
+			mw.requestIdleCallback( function () {
+				mw.loader.using( 'ext.uls.webfonts.fonts' ).then( mw.webfonts.setup );
+			} );
 		}
 	} );