improve bundle size and speed by using code splitting
This commit is contained in:
parent
aec2c44c29
commit
197b15eb6d
7 changed files with 559 additions and 452 deletions
50
package.json
50
package.json
|
@ -20,30 +20,30 @@
|
||||||
"author": "Ajay Bura",
|
"author": "Ajay Bura",
|
||||||
"license": "AGPL-3.0-only",
|
"license": "AGPL-3.0-only",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/inter": "4.5.14",
|
"@fontsource/inter": "4.5.15",
|
||||||
"@fontsource/roboto": "4.5.8",
|
"@fontsource/roboto": "4.5.8",
|
||||||
"@khanacademy/simple-markdown": "0.8.6",
|
"@khanacademy/simple-markdown": "0.8.6",
|
||||||
"@matrix-org/olm": "3.2.14",
|
"@matrix-org/olm": "3.2.14",
|
||||||
"@tippyjs/react": "4.2.6",
|
"@tippyjs/react": "4.2.6",
|
||||||
"blurhash": "2.0.4",
|
"blurhash": "2.0.5",
|
||||||
"browser-encrypt-attachment": "0.3.0",
|
"browser-encrypt-attachment": "0.3.0",
|
||||||
"dateformat": "5.0.3",
|
"dateformat": "5.0.3",
|
||||||
"emojibase-data": "7.0.1",
|
"emojibase-data": "7.0.1",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
"flux": "4.0.3",
|
"flux": "4.0.4",
|
||||||
"formik": "2.2.9",
|
"formik": "2.2.9",
|
||||||
"html-react-parser": "3.0.4",
|
"html-react-parser": "3.0.13",
|
||||||
"linkify-html": "4.0.2",
|
"linkify-html": "4.1.0",
|
||||||
"linkifyjs": "4.0.2",
|
"linkifyjs": "4.1.0",
|
||||||
"matrix-js-sdk": "22.0.0",
|
"matrix-js-sdk": "23.5.0",
|
||||||
"preact": "10.13.1",
|
"preact": "10.13.1",
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"react-autosize-textarea": "7.1.0",
|
"react-autosize-textarea": "7.1.0",
|
||||||
"react-blurhash": "0.2.0",
|
"react-blurhash": "0.3.0",
|
||||||
"react-dnd": "15.1.2",
|
"react-dnd": "16.0.1",
|
||||||
"react-dnd-html5-backend": "15.1.3",
|
"react-dnd-html5-backend": "16.0.1",
|
||||||
"react-modal": "3.16.1",
|
"react-modal": "3.16.1",
|
||||||
"sanitize-html": "2.8.0",
|
"sanitize-html": "2.10.0",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
"twemoji": "14.0.2"
|
"twemoji": "14.0.2"
|
||||||
},
|
},
|
||||||
|
@ -51,23 +51,23 @@
|
||||||
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
|
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
|
||||||
"@preact/preset-vite": "2.5.0",
|
"@preact/preset-vite": "2.5.0",
|
||||||
"@rollup/plugin-inject": "5.0.3",
|
"@rollup/plugin-inject": "5.0.3",
|
||||||
"@rollup/plugin-wasm": "6.1.1",
|
"@rollup/plugin-wasm": "6.1.2",
|
||||||
"@types/node": "18.11.18",
|
"@types/node": "18.15.5",
|
||||||
"@typescript-eslint/eslint-plugin": "5.46.1",
|
"@typescript-eslint/eslint-plugin": "5.56.0",
|
||||||
"@typescript-eslint/parser": "5.46.1",
|
"@typescript-eslint/parser": "5.56.0",
|
||||||
"buffer": "6.0.3",
|
"buffer": "6.0.3",
|
||||||
"eslint": "8.29.0",
|
"eslint": "8.36.0",
|
||||||
"eslint-config-airbnb": "19.0.4",
|
"eslint-config-airbnb": "19.0.4",
|
||||||
"eslint-config-prettier": "8.5.0",
|
"eslint-config-prettier": "8.8.0",
|
||||||
"eslint-plugin-import": "2.26.0",
|
"eslint-plugin-import": "2.27.5",
|
||||||
"eslint-plugin-jsx-a11y": "6.6.1",
|
"eslint-plugin-jsx-a11y": "6.7.1",
|
||||||
"eslint-plugin-react": "7.31.11",
|
"eslint-plugin-react": "7.32.2",
|
||||||
"eslint-plugin-react-hooks": "4.6.0",
|
"eslint-plugin-react-hooks": "4.6.0",
|
||||||
"mini-svg-data-uri": "1.4.4",
|
"mini-svg-data-uri": "1.4.4",
|
||||||
"prettier": "2.8.1",
|
"prettier": "2.8.6",
|
||||||
"sass": "1.56.2",
|
"sass": "1.59.3",
|
||||||
"typescript": "4.9.4",
|
"typescript": "5.0.2",
|
||||||
"vite": "4.0.1",
|
"vite": "4.2.1",
|
||||||
"vite-plugin-static-copy": "0.13.0"
|
"vite-plugin-static-copy": "0.13.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
6
src/app/atoms/loading-text/LoadingText.jsx
Normal file
6
src/app/atoms/loading-text/LoadingText.jsx
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import Text from '../text/Text';
|
||||||
|
import './LoadingText.scss';
|
||||||
|
|
||||||
|
export function LoadingText() {
|
||||||
|
return <Text className='loading-text'>Loading...</Text>
|
||||||
|
}
|
5
src/app/atoms/loading-text/LoadingText.scss
Normal file
5
src/app/atoms/loading-text/LoadingText.scss
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
.loading-text {
|
||||||
|
display: block;
|
||||||
|
padding: var(--sp-tight);
|
||||||
|
color: var(--tc-surface-low);
|
||||||
|
}
|
|
@ -31,6 +31,7 @@ import InfoIC from '../../../../public/res/ic/outlined/info.svg';
|
||||||
|
|
||||||
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
||||||
import { useStore } from '../../hooks/useStore';
|
import { useStore } from '../../hooks/useStore';
|
||||||
|
import { LoadingText } from '../../atoms/loading-text/LoadingText';
|
||||||
|
|
||||||
function SpaceManageBreadcrumb({ path, onSelect }) {
|
function SpaceManageBreadcrumb({ path, onSelect }) {
|
||||||
return (
|
return (
|
||||||
|
@ -362,7 +363,7 @@ function SpaceManageContent({ roomId, requestClose }) {
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
)))}
|
)))}
|
||||||
{!currentHierarchy && <Text>loading...</Text>}
|
{!currentHierarchy && <LoadingText />}
|
||||||
</div>
|
</div>
|
||||||
{currentHierarchy?.canLoadMore && !isLoading && (
|
{currentHierarchy?.canLoadMore && !isLoading && (
|
||||||
<Button onClick={loadRoomHierarchy}>Load more</Button>
|
<Button onClick={loadRoomHierarchy}>Load more</Button>
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { isAuthenticated } from '../../client/state/auth';
|
import { isAuthenticated } from '../../client/state/auth';
|
||||||
|
import { LoadingText } from '../atoms/loading-text/LoadingText';
|
||||||
|
|
||||||
import Auth from '../templates/auth/Auth';
|
const Auth = React.lazy(() => import('../templates/auth/Auth'));
|
||||||
import Client from '../templates/client/Client';
|
const Client = React.lazy(() => import('../templates/client/Client'));
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return isAuthenticated() ? <Client /> : <Auth />;
|
return isAuthenticated() ? <React.Suspense fallback={<LoadingText/>}><Client /></React.Suspense> : <React.Suspense fallback={<LoadingText/>}><Auth /></React.Suspense>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
@ -62,12 +62,26 @@ export default defineConfig({
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
plugins: [
|
plugins: [
|
||||||
inject({ Buffer: ['buffer', 'Buffer'] })
|
inject({ Buffer: ['buffer', 'Buffer'] })
|
||||||
]
|
],
|
||||||
}
|
output: {
|
||||||
|
manualChunks: (id) => {
|
||||||
|
if (id.includes("node_modules")) {
|
||||||
|
if (id.includes("matrix")) {
|
||||||
|
return "vendor-matrix";
|
||||||
|
}
|
||||||
|
if (id.includes("emojibase")) {
|
||||||
|
return "vendor-emojibase";
|
||||||
|
}
|
||||||
|
return "vendor";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
treeshake: "smallest"
|
||||||
|
},
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"react/jsx-runtime.js": "preact/compat/jsx-runtime"
|
"react/jsx-runtime.js": "preact/compat/jsx-runtime"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue