refactor: reduce bundle size attempt that resulted to a refactor (#438)

next.config.js

@@ -12,14 +12,20 @@ module.exports = {
     appId: process.env.APP_ID,
     measurementId: process.env.MEASUREMENT_ID,
   },
-  transpilePackages: ['@mui/system', '@mui/material', '@mui/icons-material'],
+  compiler:{
+    removeConsole: true,
+  },
+  transpilePackages: ['@mui/system', '@mui/material', '@mui/icons-material','@mui/styles'],
   modularizeImports: {
     '@mui/material/?(((\\w*)?/?)*)': {
       transform: '@mui/material/{{ matches.[1] }}/{{member}}',
     },
     '@mui/icons-material/?(((\\w*)?/?)*)': {
       transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',
     },
+    '@mui/styles/?(((\\w*)?/?)*)':{
+      transform: '@mui/styles/{{ matches.[1] }}/{{member}}'
+    },
     async headers() {
       return [
         {

package.json

@@ -55,6 +55,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.4.2",
+    "@next/bundle-analyzer": "^13.4.19",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
@@ -68,7 +69,9 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.0.26",
     "babel-loader": "^9.1.2",
+    "babel-plugin-import": "^1.13.8",
     "commitizen": "^4.3.0",
+    "cross-env": "^7.0.3",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.42.0",
     "eslint-config-next": "^13.1.3",

pages/_document.tsx

@@ -63,9 +63,9 @@ MyDocument.getInitialProps = async (ctx) => {
   ctx.renderPage = () =>
     originalRenderPage({
       enhanceApp: (App: any) =>
-        function EnhanceApp(props) {
+        (function EnhanceApp(props) {
           return <App emotionCache={cache} {...props} />;
-        },
+        }),
     });
 
   const initialProps = await Document.getInitialProps(ctx);

pages/about.tsx

@@ -1,9 +1,8 @@
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
 import Link from '@src/Link';
 import type { NextPage } from 'next';
 
+import { Box, Container, Typography } from '@mui/material';
+
 const About: NextPage = () => (
   <Container maxWidth='lg'>
     <Box

pages/course/[courseid].tsx

@@ -10,22 +10,24 @@ import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
 import LinkIcon from '@mui/icons-material/Link';
 import RateReviewIcon from '@mui/icons-material/RateReview';
 import ShareIcon from '@mui/icons-material/Share';
-import { useMediaQuery } from '@mui/material';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CircularProgress from '@mui/material/CircularProgress';
-import Container from '@mui/material/Container';
-import Dialog from '@mui/material/Dialog';
-import Grid from '@mui/material/Grid';
-import Snackbar from '@mui/material/Snackbar';
-import SpeedDial from '@mui/material/SpeedDial';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Typography from '@mui/material/Typography';
+import {
+  useMediaQuery,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CircularProgress,
+  Container,
+  Dialog,
+  Grid,
+  Snackbar,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
 import Link from '@src/Link';
 import {
   mapPayloadToArray,

pages/index.tsx

@@ -2,11 +2,7 @@ import backend from '@backend/index';
 import { courseFields } from '@globals/constants';
 import { Course } from '@globals/types';
 import { mapDynamicCoursesDataToCourses } from '@globals/utilities';
-import { Tooltip, useMediaQuery } from '@mui/material';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
+import { Tooltip, useMediaQuery, Box, Container, Grid, Typography } from '@mui/material';
 
 import {
   DataGrid,

pages/recents.tsx

@@ -2,13 +2,10 @@ import backend from '@backend/index';
 import ReviewCard from '@components/ReviewCard';
 import { REVIEWS_RECENT_LEN } from '@globals/constants';
 import { Review } from '@globals/types';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 import type { NextPage } from 'next';
 
+import { Box, CircularProgress, Container, Grid, Typography } from '@mui/material';
+
 const { getReviewsRecent } = backend;
 
 interface RecentsProps {

pages/user/reviews.tsx

@@ -3,18 +3,15 @@ import { useAuth } from '@context/AuthContext';
 import { FirebaseAuthUser } from '@context/types';
 import { DESC, EMOJI_NO_REVIEWS, reviewFields } from '@globals/constants';
 import { Review, TUserReviews } from '@globals/types';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 import { mapPayloadToArray } from '@src/utilities';
 import type { NextPage } from 'next';
 import { useEffect, useState } from 'react';
 
 import { addUser, getUser } from '@backend/dbOperations';
 import { isGTEmail } from '@globals/utilities';
 
+import { Box, CircularProgress, Container, Grid, Typography } from '@mui/material';
+
 const UserReviews: NextPage = () => {
   const [loading, setLoading] = useState<boolean>(true);
 

src/Copyright.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 
 const Copyright = () => (
   <Typography

src/Link.tsx

@@ -1,9 +1,11 @@
-import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
+import { LinkProps as MuiLinkProps } from '@mui/material/Link';
 import clsx from 'clsx';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import { useRouter } from 'next/router';
 import * as React from 'react';
 
+import { Link as MuiLink } from '@mui/material';
+
 // Add support for the sx prop for consistency with the other branches.
 
 interface NextLinkComposedProps

src/ProTip.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import Link from '@mui/material/Link';
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { Link, SvgIcon, Typography } from '@mui/material';
 
 const LightBulbIcon = (props: SvgIconProps) => (
   <SvgIcon {...props}>

src/assets/GoogleIcon.tsx

@@ -1,5 +1,5 @@
-import SvgIcon from '@mui/material/SvgIcon';
 import { TKeyMap } from '@globals/types';
+import { SvgIcon } from '@mui/material';
 
 type TGoogleIconProps = TKeyMap;
 

src/components/AlertBar.tsx

@@ -1,6 +1,5 @@
 import { useAlert } from '@context/AlertContext';
-import Alert from '@mui/material/Alert';
-import Box from '@mui/material/Box';
+import { Alert, Box } from '@mui/material';
 
 export const AlertBar = () => {
   const { alert, setAlert } = useAlert();

src/components/ClassCard.tsx

@@ -1,15 +1,18 @@
-import * as React from 'react';
+import {
+  Box,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  Rating,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import { useRouter } from 'next/router';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Tooltip from '@mui/material/Tooltip';
-import Rating from '@mui/material/Rating';
-import { CardActionArea, CardActions } from '@mui/material';
+
 import { grey } from '@mui/material/colors';
-import Typography from '@mui/material/Typography';
 
 interface ClassCardProps {
   title: string;

src/components/LoginContent.tsx

@@ -2,10 +2,7 @@ import { useAuth } from '@context/AuthContext';
 import { useMenu } from '@context/MenuContext';
 import { TSignInAction } from '@context/types';
 import { TProviderName } from '@globals/types';
-import { Grid } from '@mui/material';
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
+import { Grid, Stack, TextField, Typography } from '@mui/material';
 import type { NextPage } from 'next';
 import { useState } from 'react';
 import SocialButton from '@components/SocialButton';

src/components/NavBar.tsx

@@ -5,14 +5,10 @@ import { useAuth } from '@context/AuthContext';
 import { useMenu } from '@context/MenuContext';
 import { FirebaseAuthUser } from '@context/types';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import { Tooltip } from '@mui/material';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import { AppBar, Box, Button, Dialog, Toolbar, Tooltip, Typography } from '@mui/material';
+
 import { grey } from '@mui/material/colors';
-import Dialog from '@mui/material/Dialog';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
+
 import Link from '@src/Link';
 interface NavBarProps {}
 

src/components/ProfileMenu.tsx

@@ -3,10 +3,7 @@ import { useMenu } from '@context/MenuContext';
 import { FirebaseAuthUser } from '@context/types';
 import Link from '@src/Link';
 
-import { Avatar, Container } from '@mui/material';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Tooltip from '@mui/material/Tooltip';
+import { Avatar, Container, Menu, MenuItem, Tooltip } from '@mui/material';
 
 export interface MenuLinksProps {
   [key: string]: any;

src/components/ReviewCard.tsx

@@ -6,20 +6,27 @@ import { getCourseDataStatic } from '@globals/utilities';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
-import { Button, IconButton, Snackbar, Tooltip } from '@mui/material';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import CircularProgress from '@mui/material/CircularProgress';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Snackbar,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+
 import { grey } from '@mui/material/colors';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
+
 import { techGold } from '@src/colorPalette';
 import {
   mapDifficulty,

src/components/ReviewForm.tsx

@@ -5,8 +5,6 @@ import { useAuth } from '@context/AuthContext';
 import { FirebaseAuthUser } from '@context/types';
 import { SEMESTER_ID } from '@globals/constants';
 
-import CircularProgress from '@mui/material/CircularProgress';
-
 import {
   Course,
   TCourseId,
@@ -17,15 +15,19 @@ import {
   TUserReviews,
 } from '@globals/types';
 import { isGTEmail } from '@globals/utilities';
-import { Button, TextField } from '@mui/material';
-import Alert from '@mui/material/Alert';
-import Grid from '@mui/material/Grid';
-import InputAdornment from '@mui/material/InputAdornment';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import Rating from '@mui/material/Rating';
-import Select from '@mui/material/Select';
-import Typography from '@mui/material/Typography';
+import {
+  Button,
+  TextField,
+  CircularProgress,
+  Alert,
+  Grid,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Rating,
+  Select,
+  Typography,
+} from '@mui/material';
 import { mapSemesterIdToName, mapSemsterIdToTerm } from '@src/utilities';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';

src/components/SocialButton.tsx

@@ -1,10 +1,10 @@
-import Button from '@mui/material/Button';
 import GoogleIcon from '@src/assets/GoogleIcon';
 import FacebookIcon from '@mui/icons-material/Facebook';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import AppleIcon from '@mui/icons-material/Apple';
 import { TKeyMap, TProviderName } from '@globals/types';
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import { Button } from '@mui/material';
 
 interface SocialButtonProps {
   key?: number;

src/stories/ClassCard.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Grid from '@mui/material/Grid';
 import ClassCard from '@components/ClassCard';
+import { Grid } from '@mui/material';
 
 export default {
   title: 'General/ClassCard',

src/theme.ts

@@ -1,6 +1,8 @@
+import { navyBlue, techGold } from '@src/colorPalette';
+
 import { createTheme } from '@mui/material/styles';
+
 import { red } from '@mui/material/colors';
-import { navyBlue, techGold } from '@src/colorPalette';
 
 // Create a theme instance.
 const theme = createTheme({