Optimize Webpack to improve overall performance.

Changes include:
1) Remove underscore-string and sprintf-js packages as we were using only %s. Instead, added a function to do the same. Also changed gettext to behave like sprintf directly.
2) backgrid.sizeable.columns was not used anywhere, removed. @babel/polyfill is deprecated, replaced it with core-js.
3) Moved few css to make sure they get minified and bundled.
4) Added Flask-Compress to send static files as compressed gzip. This will reduce network traffic and improve initial load time for pgAdmin.
5) Split few JS files to make code reusable.
6) Lazy load few modules like leaflet, wkx is required only if geometry viewer is opened. snapsvg loaded only when explain plan is executed. This will improve sqleditor initial opening time.

Reviewed By: Khushboo Vashi
Fixes #4701

web/pgadmin/browser/static/js/browser.js

@@ -9,7 +9,7 @@
 
 define('pgadmin.browser', [
   'sources/tree/tree',
-  'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore', 'underscore.string',
+  'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore',
   'bootstrap', 'sources/pgadmin', 'pgadmin.alertifyjs', 'bundled_codemirror',
   'sources/check_node_visibility', './toolbar', 'pgadmin.help',
   'sources/csrf', 'sources/utils', 'sources/window', 'pgadmin.browser.utils',
@@ -22,7 +22,7 @@ define('pgadmin.browser', [
   'pgadmin.browser.keyboard', 'sources/tree/pgadmin_tree_save_state',
 ], function(
   tree,
-  gettext, url_for, require, $, _, S,
+  gettext, url_for, require, $, _,
   Bootstrap, pgAdmin, Alertify, codemirror,
   checkNodeVisibility, toolBar, help, csrfToken, pgadminUtils, pgWindow
 ) {
@@ -724,7 +724,7 @@ define('pgadmin.browser', [
 
         if(!_.isUndefined(confirm_on_refresh_close) && confirm_on_refresh_close.value) {
           /* This message will not be displayed in Chrome, Firefox, Safari as they have disabled it*/
-          let msg = S(gettext('Are you sure you want to close the %s browser?')).sprintf(pgBrowser.utils.app_name).value();
+          let msg = gettext('Are you sure you want to close the %s browser?', pgBrowser.utils.app_name);
           e.originalEvent.returnValue = msg;
           return msg;
         }

web/pgadmin/browser/static/js/collection.js

@@ -11,11 +11,11 @@
 //import Mousetrap from 'mousetrap';
 
 define([
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'backbone', 'alertify', 'backform', 'backgrid', 'sources/browser/generate_url',
   'pgadmin.backform', 'pgadmin.backgrid',
   'pgadmin.browser.node', 'backgrid.select.all',
-], function(gettext, $, _, S, pgAdmin, Backbone, Alertify, Backform, Backgrid, generateUrl) {
+], function(gettext, $, _, pgAdmin, Backbone, Alertify, Backform, Backgrid, generateUrl) {
 
   var pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
 
@@ -315,8 +315,7 @@ define([
               info: info,
             })) {
               Alertify.pgNotifier(
-                error, xhr, S(gettext('Error retrieving properties - %s')).sprintf(
-                  error.message || that.label).value(),
+                error, xhr, gettext('Error retrieving properties - %s', error.message || that.label),
                 function(msg) {
                   if(msg === 'CRYPTKEY_SET') {
                     getAjaxHook();
@@ -383,8 +382,8 @@ define([
             }).fail(function(xhr, error) {
               Alertify.pgNotifier(
                 error, xhr,
-                S(gettext('Error dropping %s'))
-                  .sprintf(d._label.toLowerCase()).value(), function(msg) {
+                gettext('Error dropping %s', d._label.toLowerCase()),
+                function(msg) {
                   if (msg == 'CRYPTKEY_SET') {
                     onDrop(type, false);
                   } else {

web/pgadmin/browser/static/js/datamodel.js

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'underscore', 'underscore.string', 'sources/pgadmin', 'jquery', 'backbone',
-], function(_, S, pgAdmin, $, Backbone) {
+  'underscore', 'sources/pgadmin', 'jquery', 'backbone', 'sources/utils',
+], function(_, pgAdmin, $, Backbone, pgadminUtils) {
   var pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
 
   pgBrowser.DataModel = Backbone.Model.extend({
@@ -777,23 +777,23 @@ define([
         max_value = field.max;
 
       if (!_.isUndefined(min_value) && value < min_value) {
-        return S(pgAdmin.Browser.messages.MUST_GR_EQ).sprintf(label, min_value).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_GR_EQ, label, min_value);
       } else if (!_.isUndefined(max_value) && value > max_value) {
-        return S(pgAdmin.Browser.messages.MUST_LESS_EQ).sprintf(label, max_value).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_LESS_EQ, label, max_value);
       }
       return null;
     },
     number_validate: function(value, field) {
       var pattern = new RegExp('^-?[0-9]+(\.?[0-9]*)?$');
       if (!pattern.test(value)) {
-        return S(pgAdmin.Browser.messages.MUST_BE_NUM).sprintf(field.label).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_BE_NUM, field.label);
       }
       return this.check_min_max(value, field);
     },
     integer_validate: function(value, field) {
       var pattern = new RegExp('^-?[0-9]*$');
       if (!pattern.test(value)) {
-        return S(pgAdmin.Browser.messages.MUST_BE_INT).sprintf(field.label).value();
+        return pgadminUtils.sprintf(pgAdmin.Browser.messages.MUST_BE_INT, field.label);
       }
       return this.check_min_max(value, field);
     },

web/pgadmin/browser/static/js/menu.js

@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 define([
-  'underscore', 'underscore.string', 'sources/pgadmin', 'jquery',
-], function(_, S, pgAdmin, $) {
+  'underscore', 'sources/pgadmin', 'jquery', 'sources/utils',
+], function(_, pgAdmin, $, pgadminUtils) {
   'use strict';
 
   pgAdmin.Browser = pgAdmin.Browser || {};
@@ -141,7 +141,7 @@ define([
         cb.apply(o.module, [o.data, item]);
       } else {
         pgAdmin.Browser.report_error(
-          S('Developer Warning: Callback - "%s" not found!').sprintf(o.cb).value()
+          pgadminUtils.sprintf('Developer Warning: Callback - "%s" not found!', o.cb)
         );
       }
     },

web/pgadmin/browser/static/js/node.js

@@ -9,13 +9,13 @@
 
 define('pgadmin.browser.node', [
   'sources/tree/pgadmin_tree_node', 'sources/url_for',
-  'sources/gettext', 'jquery', 'underscore', 'underscore.string', 'sources/pgadmin',
+  'sources/gettext', 'jquery', 'underscore', 'sources/pgadmin',
   'pgadmin.browser.menu', 'backbone', 'pgadmin.alertifyjs', 'pgadmin.browser.datamodel',
   'backform', 'sources/browser/generate_url', 'pgadmin.help', 'sources/utils',
   'pgadmin.browser.utils', 'pgadmin.backform',
 ], function(
   pgadminTreeNode, url_for,
-  gettext, $, _, S, pgAdmin,
+  gettext, $, _, pgAdmin,
   Menu, Backbone, Alertify, pgBrowser,
   Backform, generateUrl, help,
   commonUtils
@@ -203,9 +203,7 @@ define('pgadmin.browser.node', [
         // For each script type create menu
         _.each(self.hasScriptTypes, function(stype) {
 
-          var type_label = S(
-            gettext('%s Script')
-          ).sprintf(stype.toUpperCase()).value();
+          var type_label = gettext('%s Script',stype.toUpperCase());
 
           stype = stype.toLowerCase();
 
@@ -435,9 +433,8 @@ define('pgadmin.browser.node', [
                   )) {
                     Alertify.pgNotifier(
                       options.textStatus, xhr,
-                      S(
-                        gettext('Error retrieving properties - %s')
-                      ).sprintf(options.errorThrown || _label).value(), function(msg) {
+                      gettext('Error retrieving properties - %s', options.errorThrown || _label),
+                      function(msg) {
                         if(msg === 'CRYPTKEY_SET') {
                           fetchAjaxHook();
                         } else {
@@ -672,8 +669,7 @@ define('pgadmin.browser.node', [
           if (!d)
             return;
 
-          l = S(gettext('Create - %s')).sprintf(
-            [this.label]).value();
+          l = gettext('Create - %s', this.label);
           p = addPanel();
 
           setTimeout(function() {
@@ -696,7 +692,7 @@ define('pgadmin.browser.node', [
 
               Alertify.confirm(
                 gettext('Edit in progress?'),
-                S(msg).sprintf(o.label.toLowerCase(), d.label).value(),
+                commonUtils.sprintf(msg, o.label.toLowerCase(), d.label),
                 function() {
                   setTimeout(function() {
                     o.showProperties(i, d, p, args.action);
@@ -746,29 +742,26 @@ define('pgadmin.browser.node', [
         var msg, title;
         if (input.url == 'delete') {
 
-          msg = S(gettext('Are you sure you want to drop %s "%s" and all the objects that depend on it?'))
-            .sprintf(obj.label.toLowerCase(), d.label).value();
-          title = S(gettext('DROP CASCADE %s?')).sprintf(obj.label).value();
+          msg = gettext('Are you sure you want to drop %s "%s" and all the objects that depend on it?',
+            obj.label.toLowerCase(), d.label);
+          title = gettext('DROP CASCADE %s?', obj.label);
 
           if (!(_.isFunction(obj.canDropCascade) ?
             obj.canDropCascade.apply(obj, [d, i]) : obj.canDropCascade)) {
             Alertify.error(
-              S(gettext('The %s "%s" cannot be dropped.'))
-                .sprintf(obj.label, d.label).value(),
+              gettext('The %s "%s" cannot be dropped.', obj.label, d.label),
               10
             );
             return;
           }
         } else {
-          msg = S(gettext('Are you sure you want to drop %s "%s"?'))
-            .sprintf(obj.label.toLowerCase(), d.label).value();
-          title = S(gettext('DROP %s?')).sprintf(obj.label).value();
+          msg = gettext('Are you sure you want to drop %s "%s"?', obj.label.toLowerCase(), d.label);
+          title = gettext('DROP %s?', obj.label);
 
           if (!(_.isFunction(obj.canDrop) ?
             obj.canDrop.apply(obj, [d, i]) : obj.canDrop)) {
             Alertify.error(
-              S(gettext('The %s "%s" cannot be dropped.'))
-                .sprintf(obj.label, d.label).value(),
+              gettext('The %s "%s" cannot be dropped.', obj.label, d.label),
               10
             );
             return;
@@ -800,9 +793,7 @@ define('pgadmin.browser.node', [
                   }
                 }
                 pgBrowser.report_error(
-                  S(gettext('Error dropping %s: "%s"'))
-                    .sprintf(obj.label, objName)
-                    .value(), msg);
+                  gettext('Error dropping %s: "%s"', obj.label, objName), msg);
               });
           },
           null).show();
@@ -1659,7 +1650,7 @@ define('pgadmin.browser.node', [
         )), function(o) {
           return o.priority;
         }), function(o) {
-          hash = S('%s/%s').sprintf(hash, encodeURI(o._id)).value();
+          hash = commonUtils.sprintf('%s/%s', hash, encodeURI(o._id));
         });
       }
 

web/pgadmin/browser/static/scss/_browser.scss

@@ -9,7 +9,7 @@ kbd,
 pre,
 samp,
 .CodeMirror pre {
-  font-family: $font-family-editor;
+  font-family: $font-family-editor !important;
 }
 
 .sql-editor-grid-container {
@@ -50,4 +50,4 @@ samp,
 .pg-toolbar-btn {
   margin-left: 0.25rem;
   border: $input-btn-border-width solid $btn-secondary-border;
-}
+}