Reduce bundle size (#1103)

* Add analysis tools

* Use deep imports to reduce bundle size

* Remove tslint config

* Remove unused packages

* Remove lodash-es references

* Use root level mui imports

* Remove mui from restricted imports

.eslintrc.json

@@ -169,7 +169,13 @@
     "space-before-function-paren": "off",
     "spaced-comment": "error",
     "use-isnan": "error",
-    "valid-typeof": "off"
+    "valid-typeof": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": ["lodash"]
+      }
+    ]
   },
   "ignorePatterns": ["node_modules/", "**/types/**/*"]
 }

package.json

@@ -55,7 +55,6 @@
     "jss": "^9.8.7",
     "keycode": "^2.2.0",
     "lodash": "^4.17.20",
-    "lodash-es": "^4.17.14",
     "moment-timezone": "^0.5.32",
     "qs": "^6.9.0",
     "react": "^16.12.0",
@@ -161,14 +160,17 @@
     "react-intl-translations-manager": "^5.0.3",
     "react-test-renderer": "^16.12.0",
     "regenerator-runtime": "^0.11.1",
+    "register-service-worker": "^1.7.2",
     "release-it": "^14.5.0",
     "require-context.macro": "^1.1.1",
     "rimraf": "^3.0.0",
     "setup-polly-jest": "^0.9.1",
+    "speed-measure-webpack-plugin": "^1.5.0",
     "start-server-and-test": "^1.11.0",
     "ts-jest": "^24.2.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "webpack": "^4.35.3",
+    "webpack-bundle-analyzer": "^4.4.1",
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "2.2.0",
@@ -177,8 +179,7 @@
     "workbox-precaching": "^6.1.2",
     "workbox-routing": "^6.1.2",
     "workbox-strategies": "^6.1.2",
-    "workbox-webpack-plugin": "^6.1.2",
-    "register-service-worker": "^1.7.2"
+    "workbox-webpack-plugin": "^6.1.2"
   },
   "optionalDependencies": {
     "fsevents": "^1.2.9"
@@ -204,8 +205,7 @@
       "@assets(.*)$": "<rootDir>/assets/$1",
       "@locale(.*)$": "<rootDir>/locale/$1",
       "@saleor(?!.*macaw)(.*)$": "<rootDir>/src/$1",
-      "@test/(.*)$": "<rootDir>/testUtils/$1",
-      "^lodash-es(.*)$": "lodash/$1"
+      "@test/(.*)$": "<rootDir>/testUtils/$1"
     }
   },
   "husky": {

src/Baseline.tsx

@@ -1,4 +1,4 @@
-import CssBaseline from "@material-ui/core/CssBaseline";
+import { CssBaseline } from "@material-ui/core";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import { createStyles, SaleorTheme, withStyles } from "@saleor/theme";
 import React from "react";

src/apps/components/AppActivateDialog/AppActivateDialog.tsx

@@ -1,4 +1,4 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
+import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@saleor/misc";

src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx

@@ -1,4 +1,4 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
+import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@saleor/misc";

src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx

@@ -1,4 +1,4 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
+import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@saleor/misc";

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -1,7 +1,4 @@
-import Button from "@material-ui/core/Button";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import Typography from "@material-ui/core/Typography";
+import { Button, Card, CardContent, Typography } from "@material-ui/core";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";

src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx

@@ -1,5 +1,4 @@
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
+import { Button, Typography } from "@material-ui/core";
 import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";

src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.tsx

@@ -1,4 +1,4 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
+import { DialogContentText } from "@material-ui/core";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@saleor/misc";

src/apps/components/AppInstallErrorPage/AppInstallErrorPage.tsx

@@ -1,7 +1,5 @@
 import errorImg from "@assets/images/app-install-error.svg";
-import Button from "@material-ui/core/Button";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
+import { Button, Grid, Typography } from "@material-ui/core";
 import Container from "@saleor/components/Container";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -1,10 +1,6 @@
 import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
 import plusIcon from "@assets/images/plus-icon.svg";
-import Button from "@material-ui/core/Button";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
+import { Button, Card, CardContent, Grid, Typography } from "@material-ui/core";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";

src/apps/components/AppsInProgress/AppsInProgress.tsx

@@ -1,11 +1,13 @@
-import Button from "@material-ui/core/Button";
-import Progress from "@material-ui/core/CircularProgress";
-import IconButton from "@material-ui/core/IconButton";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import Tooltip from "@material-ui/core/Tooltip";
-import Typography from "@material-ui/core/Typography";
+import {
+  Button,
+  CircularProgress as Progress,
+  IconButton,
+  TableBody,
+  TableCell,
+  TableRow,
+  Tooltip,
+  Typography
+} from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import ErrorIcon from "@material-ui/icons/Error";
 import CardTitle from "@saleor/components/CardTitle";

src/apps/components/AppsSkeleton/AppsSkeleton.tsx

@@ -1,5 +1,4 @@
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
+import { TableCell, TableRow } from "@material-ui/core";
 import Skeleton from "@saleor/components/Skeleton";
 import React from "react";