Set up bundle size analysis and start to reduce bundle size

craco.config.js

@@ -1,5 +1,8 @@
 const CracoAntDesignPlugin = require('craco-antd');
 
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 process.env.BROWSER = 'none';
 
 const site = process.env.REACT_APP_TENANT || 'SFTT';
@@ -33,4 +36,7 @@ module.exports = {
       ],
     ],
   },
+  webpack: {
+    plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'server' })],
+  },
 };

package.json

@@ -85,6 +85,7 @@
     "prettier": "^2.1.2",
     "redux-devtools": "^3.5.0",
     "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0"
+    "tslint-config-prettier": "^1.18.0",
+    "webpack-bundle-analyzer": "^4.9.1"
   }
 }

src/App.tsx

@@ -18,7 +18,7 @@ import Landing from './containers/landing';
 import AdminDashboard from './containers/adminDashboard';
 import TreePage from './containers/treePage';
 import MyTrees from './containers/myTrees';
-import { Layout } from 'antd';
+import Layout from 'antd/es/layout';
 import Home from './containers/home';
 import Signup from './containers/signup';
 import Login from './containers/login';

src/components/adoptedSitesTable/index.tsx

@@ -1,5 +1,5 @@
 import React, { SetStateAction, useMemo, useState } from 'react';
-import { Table } from 'antd';
+import Table from 'antd/es/table';
 import type { ColumnsType } from 'antd/es/table';
 import { EmailerTableData, FilteredSite } from '../../containers/email/types';
 import { NEIGHBORHOOD_IDS } from '../../assets/content';

src/components/blockCard/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Card, Typography } from 'antd';
-import { CloseCircleOutlined } from '@ant-design/icons';
+import Card from 'antd/es/card';
+import Typography from 'antd/es/typography';
+import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
 import styled from 'styled-components';
 import { CardInfo } from '../themedComponents';
 import { MID_GREEN, TEXT_GREY, LIGHT_GREY } from '../../utils/colors';

src/components/blockTabs/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { List, Tabs } from 'antd';
+import List from 'antd/es/list';
+import Tabs from 'antd/es/tabs';
 import styled from 'styled-components';
 import { StyledListItem, ScrollableListContainer } from '../themedComponents';
 import { DARK_GREY } from '../../utils/colors';

src/components/careEntry/index.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 import { TreeCare } from '../../containers/treePage/ducks/types';
-import { Row, Col, Typography, Button, Form, Modal, message } from 'antd';
+import Row from 'antd/es/row';
+import Col from 'antd/es/col';
+import Typography from 'antd/es/typography';
+import Button from 'antd/es/button';
+import Form from 'antd/es/form';
+import Modal from 'antd/es/modal';
+import message from 'antd/es/message';
 import {
   DARK_GREEN,
   TEXT_GREY,
@@ -9,7 +15,8 @@ import {
   WHITE,
 } from '../../utils/colors';
 import { treeCareToMoment } from '../../utils/treeFunctions';
-import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import EditOutlined from '@ant-design/icons/EditOutlined';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import { useDispatch, useSelector } from 'react-redux';
 import { isAdmin, getUserID } from '../../auth/ducks/selectors';
 import styled from 'styled-components';

src/components/copyText/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Tooltip } from 'antd';
+import Button from 'antd/es/button';
+import Tooltip from 'antd/es/tooltip';
 import styled from 'styled-components';
 
 interface CopyTextProps {

src/components/emailerFilterControls/index.tsx

@@ -1,15 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 import { EmailerFilters } from '../../containers/email/types';
-import {
-  Collapse,
-  Slider,
-  DatePicker,
-  Select,
-  message,
-  SelectProps,
-} from 'antd';
-import { SliderMarks } from 'antd/lib/slider';
+import Collapse from 'antd/es/collapse';
+import Slider from 'antd/es/slider';
+import type { SliderMarks } from 'antd/es/slider';
+import DatePicker from 'antd/es/date-picker';
+import Select from 'antd/es/select';
+import type { SelectProps } from 'antd/es/select';
+import message from 'antd/es/message';
 import { Neighborhoods } from '../../assets/content';
 import apiClient from '../../api/apiClient';
 import { formatActivityCountRange } from '../../utils/stringFormat';

src/components/entryList/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Typography } from 'antd';
+import Button from 'antd/es/button';
+import Typography from 'antd/es/typography';
 import { Entry } from '../../containers/treePage/ducks/types';
 import {
   DARK_GREEN,

src/components/featuredStats/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Card, Statistic, Typography } from 'antd';
+import Card from 'antd/es/card';
+import Statistic from 'antd/es/statistic';
+import Typography from 'antd/es/typography';
 
 const FeaturedStatsContainer = styled.div`
   display: flex;

src/components/forms/changeEmailForm/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { message, Form, Input } from 'antd';
+import message from 'antd/es/message';
+import Form from 'antd/es/form';
+import Input from 'antd/es/input';
 import ProtectedApiClient from '../../../api/protectedApiClient';
 import { enterEmailRules, loginPasswordRules } from '../../../utils/formRules';
 import { ChangeEmailRequest } from '../ducks/types';

src/components/forms/changePasswordForm/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { message, Form, Input } from 'antd';
+import message from 'antd/es/message';
+import Form from 'antd/es/form';
+import Input from 'antd/es/input';
 import ProtectedApiClient from '../../../api/protectedApiClient';
 import {
   confirmPasswordRules,

src/components/forms/changePrivilegeForm/index.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Form, Input, message, Select } from 'antd';
+import Form from 'antd/es/form';
+import Input from 'antd/es/input';
+import message from 'antd/es/message';
+import Select from 'antd/es/select';
 import ProtectedApiClient from '../../../api/protectedApiClient';
 import {
   loginPasswordRules,

src/components/forms/changeUsernameForm/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { message, Form, Input } from 'antd';
+import message from 'antd/es/message';
+import Form from 'antd/es/form';
+import Input from 'antd/es/input';
 import ProtectedApiClient from '../../../api/protectedApiClient';
 import { loginPasswordRules, usernameRules } from '../../../utils/formRules';
 import { ChangeUsernameRequest } from '../ducks/types';

src/components/forms/deleteAccountForm/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { message, Form, Input } from 'antd';
+import message from 'antd/es/message';
+import Form from 'antd/es/form';
+import Input from 'antd/es/input';
 import ProtectedApiClient from '../../../api/protectedApiClient';
 import { loginPasswordRules } from '../../../utils/formRules';
 import { AuthRequest } from '../ducks/types';

src/components/forms/ducks/types.ts

@@ -1,4 +1,4 @@
-import { CheckboxOptionType } from 'antd/lib/checkbox/Group';
+import type { CheckboxOptionType } from 'antd/es/checkbox/Group';
 import moment from 'moment';
 import { PrivilegeLevel, SignupRequest } from '../../../auth/ducks/types';
 import { SiteEntryStatus } from '../../../containers/treePage/ducks/types';

src/components/forms/editSiteForm/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Form, Input, Select } from 'antd';
-import { FormInstance } from 'antd/es/form';
+import Form from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
+import Input from 'antd/es/input';
+import Select from 'antd/es/select';
 import { requiredRule, zipCodeRules } from '../../../utils/formRules';
 import { EditSiteRequest } from '../ducks/types';
 import { NEIGHBORHOOD_OPTS } from '../../../assets/content';

src/components/forms/editTreeNameForm/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Form, Input } from 'antd';
-import { FormInstance } from 'antd/es/form';
+import Form from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
+import Input from 'antd/es/input';
 import { treeNameRules } from '../../../utils/formRules';
 import { NameSiteEntryRequest } from '../ducks/types';
 import { GreenButton, WhiteButton } from '../../themedComponents';

src/components/forms/exportDataForm/index.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Form,
-  FormInstance,
-  InputNumber,
-  Select,
-  Typography,
-} from 'antd';
+import Button from 'antd/es/button';
+import Form from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
+import InputNumber from 'antd/es/input-number';
+import Select from 'antd/es/select';
+import Typography from 'antd/es/typography';
 import { site } from '../../../constants';
 import { positiveNumberRules, requiredRule } from '../../../utils/formRules';
 import { InlineFormItem } from '../../themedComponents';

src/components/forms/loginForm/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { LoginRequest } from '../../../auth/ducks/types';
-import { Form, Input } from 'antd';
+import Form from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
+import Input from 'antd/es/input';
 import styled from 'styled-components';
 import { WindowTypes } from '../../windowDimensions';
-import { FormInstance } from 'antd/es/form';
 import { enterEmailRules, loginPasswordRules } from '../../../utils/formRules';
 import { SubmitButton } from '../../themedComponents';
 import { useTranslation } from 'react-i18next';

src/components/forms/sendEmailForm/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Form, Input, message } from 'antd';
+import Form from 'antd/es/form';
+import Input from 'antd/es/input';
+import message from 'antd/es/message';
 import { SubmitButton } from '../../../components/themedComponents';
 import ProtectedApiClient from '../../../api/protectedApiClient';
 import {

src/components/forms/signupForm/index.tsx

@@ -1,12 +1,13 @@
 import React, { PropsWithChildren } from 'react';
-import { Form, Input } from 'antd';
+import Form from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
+import Input from 'antd/es/input';
 import {
   FormHalfItem,
   FormRow,
   FullWidthSpace,
   Gap,
 } from '../../themedComponents';
-import { FormInstance } from 'antd/es/form';
 import {
   confirmPasswordRules,
   enterEmailRules,

src/components/forms/stewardshipForm/index.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import moment from 'moment';
-import { Form, Checkbox, Typography, DatePicker, FormInstance } from 'antd';
+import Form from 'antd/es/form';
+import type { FormInstance } from 'antd/es/form';
+import Checkbox from 'antd/es/checkbox';
+import Typography from 'antd/es/typography';
+import DatePicker from 'antd/es/date-picker';
 import styled from 'styled-components';
 import { activitiesDateRules, activitiesRules } from '../../../utils/formRules';
 import { SubmitButton } from '../../themedComponents';

src/components/forms/updateSiteForm/index.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
-import { Form, Input, Radio, Row, Space, DatePicker } from 'antd';
-import { FormInstance, Rule } from 'antd/es/form';
+import Form from 'antd/es/form';
+import type { FormInstance, Rule } from 'antd/es/form';
+import Input from 'antd/es/input';
+import Radio from 'antd/es/radio';
+import type { CheckboxOptionType } from 'antd/es/checkbox/Group';
+import Row from 'antd/es/row';
+import Space from 'antd/es/space';
+import DatePicker from 'antd/es/date-picker';
 import {
   BOOL_RADIO_OPTS,
   STATUS_RADIO_OPTS,
@@ -13,7 +19,6 @@ import {
   SiteEntryFields,
 } from '../../../containers/treePage/ducks/types';
 import { stringNumberRules } from '../../../utils/formRules';
-import { CheckboxOptionType } from 'antd/es/checkbox/Group';
 import { getSEFieldDisplayName } from '../../../utils/stringFormat';
 import { useTranslation } from 'react-i18next';
 import { n } from '../../../utils/stringFormat';

src/components/forms/uploadSitesForm/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { message, Upload, Form, Button } from 'antd';
+import message from 'antd/es/message';
+import Upload from 'antd/es/upload';
+import type { UploadProps } from 'antd/lib/upload/interface';
+import Form from 'antd/es/form';
+import Button from 'antd/es/button';
 import { requiredRule } from '../../../utils/formRules';
 import { SubmitButton } from '../../themedComponents';
-import { UploadOutlined } from '@ant-design/icons';
-import { UploadProps } from 'antd/lib/upload/interface';
+import UploadOutlined from '@ant-design/icons/UploadOutlined';
 import ProtectedClient from '../../../api/protectedApiClient';
 
 interface UploadSitesFormRule {

src/components/goalInfo/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Card, Typography } from 'antd';
+import Card from 'antd/es/card';
+import Typography from 'antd/es/typography';
 import { DARK_GREEN, TEXT_GREY } from '../../utils/colors';
 
 interface GoalInfoProps {

src/components/greetingContainer/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Typography } from 'antd';
+import Typography from 'antd/es/typography';
 import { BACKGROUND_GREEN, BLACK } from '../../utils/colors';
 import styled from 'styled-components';
 import logo from '../../assets/images/logo.png';

src/components/infoCard/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Card, Typography } from 'antd';
-import { ParagraphProps } from 'antd/lib/typography/Paragraph';
-import { TitleProps } from 'antd/lib/typography/Title';
+import Card from 'antd/es/card';
+import Typography from 'antd/es/typography';
+import type { TitleProps } from 'antd/lib/typography/Title';
+import type { ParagraphProps } from 'antd/lib/typography/Paragraph';
 import styled from 'styled-components';
 import { TEXT_GREY } from '../../utils/colors';
 

src/components/landingContent/index.tsx

@@ -1,5 +1,5 @@
 import OrderedList from '../orderedList';
-import { Typography } from 'antd';
+import Typography from 'antd/es/typography';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CONTACT_EMAIL } from '../../assets/links';

src/components/landingTreeStats/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Typography } from 'antd';
+import Typography from 'antd/es/typography';
 import useWindowDimensions, { WindowTypes } from '../windowDimensions';
 import { TEXT_GREY, MID_GREEN } from '../../utils/colors';
 import MobileInfoCard from '../mobileComponents/mobileInfoCard';

src/components/leaderboard/leaderboardSpace/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { ParagraphProps } from 'antd/lib/typography/Paragraph';
+import Collapse from 'antd/es/collapse';
+import Typography from 'antd/es/typography';
+import type { ParagraphProps } from 'antd/lib/typography/Paragraph';
 import { BLACK, LIGHT_GREEN } from '../../../utils/colors';
 import styled from 'styled-components';
-import { Collapse, Typography } from 'antd';
 import { TabItem } from '../types';
 import { FullWidthSpace } from '../../themedComponents';
 

src/components/leaderboard/leaderboardTab/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Col, Row } from 'antd';
+import Col from 'antd/es/col';
+import Row from 'antd/es/row';
 import LeaderboardPanels from '../leaderboardSpace';
 import { TabItem } from '../types';
 

src/components/leaderboard/leaderboardTabs/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Tabs, Pagination } from 'antd';
+import Tabs from 'antd/es/tabs';
+import Pagination from 'antd/es/pagination';
 import LeaderboardTab from '../leaderboardTab';
 import { TabItem } from '../types';
 import { tabToDays } from '../constants';

src/components/linkButton/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'antd';
+import Button from 'antd/es/button';
 import { Link } from 'react-router-dom';
 // onClick is overwritten