fix: initial bundle size (#776)

Author: ValeraS

package-lock.json

@@ -51,6 +51,7 @@
     "ydb-ui-components": "^3.6.0"
   },
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-app-rewired start",
     "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm start",
     "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
@@ -150,6 +151,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",
     "sass": "^1.32.8",
+    "source-map-explorer": "^2.5.3",
     "stylelint": "^14.3.0",
     "ts-jest": "^28.0.7",
     "typescript": "^4.5.5"

package.json

@@ -52,7 +52,7 @@ export function ErrorBoundaryInner({
 interface ErrorBoundaryFallbackProps {
     error: Error;
     useRetry?: boolean;
-    resetErrorBoundary: () => void;
+    resetErrorBoundary?: () => void;
     onReportProblem?: (error?: Error) => void;
 }
 export function ErrorBoundaryFallback({

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,8 @@
+import {lazyComponent} from '../../utils/lazyComponent';
+
+export const MonacoEditor = lazyComponent(async () => {
+    const Editor = (await import('react-monaco-editor')).default;
+    const {registerLanguages} = await import('../../utils/monaco');
+    registerLanguages();
+    return {Editor};
+}, 'Editor');

src/components/MonacoEditor/MonacoEditor.tsx

@@ -1,5 +1,4 @@
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
 import React, {useEffect, useState} from 'react';
 
 import SplitPaneLib, {SplitProps} from 'react-split';

src/components/SplitPane/SplitPane.tsx

@@ -7,7 +7,6 @@ import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import AppIcons from '../AppIcons/AppIcons';
 import {Navigation} from '../AsideNavigation/Navigation';
 
-import {registerLanguages} from '../../utils/monaco';
 import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 import {settings} from '../UserSettings/settings';
 import {Providers} from './Providers';
@@ -19,8 +18,6 @@ import type {RootState} from '../../store';
 
 import './App.scss';
 
-registerLanguages();
-
 export interface AppProps {
     store: Store;
     history: History;

src/containers/App/App.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
+import throttle from 'lodash/throttle';
 
 import {basename as appBasename} from '../../../store/index';
 import routes, {createHref} from '../../../routes';
@@ -118,7 +118,7 @@ export const HeatmapCanvas = (props) => {
             props.hideTooltip();
         }, 40);
     };
-    const _onCanvasMouseMove = _.throttle((x, y) => {
+    const _onCanvasMouseMove = throttle((x, y) => {
         //this is needed to force ReduxPopup rerender
         const event = new CustomEvent('scroll');
         window.dispatchEvent(event);

src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js

@@ -1,6 +1,6 @@
 import {useEffect, useRef} from 'react';
 import url from 'url';
-import {isEmpty} from 'lodash/fp';
+import isEmpty from 'lodash/isEmpty';
 
 import cn from 'bem-cn-lite';
 

src/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react';
 import cn from 'bem-cn-lite';
-import {isEmpty} from 'lodash/fp';
+import isEmpty from 'lodash/isEmpty';
 
 import {ArrowToggle, Button, Popover} from '@gravity-ui/uikit';
 

src/containers/Node/NodeStructure/Pdisk.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
+import map from 'lodash/map';
+import isEqual from 'lodash/isEqual';
 import {Helmet} from 'react-helmet-async';
 
 import {Loader, Select} from '@gravity-ui/uikit';
@@ -169,12 +170,12 @@ export class TabletsFilters extends React.Component {
         const {tablets, filteredTablets, nodes, stateFilter, typeFilter, error} = this.props;
 
         const states = tabletStates.map((item) => ({value: item, content: item}));
-        const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
+        const types = Array.from(new Set(...[map(tablets, (tblt) => tblt.Type)])).map((item) => ({
             value: item,
             content: item,
         }));
 
-        const nodesForSelect = _.map(nodes, (node) => ({
+        const nodesForSelect = map(nodes, (node) => ({
             content: node.Id,
             value: node.Id,
             meta: node.Host,
@@ -332,9 +333,9 @@ Filters.propTypes = {
 
 const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
     return (
-        _.isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
-        _.isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
-        _.isEqual(prevProps.typeFilter, nextProps.typeFilter)
+        isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
+        isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
+        isEqual(prevProps.typeFilter, nextProps.typeFilter)
     );
 });