From d860dae3ca858d855999f1741e3ae2eb4fc3c3cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Mon, 18 May 2020 14:57:39 +0100 Subject: [PATCH] fix(ui): reduce webpack bundle size by splitting lodash imports --- ui/package-lock.json | 11 +++++++---- ui/package.json | 4 ++++ ui/src/Common/Fetch.js | 2 +- ui/src/Common/Fetch.test.js | 2 +- ui/src/Components/Grid/AlertGrid/Grid.js | 2 +- ui/src/Components/Grid/AlertGrid/index.js | 2 +- .../Configuration/AlertGroupWidthConfiguration.js | 2 +- ui/src/Hooks/useFetchDelete.js | 2 +- ui/src/Hooks/useFetchGet.js | 2 +- ui/src/Stores/AlertStore.js | 2 +- ui/src/Stores/SilenceFormStore.js | 2 +- .../{lodash/debounce.js => lodash.debounce.js} | 0 .../{lodash/throttle.js => lodash.throttle.js} | 0 13 files changed, 20 insertions(+), 13 deletions(-) rename ui/src/__mocks__/{lodash/debounce.js => lodash.debounce.js} (100%) rename ui/src/__mocks__/{lodash/throttle.js => lodash.throttle.js} (100%) diff --git a/ui/package-lock.json b/ui/package-lock.json index 932580da1..717561b59 100644 --- a/ui/package-lock.json +++ b/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", diff --git a/ui/package.json b/ui/package.json index 44ec1db21..efe268607 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/Common/Fetch.js b/ui/src/Common/Fetch.js index ab6dbcd43..0d72aa876 100644 --- a/ui/src/Common/Fetch.js +++ b/ui/src/Common/Fetch.js @@ -1,4 +1,4 @@ -import merge from "lodash/merge"; +import merge from "lodash.merge"; import promiseRetry from "promise-retry"; diff --git a/ui/src/Common/Fetch.test.js b/ui/src/Common/Fetch.test.js index ab0ae1a0d..1f96c0aea 100644 --- a/ui/src/Common/Fetch.test.js +++ b/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"; diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js index 42bf1dc60..fb7c15b86 100644 --- a/ui/src/Components/Grid/AlertGrid/Grid.js +++ b/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"; diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index 4c48d24c3..0f5022118 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/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"; diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js index 179579769..5eb23f8bc 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js +++ b/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"; diff --git a/ui/src/Hooks/useFetchDelete.js b/ui/src/Hooks/useFetchDelete.js index dabbbd651..42db77e67 100644 --- a/ui/src/Hooks/useFetchDelete.js +++ b/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"; diff --git a/ui/src/Hooks/useFetchGet.js b/ui/src/Hooks/useFetchGet.js index 71cd8856c..8a68cf98b 100644 --- a/ui/src/Hooks/useFetchGet.js +++ b/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"; diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js index 87a989af3..84a9edcc3 100644 --- a/ui/src/Stores/AlertStore.js +++ b/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"; diff --git a/ui/src/Stores/SilenceFormStore.js b/ui/src/Stores/SilenceFormStore.js index 059c0e00f..75ec42d94 100644 --- a/ui/src/Stores/SilenceFormStore.js +++ b/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"; diff --git a/ui/src/__mocks__/lodash/debounce.js b/ui/src/__mocks__/lodash.debounce.js similarity index 100% rename from ui/src/__mocks__/lodash/debounce.js rename to ui/src/__mocks__/lodash.debounce.js diff --git a/ui/src/__mocks__/lodash/throttle.js b/ui/src/__mocks__/lodash.throttle.js similarity index 100% rename from ui/src/__mocks__/lodash/throttle.js rename to ui/src/__mocks__/lodash.throttle.js