From 4c34a1b80c68876e8d4e4890230c5dfb3e7a5c62 Mon Sep 17 00:00:00 2001 From: Hunter Miller Date: Thu, 14 Oct 2021 09:28:21 -0500 Subject: [PATCH] interface: more code-splitting, removing unused dep --- pkg/interface/.gitignore | 1 + pkg/interface/package.json | 2 +- pkg/interface/src/index.js | 1 - .../src/views/landscape/components/Content.tsx | 2 +- .../src/views/landscape/components/GroupsPane.tsx | 13 +++++++------ .../src/views/landscape/components/Skeleton.tsx | 5 +++-- pkg/interface/src/views/landscape/index.tsx | 5 +++-- pkg/interface/src/wdyr.js | 8 -------- 8 files changed, 16 insertions(+), 21 deletions(-) delete mode 100644 pkg/interface/src/wdyr.js diff --git a/pkg/interface/.gitignore b/pkg/interface/.gitignore index f4f500ee72..336750f5ff 100644 --- a/pkg/interface/.gitignore +++ b/pkg/interface/.gitignore @@ -6,6 +6,7 @@ yarn-debug.log* yarn-error.log* *.swp .DS_Store +stats.json # Runtime data pids diff --git a/pkg/interface/package.json b/pkg/interface/package.json index 60b0b0961b..291aa4c18e 100644 --- a/pkg/interface/package.json +++ b/pkg/interface/package.json @@ -84,7 +84,6 @@ "@typescript-eslint/eslint-plugin": "^4.15.0", "@typescript-eslint/parser": "^4.24.0", "@urbit/eslint-config": "^1.0.0", - "@welldone-software/why-did-you-render": "^6.1.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.2", @@ -119,6 +118,7 @@ "tsc:watch": "tsc --watch", "build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.js", "build:prod": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js", + "build:profile": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js --profile --json > stats.json", "start": "webpack-dev-server --config config/webpack.dev.js", "test": "tsc && jest", "jest": "jest", diff --git a/pkg/interface/src/index.js b/pkg/interface/src/index.js index 7d908cd506..5c00be415e 100644 --- a/pkg/interface/src/index.js +++ b/pkg/interface/src/index.js @@ -2,6 +2,5 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './register-sw'; import App from './views/App'; -import './wdyr'; ReactDOM.render(, document.getElementById('root')); diff --git a/pkg/interface/src/views/landscape/components/Content.tsx b/pkg/interface/src/views/landscape/components/Content.tsx index 05eac14d34..ac2fc0df28 100644 --- a/pkg/interface/src/views/landscape/components/Content.tsx +++ b/pkg/interface/src/views/landscape/components/Content.tsx @@ -6,6 +6,7 @@ import { useLocalStorageState } from '~/logic/lib/useLocalStorageState'; import { PermalinkRoutes } from '~/views/apps/permalinks/app'; import { useShortcut } from '~/logic/state/settings'; import { Loading } from '~/views/components/Loading'; +import LaunchApp from '~/views/apps/launch/App'; export const Container = styled(Box)` flex-grow: 1; @@ -15,7 +16,6 @@ export const Container = styled(Box)` `; const Landscape = React.lazy(() => import('~/views/landscape/index')); -const LaunchApp = React.lazy(() => import('~/views/apps/launch/App')); const Settings = React.lazy(() => import('~/views/apps/settings/settings')); const Profile = React.lazy(() => import('~/views/apps/profile/profile')); const Notifications = React.lazy(() => import('~/views/apps/notifications/notifications')); diff --git a/pkg/interface/src/views/landscape/components/GroupsPane.tsx b/pkg/interface/src/views/landscape/components/GroupsPane.tsx index 741a4e50a2..10391bbaa4 100644 --- a/pkg/interface/src/views/landscape/components/GroupsPane.tsx +++ b/pkg/interface/src/views/landscape/components/GroupsPane.tsx @@ -12,26 +12,27 @@ import { getGroupFromWorkspace } from '~/logic/lib/workspace'; import useGroupState from '~/logic/state/group'; import useHarkState from '~/logic/state/hark'; import useMetadataState from '~/logic/state/metadata'; -import { DmResource } from '~/views/apps/chat/DmResource'; import { Workspace } from '~/types/workspace'; import '~/views/apps/links/css/custom.css'; import '~/views/apps/publish/css/custom.css'; import { Loading } from '~/views/components/Loading'; -import { UnjoinedResource } from '~/views/components/UnjoinedResource'; -import { EmptyGroupHome } from './Home/EmptyGroupHome'; -import { GroupHome } from './Home/GroupHome'; import { InvitePopover } from './InvitePopover'; -import { NewChannel } from './NewChannel'; import { PopoverRoutes } from './PopoverRoutes'; -import { Resource } from './Resource'; import { Skeleton } from './Skeleton'; import airlock from '~/logic/api'; +import { EmptyGroupHome } from './Home/EmptyGroupHome'; interface GroupsPaneProps { baseUrl: string; workspace: Workspace; } +const DmResource = React.lazy(() => import('~/views/apps/chat/DmResource').then(module => ({ default: module.DmResource }))); +const Resource = React.lazy(() => import('./Resource').then(module => ({ default: module.Resource }))); +const UnjoinedResource = React.lazy(() => import('~/views/components/UnjoinedResource').then(module => ({ default: module.UnjoinedResource }))); +const GroupHome = React.lazy(() => import('./Home/GroupHome').then(module => ({ default: module.GroupHome }))); +const NewChannel = React.lazy(() => import('./NewChannel').then(module => ({ default: module.NewChannel }))); + export function GroupsPane(props: GroupsPaneProps) { const { baseUrl, workspace } = props; const associations = useMetadataState(state => state.associations); diff --git a/pkg/interface/src/views/landscape/components/Skeleton.tsx b/pkg/interface/src/views/landscape/components/Skeleton.tsx index ce89ba5df7..26d6345b76 100644 --- a/pkg/interface/src/views/landscape/components/Skeleton.tsx +++ b/pkg/interface/src/views/landscape/components/Skeleton.tsx @@ -1,9 +1,10 @@ -import React, { ReactElement, ReactNode, useCallback, useState } from 'react'; +import React, { ReactElement, ReactNode, Suspense, useCallback, useState } from 'react'; import { Sidebar } from './Sidebar/Sidebar'; import { Workspace } from '~/types/workspace'; import { Body } from '~/views/components/Body'; import ErrorBoundary from '~/views/components/ErrorBoundary'; import { useShortcut } from '~/logic/state/settings'; +import { Loading } from '~/views/components/Loading'; interface SkeletonProps { children: ReactNode; @@ -41,7 +42,7 @@ export const Skeleton = React.memo((props: SkeletonProps): ReactElement => { /> )} - {props.children} + {props.children} ); }); diff --git a/pkg/interface/src/views/landscape/index.tsx b/pkg/interface/src/views/landscape/index.tsx index 5c4a395275..7275d419b1 100644 --- a/pkg/interface/src/views/landscape/index.tsx +++ b/pkg/interface/src/views/landscape/index.tsx @@ -7,11 +7,12 @@ import useHarkState from '~/logic/state/hark'; import { Workspace } from '~/types/workspace'; import { Body } from '../components/Body'; import { GroupsPane } from './components/GroupsPane'; -import { JoinGroup } from './components/JoinGroup'; -import { NewGroup } from './components/NewGroup'; import './css/custom.css'; import _ from 'lodash'; +const NewGroup = React.lazy(() => import('./components/NewGroup').then(module => ({ default: module.NewGroup }))); +const JoinGroup = React.lazy(() => import('./components/JoinGroup').then(module => ({ default: module.JoinGroup }))); + moment.updateLocale('en', { relativeTime : { future: '%s', diff --git a/pkg/interface/src/wdyr.js b/pkg/interface/src/wdyr.js deleted file mode 100644 index bfc1d92eef..0000000000 --- a/pkg/interface/src/wdyr.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -if (false && process.env.NODE_ENV === 'development') { - const whyDidYouRender = require('@welldone-software/why-did-you-render'); - whyDidYouRender(React, { - trackAllPureComponents: true - }); -}