fix(ui): reduce webpack bundle size by splitting lodash imports

ui/package-lock.json

@@ -14975,8 +14975,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.differencewith": {
       "version": "4.5.0",
@@ -15048,14 +15047,18 @@
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=",
-      "dev": true
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
     },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "lodash.uniqueid": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz",
+      "integrity": "sha1-MmjyanyI5PSxdY1nknGBTjH6WyY="
+    },
     "loglevel": {
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",

ui/package.json

@@ -24,6 +24,10 @@
     "favico.js": "0.3.10",
     "fontfaceobserver": "2.1.0",
     "lodash": "4.17.15",
+    "lodash.debounce": "4.0.8",
+    "lodash.merge": "4.6.2",
+    "lodash.throttle": "4.1.1",
+    "lodash.uniqueid": "4.0.1",
     "mobx": "5.15.4",
     "mobx-react": "6.2.2",
     "mobx-react-lite": "2.0.7",

ui/src/Common/Fetch.js

@@ -1,4 +1,4 @@
-import merge from "lodash/merge";
+import merge from "lodash.merge";
 
 import promiseRetry from "promise-retry";
 

ui/src/Common/Fetch.test.js

@@ -1,6 +1,6 @@
 import { CommonOptions, FetchGet, FetchPost, FetchRetryConfig } from "./Fetch";
 
-import merge from "lodash/merge";
+import merge from "lodash.merge";
 
 import fetchMock from "fetch-mock";
 

ui/src/Components/Grid/AlertGrid/Grid.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
-import debounce from "lodash/debounce";
+import debounce from "lodash.debounce";
 
 import { Fade } from "react-reveal";
 

ui/src/Components/Grid/AlertGrid/index.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { observable, action, computed } from "mobx";
 import { observer } from "mobx-react";
 
-import debounce from "lodash/debounce";
+import debounce from "lodash.debounce";
 
 import ReactResizeDetector from "react-resize-detector";
 

ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 import { useObserver, useLocalStore } from "mobx-react";
 
-import debounce from "lodash/debounce";
+import debounce from "lodash.debounce";
 
 import InputRange from "react-input-range";
 

ui/src/Hooks/useFetchDelete.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-import merge from "lodash/merge";
+import merge from "lodash.merge";
 
 import { CommonOptions } from "Common/Fetch";
 

ui/src/Hooks/useFetchGet.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 
-import merge from "lodash/merge";
+import merge from "lodash.merge";
 
 import promiseRetry from "promise-retry";
 

ui/src/Stores/AlertStore.js

@@ -1,6 +1,6 @@
 import { observable, action, computed, toJS } from "mobx";
 
-import throttle from "lodash/throttle";
+import throttle from "lodash.throttle";
 
 import equal from "fast-deep-equal";
 

ui/src/Stores/SilenceFormStore.js

@@ -1,6 +1,6 @@
 import { observable, action, computed } from "mobx";
 
-import uniqueId from "lodash/uniqueId";
+import uniqueId from "lodash.uniqueid";
 
 import moment from "moment";