From 5cd10ce8625e8458ac5c290aa0df513ed6c80cfc Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Fri, 2 Oct 2020 16:33:54 -0700 Subject: [PATCH] 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 | 3 +- resources/js/ext.uls.common.js | 1 - resources/js/ext.uls.displaysettings.js | 52 +++++++++++++++++-------- resources/js/ext.uls.ime.js | 5 ++- resources/js/ext.uls.interface.js | 15 ++++--- resources/js/ext.uls.webfonts.js | 5 ++- 6 files changed, 53 insertions(+), 28 deletions(-) diff --git a/extension.json b/extension.json index b2cc0fe7..ef13283a 100644 --- a/extension.json +++ b/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" ], diff --git a/resources/js/ext.uls.common.js b/resources/js/ext.uls.common.js index be76a791..b0163b86 100644 --- a/resources/js/ext.uls.common.js +++ b/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 diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js index 9a1feab8..c68875a0 100644 --- a/resources/js/ext.uls.displaysettings.js +++ b/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,25 +571,18 @@ displaySettings.markDirty(); if ( this.checked ) { - mw.loader.using( 'ext.uls.webfonts.fonts', function () { - mw.webfonts.setup(); + displaySettings.setupWebFonts().then( function () { + mw.webfonts.preferences.enable(); - // Allow the webfonts library to finish loading - setTimeout( function () { - displaySettings.$webfonts = $( document.body ).data( 'webfonts' ); + displaySettings.prepareContentFonts(); + displaySettings.prepareUIFonts(); - mw.webfonts.preferences.enable(); + displaySettings.i18n(); + // eslint-disable-next-line no-jquery/no-sizzle + displaySettings.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) ); + displaySettings.$webfonts.refresh(); - displaySettings.prepareContentFonts(); - displaySettings.prepareUIFonts(); - - displaySettings.i18n(); - // eslint-disable-next-line no-jquery/no-sizzle - displaySettings.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) ); - displaySettings.$webfonts.refresh(); - - $fontSelectors.removeClass( 'hide' ); - }, 1 ); + $fontSelectors.removeClass( 'hide' ); } ); } else { $fontSelectors.addClass( 'hide' ); diff --git a/resources/js/ext.uls.ime.js b/resources/js/ext.uls.ime.js index e0f50283..ec260d9a 100644 --- a/resources/js/ext.uls.ime.js +++ b/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 () { diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index 9004b4d5..b95e4205 100644 --- a/resources/js/ext.uls.interface.js +++ b/resources/js/ext.uls.interface.js @@ -19,6 +19,7 @@ ( function () { 'use strict'; + var languageSettingsModules = [ 'ext.uls.displaysettings' ]; /** * Construct the display settings link @@ -195,7 +196,9 @@ event.preventDefault(); deferred.done( function () { - mw.uls.changeLanguage( event.target.lang ); + 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.uls.addPreviousLanguage( currentLanguage ); + mw.loader.using( [ 'ext.uls.common' ] ).then( function () { + mw.uls.addPreviousLanguage( currentLanguage ); + } ); } } diff --git a/resources/js/ext.uls.webfonts.js b/resources/js/ext.uls.webfonts.js index cf942772..e9189a46 100644 --- a/resources/js/ext.uls.webfonts.js +++ b/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 ); + } ); } } );