perf: use dynamic imports to reduce the bundle size

examples/my-gatsby-site/gatsby-config.js

@@ -15,10 +15,7 @@ module.exports = {
       }
     },
     {
-      resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
-      options: {
-        devMode: true
-      }
+      resolve: 'gatsby-plugin-webpack-bundle-analyser-v2'
     }
   ]
 }

packages/jaen-pages/jaen-register.tsx

@@ -1,15 +1,48 @@
-import DiscardButton from './src/containers/ui/hotbar/DiscardButton'
-import EditButton from './src/containers/ui/hotbar/EditButton'
-import PublishButton from './src/containers/ui/hotbar/PublishButton'
-import FilesTab from './src/containers/ui/tabs/FilesTab'
-import PagesTab from './src/containers/ui/tabs/PagesTab'
-import SettingsTab from './src/containers/ui/tabs/SettingsTab'
+import loadable from '@loadable/component'
+
 import {storageGet, usePages, useSiteMetadata} from './src/contexts/cms'
-import {upload} from './src/ipfs'
 import {store} from './src/store'
 import {JaenPagesEntity, JaenPagesPublish} from './src/types'
 import {resolvePath} from './src/utils'
 
+const DiscardButton = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "jaenuichunk" */ './src/containers/ui/hotbar/DiscardButton'
+    )
+)
+const EditButton = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "jaenuichunk" */ './src/containers/ui/hotbar/EditButton'
+    )
+)
+const PublishButton = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "jaenuichunk" */ './src/containers/ui/hotbar/PublishButton'
+    )
+)
+
+const FilesTab = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "jaenuichunk" */ './src/containers/ui/tabs/FilesTab'
+    )
+)
+const PagesTab = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "jaenuichunk" */ './src/containers/ui/tabs/PagesTab'
+    )
+)
+const SettingsTab = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "jaenuichunk" */ './src/containers/ui/tabs/SettingsTab'
+    )
+)
+
 export default {
   name: 'jaen-pages',
   registerUI: {
@@ -38,6 +71,8 @@ export default {
   },
   registerCallbacks: {
     onPublish: async () => {
+      const {upload} = await import('./src/ipfs')
+
       const {allSitePage} = storageGet()
 
       const allNodes = allSitePage.nodes

packages/jaen-pages/src/cli/publish.ts

@@ -1,5 +1,4 @@
 import {merge} from '@src/common/utils'
-import {upload} from '@src/ipfs'
 import {
   JaenPages,
   JaenPagesEntity,
@@ -19,6 +18,7 @@ export const mergeBaseWithMigration = async (
     baseEntity: JaenPagesEntityWithMigrations | undefined,
     migrationEntity: JaenPagesEntity
   ) => {
+    const {upload} = await import('@src/ipfs')
     const migrationContext = migrationEntity.context
 
     if (!baseEntity) {

packages/jaen-pages/src/containers/JaenImage/index.tsx

@@ -1,14 +1,16 @@
 import {Box, Image, useDisclosure} from '@chakra-ui/react'
+import loadable from '@loadable/component'
 import {
   GatsbyImage,
   GatsbyImageProps,
   IGatsbyImageData
 } from 'gatsby-plugin-image'
 import * as React from 'react'
 
-import SnekFinder from '../SnekFinder'
 import {JaenImageContainer} from './style'
 
+const SnekFinder = loadable(() => import('@containers/SnekFinder'))
+
 export type ImageType = {
   src: string
   title: string

packages/jaen-pages/src/containers/SnekFinder/index.tsx

@@ -1,12 +1,11 @@
 import loadable from '@loadable/component'
+import SnekFinder from '@snek-at/snek-finder'
 import IPFSBackend from '@snek-at/snek-finder/lib/backends/IPFSBackend'
 import * as actions from '@store/actions/sfActions'
 import {useAppDispatch, useAppSelector} from '@store/index'
 import {withRedux} from '@store/withRedux'
 import * as React from 'react'
 
-const SnekFinder = loadable(() => import('@snek-at/snek-finder'))
-
 type FinderProps = {
   mode?: 'browser' | 'selector'
   onSelectorClose?: () => void

packages/jaen-pages/src/containers/ui/hotbar/PublishButton.tsx

@@ -2,8 +2,6 @@ import {useToast} from '@chakra-ui/react'
 import {BifrostBridge} from '@snek-at/bridge'
 import {useJaenCoreContext} from '@snek-at/jaen'
 import {PublishButton} from '@snek-at/jaen-shared-ui/dist/components/molecules/buttons'
-import {useAppDispatch} from '@snek-at/jaen/src/store'
-import {upload} from '@src/ipfs'
 import {withRedux} from '@store/withRedux'
 import gql from 'graphql-tag'
 import React from 'react'
@@ -19,6 +17,7 @@ const Button: React.FC = () => {
   const isDisabled = core.getAuthState().isGuest
 
   const publish = async () => {
+    const {upload} = await import('@src/ipfs')
     const res = (await core.onPublish()) as {'jaen-pages': object}
 
     const url = await upload(JSON.stringify(res['jaen-pages']))

packages/jaen-pages/src/containers/ui/tabs/FilesTab.tsx

@@ -1,8 +1,9 @@
-import SnekFinder from '@containers/SnekFinder'
 import loadable from '@loadable/component'
 import {withRedux} from '@store/withRedux'
 import * as React from 'react'
 
+const SnekFinder = loadable(() => import('@containers/SnekFinder'))
+
 const FilesTab: React.FC<{}> = () => {
   return <SnekFinder />
 }

packages/jaen-pages/src/containers/ui/tabs/PagesTab.tsx

@@ -1,6 +1,6 @@
 import {Button, useDisclosure} from '@chakra-ui/react'
-import SnekFinder from '@containers/SnekFinder'
 import {usePages, useCMSContext} from '@contexts/cms'
+import loadable from '@loadable/component'
 import {useLocation} from '@reach/router'
 import {PageExplorer, PageExplorerProps} from '@snek-at/jaen-shared-ui'
 import {PageType} from '@src/types'
@@ -12,6 +12,8 @@ import {navigate} from 'gatsby'
 import * as React from 'react'
 import {v4 as uuidv4} from 'uuid'
 
+const SnekFinder = loadable(() => import('@containers/SnekFinder'))
+
 const transformToItems = (pages: {
   [id: string]: PageType
 }): PageExplorerProps['items'] =>

packages/jaen-pages/src/containers/ui/tabs/SettingsTab.tsx

@@ -1,12 +1,14 @@
 import {useDisclosure} from '@chakra-ui/hooks'
-import SnekFinder from '@containers/SnekFinder'
 import {useSiteMetadata} from '@contexts/cms'
+import loadable from '@loadable/component'
 import {Settings} from '@snek-at/jaen-shared-ui'
 import * as actions from '@store/actions/siteActions'
 import {useAppDispatch} from '@store/index'
 import {withRedux} from '@store/withRedux'
 import * as React from 'react'
 
+const SnekFinder = loadable(() => import('@containers/SnekFinder'))
+
 const SettingsTab: React.FC<{}> = () => {
   const dispatch = useAppDispatch()
 

packages/jaen-pages/src/ipfs.ts

@@ -1,12 +1,12 @@
-import ipfsClient from 'ipfs-http-client'
+export const upload = async (payload: any) => {
+  const ipfsClient = await import('ipfs-http-client')
 
-const ipfs = ipfsClient.create({
-  host: 'ipfs.infura.io',
-  port: 5001,
-  protocol: 'https'
-})
+  const ipfs = ipfsClient.create({
+    host: 'ipfs.infura.io',
+    port: 5001,
+    protocol: 'https'
+  })
 
-export const upload = async (payload: any) => {
   const {cid} = await ipfs.add(payload)
   return `https://cloudflare-ipfs.com/ipfs/${cid.toString()}`
 }

packages/jaen/src/containers/MainUI.tsx

@@ -1,10 +1,8 @@
-import {ChakraProvider} from '@chakra-ui/react'
 import loadable from '@loadable/component'
 import {PluginUI} from '@src/plugin'
 
 import jaenTheme from '../@chakra-ui/jaenTheme'
 import {useAppDispatch, useAppSelector} from '../store'
-import * as authActions from '../store/actions/authActions'
 import {withRedux} from '../store/withRedux'
 
 const LoadableUI = loadable(
@@ -24,8 +22,10 @@ const MainUI: React.FC<MainUIProps> = ({ui: {hotbar, tabs}}) => {
     password: string,
     isGuest: boolean
   ) => {
+    const {login} = await import('../store/actions/authActions')
+
     const res = (await dispatch(
-      authActions.login({creds: {username, password}, isGuest})
+      login({creds: {username, password}, isGuest})
     )) as any
 
     if (res.error) {
@@ -43,21 +43,21 @@ const MainUI: React.FC<MainUIProps> = ({ui: {hotbar, tabs}}) => {
     return login('snekman', 'ciscocisco', true)
   }
 
-  const handleLogout = () => {
-    dispatch(authActions.logout())
+  const handleLogout = async () => {
+    const {logout} = await import('../store/actions/authActions')
+
+    dispatch(logout())
   }
 
   return (
-    <ChakraProvider>
-      <LoadableUI
-        hotbar={hotbar}
-        tabs={tabs}
-        footer={{onLogout: handleLogout}}
-        authenticated={authenticated}
-        login={{onLogin: handleLogin, onGuestLogin: handleGuestLogin}}
-        chakraWorkaroundTheme={jaenTheme}
-      />
-    </ChakraProvider>
+    <LoadableUI
+      hotbar={hotbar}
+      tabs={tabs}
+      footer={{onLogout: handleLogout}}
+      authenticated={authenticated}
+      login={{onLogin: handleLogin, onGuestLogin: handleGuestLogin}}
+      chakraWorkaroundTheme={jaenTheme}
+    />
   )
 }
 

packages/jaen/src/store/actions/authActions.ts

@@ -8,11 +8,6 @@
  * in the LICENSE file at https://snek.at/license
  */
 import {createAsyncThunk} from '@reduxjs/toolkit'
-import {BifrostBridge} from '@snek-at/bridge'
-
-const Bridge = new BifrostBridge({
-  httpUrl: 'https://origin.snek.at/graphql'
-})
 
 export const login = createAsyncThunk(
   'auth/login',
@@ -25,6 +20,11 @@ export const login = createAsyncThunk(
   ) => {
     const {creds, isGuest} = args
 
+    const {BifrostBridge} = await import('@snek-at/bridge')
+    const Bridge = new BifrostBridge({
+      httpUrl: 'https://origin.snek.at/graphql'
+    })
+
     try {
       const session = await Bridge.session.begin(creds || undefined)
 
@@ -42,6 +42,11 @@ export const login = createAsyncThunk(
 )
 
 export const logout = createAsyncThunk('auth/logout', async (_, thunkAPI) => {
+  const {BifrostBridge} = await import('@snek-at/bridge')
+  const Bridge = new BifrostBridge({
+    httpUrl: 'https://origin.snek.at/graphql'
+  })
+
   try {
     if (!(await Bridge.session.end())) {
       throw new Error('Resetting session failed')