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",
|
||||
"license": "AGPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@fontsource/inter": "4.5.14",
|
||||
"@fontsource/inter": "4.5.15",
|
||||
"@fontsource/roboto": "4.5.8",
|
||||
"@khanacademy/simple-markdown": "0.8.6",
|
||||
"@matrix-org/olm": "3.2.14",
|
||||
"@tippyjs/react": "4.2.6",
|
||||
"blurhash": "2.0.4",
|
||||
"blurhash": "2.0.5",
|
||||
"browser-encrypt-attachment": "0.3.0",
|
||||
"dateformat": "5.0.3",
|
||||
"emojibase-data": "7.0.1",
|
||||
"file-saver": "2.0.5",
|
||||
"flux": "4.0.3",
|
||||
"flux": "4.0.4",
|
||||
"formik": "2.2.9",
|
||||
"html-react-parser": "3.0.4",
|
||||
"linkify-html": "4.0.2",
|
||||
"linkifyjs": "4.0.2",
|
||||
"matrix-js-sdk": "22.0.0",
|
||||
"html-react-parser": "3.0.13",
|
||||
"linkify-html": "4.1.0",
|
||||
"linkifyjs": "4.1.0",
|
||||
"matrix-js-sdk": "23.5.0",
|
||||
"preact": "10.13.1",
|
||||
"prop-types": "15.8.1",
|
||||
"react-autosize-textarea": "7.1.0",
|
||||
"react-blurhash": "0.2.0",
|
||||
"react-dnd": "15.1.2",
|
||||
"react-dnd-html5-backend": "15.1.3",
|
||||
"react-blurhash": "0.3.0",
|
||||
"react-dnd": "16.0.1",
|
||||
"react-dnd-html5-backend": "16.0.1",
|
||||
"react-modal": "3.16.1",
|
||||
"sanitize-html": "2.8.0",
|
||||
"sanitize-html": "2.10.0",
|
||||
"tippy.js": "6.3.7",
|
||||
"twemoji": "14.0.2"
|
||||
},
|
||||
|
@ -51,23 +51,23 @@
|
|||
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
|
||||
"@preact/preset-vite": "2.5.0",
|
||||
"@rollup/plugin-inject": "5.0.3",
|
||||
"@rollup/plugin-wasm": "6.1.1",
|
||||
"@types/node": "18.11.18",
|
||||
"@typescript-eslint/eslint-plugin": "5.46.1",
|
||||
"@typescript-eslint/parser": "5.46.1",
|
||||
"@rollup/plugin-wasm": "6.1.2",
|
||||
"@types/node": "18.15.5",
|
||||
"@typescript-eslint/eslint-plugin": "5.56.0",
|
||||
"@typescript-eslint/parser": "5.56.0",
|
||||
"buffer": "6.0.3",
|
||||
"eslint": "8.29.0",
|
||||
"eslint": "8.36.0",
|
||||
"eslint-config-airbnb": "19.0.4",
|
||||
"eslint-config-prettier": "8.5.0",
|
||||
"eslint-plugin-import": "2.26.0",
|
||||
"eslint-plugin-jsx-a11y": "6.6.1",
|
||||
"eslint-plugin-react": "7.31.11",
|
||||
"eslint-config-prettier": "8.8.0",
|
||||
"eslint-plugin-import": "2.27.5",
|
||||
"eslint-plugin-jsx-a11y": "6.7.1",
|
||||
"eslint-plugin-react": "7.32.2",
|
||||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"mini-svg-data-uri": "1.4.4",
|
||||
"prettier": "2.8.1",
|
||||
"sass": "1.56.2",
|
||||
"typescript": "4.9.4",
|
||||
"vite": "4.0.1",
|
||||
"vite-plugin-static-copy": "0.13.0"
|
||||
"prettier": "2.8.6",
|
||||
"sass": "1.59.3",
|
||||
"typescript": "5.0.2",
|
||||
"vite": "4.2.1",
|
||||
"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 { useStore } from '../../hooks/useStore';
|
||||
import { LoadingText } from '../../atoms/loading-text/LoadingText';
|
||||
|
||||
function SpaceManageBreadcrumb({ path, onSelect }) {
|
||||
return (
|
||||
|
@ -362,7 +363,7 @@ function SpaceManageContent({ roomId, requestClose }) {
|
|||
/>
|
||||
)
|
||||
)))}
|
||||
{!currentHierarchy && <Text>loading...</Text>}
|
||||
{!currentHierarchy && <LoadingText />}
|
||||
</div>
|
||||
{currentHierarchy?.canLoadMore && !isLoading && (
|
||||
<Button onClick={loadRoomHierarchy}>Load more</Button>
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import React from 'react';
|
||||
|
||||
import { isAuthenticated } from '../../client/state/auth';
|
||||
import { LoadingText } from '../atoms/loading-text/LoadingText';
|
||||
|
||||
import Auth from '../templates/auth/Auth';
|
||||
import Client from '../templates/client/Client';
|
||||
const Auth = React.lazy(() => import('../templates/auth/Auth'));
|
||||
const Client = React.lazy(() => import('../templates/client/Client'));
|
||||
|
||||
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;
|
||||
|
|
|
@ -62,12 +62,26 @@ export default defineConfig({
|
|||
rollupOptions: {
|
||||
plugins: [
|
||||
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: {
|
||||
alias: {
|
||||
"react/jsx-runtime.js": "preact/compat/jsx-runtime"
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue