vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-21 22:27:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add lazy loading support.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-08-15 20:00:49 -07:00
parent b48d55ebca
commit ac6d6357c8
2 changed files with 122 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
packages/webapp/src/app.tsx
View File

@ -1,7 +1,6 @@
import React, { ReactElement } from 'react'; import React, { ReactElement, Suspense } from 'react';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom'; import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';
import RegistrationSuccessPage from './components/registration-success-page';
import ForgotPasswordSuccessPage from './components/forgot-password-success-page'; import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
import RegistationPage from './components/registration-page'; import RegistationPage from './components/registration-page';
import LoginPage from './components/login-page'; import LoginPage from './components/login-page';
@ -11,96 +10,90 @@ import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query'; import { QueryClient, QueryClientProvider } from 'react-query';
import { theme } from './theme'; import { theme } from './theme';
import AppI18n, { Locales } from './classes/app-i18n'; import AppI18n, { Locales } from './classes/app-i18n';
import MapsPage from './components/maps-page';
import CssBaseline from '@mui/material/CssBaseline'; import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles'; import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
import ReactGA from 'react-ga4'; import ReactGA from 'react-ga4';
import EditorPage from './components/editor-page';
import AppConfig from './classes/app-config'; import AppConfig from './classes/app-config';
import withSessionExpirationHandling from './components/HOCs/withSessionExpirationHandling'; import withSessionExpirationHandling from './components/HOCs/withSessionExpirationHandling';
const EditorPage = React.lazy(() => import('./components/editor-page'));
const RegistrationSuccessPage = React.lazy(() => import('./components/registration-success-page'));
const MapsPage = React.lazy(() => import('./components/maps-page'));
declare module '@mui/styles/defaultTheme' { declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme { } interface DefaultTheme extends Theme { }
} }
// Google Analytics Initialization. // Google Analytics Initialization.
ReactGA.initialize([ ReactGA.initialize([
{ {
trackingId: AppConfig.getGoogleAnalyticsAccount(), trackingId: AppConfig.getGoogleAnalyticsAccount(),
} },
]); ]);
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
queries: { queries: {
refetchIntervalInBackground: false, refetchIntervalInBackground: false,
staleTime: 5 * 1000 * 60, // 10 minutes staleTime: 5 * 1000 * 60, // 10 minutes
},
}, },
},
}); });
const App = (): ReactElement => { const App = (): ReactElement => {
const locale = AppI18n.getDefaultLocale(); const locale = AppI18n.getDefaultLocale();
const EnhacedEditorPage = withSessionExpirationHandling(EditorPage); const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
return locale.message ? ( return locale.message ? (
<Provider store={store}> <Provider store={store}>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<IntlProvider <IntlProvider
locale={locale.code} locale={locale.code}
defaultLocale={Locales.EN.code} defaultLocale={Locales.EN.code}
messages={locale.message as Record<string, string>} messages={locale.message as Record<string, string>}
> >
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
<Router> <Router>
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<Redirect to="/c/login" /> <Redirect to="/c/login" />
</Route> </Route>
<Route path="/c/login" <Route path="/c/login" component={LoginPage} />
component={LoginPage} <Route path="/c/registration" component={RegistationPage} />
/> <Route path="/c/registration-success" component={RegistrationSuccessPage} />
<Route <Route path="/c/forgot-password" component={ForgotPasswordPage} />
path="/c/registration" <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
component={RegistationPage} <Route
/> exact
<Route path="/c/maps/"
path="/c/registration-success" >
component={RegistrationSuccessPage} <Suspense fallback={<div>Loading...</div>}>
/> <MapsPage/>
<Route </Suspense>
path="/c/forgot-password" </Route>
component={ForgotPasswordPage} <Route exact path="/c/maps/:id/edit">
/> <Suspense fallback={<div></div>}>
<Route <EnhacedEditorPage isTryMode={false} />
path="/c/forgot-password-success" </Suspense>
component={ForgotPasswordSuccessPage} </Route>
/> <Route exact path="/c/maps/:id/try">
<Route <Suspense fallback={<div></div>}>
exact path="/c/maps/" <EnhacedEditorPage isTryMode={true} />
component={withSessionExpirationHandling(MapsPage)} </Suspense>
/> </Route>
<Route exact path="/c/maps/:id/edit"> </Switch>
<EnhacedEditorPage isTryMode={false} /> </Router>
</Route> </ThemeProvider>
<Route exact path="/c/maps/:id/try"> </StyledEngineProvider>
<EnhacedEditorPage isTryMode={true} /> </IntlProvider>
</Route> </QueryClientProvider>
</Switch> </Provider>
</Router> ) : (
</ThemeProvider> <div>Loading ... </div>
</StyledEngineProvider> );
</IntlProvider>
</QueryClientProvider>
</Provider>
) : (
<div>Loading ... </div>
);
}; };
export default App; export default App;

113
packages/webapp/webpack.common.js
View File

@ -8,61 +8,62 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
webpack; webpack;
module.exports = { module.exports = {
entry: { entry: {
app: path.join(__dirname, 'src', 'index.tsx'), app: path.join(__dirname, 'src', 'index.tsx'),
}, },
target: 'web', target: 'web',
resolve: { resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'], extensions: ['.ts', '.tsx', '.js', '.jsx'],
}, },
output: { output: {
filename: '[name].bundle.js', filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: 'ts-loader',
exclude: '/node_modules/', exclude: '/node_modules/',
}, },
{ {
test: /\.(png|jpe?g|gif|svg)$/, test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/inline', type: 'asset/inline',
}, },
{ {
test: /\.wxml$/i, test: /\.wxml$/i,
type: 'asset/source', type: 'asset/source',
}, },
],
},
optimization: {
usedExports: true,
splitChunks: {
cacheGroups: {
vendors: {
test: /node_modules\/.*/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false,
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'public/*',
to: '[name].[ext]',
globOptions: {
ignore: ['**/index.html'],
},
},
],
}),
], ],
},
optimization: {
usedExports: true,
chunkIds: 'named',
splitChunks: {
cacheGroups: {
vendors: {
test: /node_modules\/.*/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false,
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'public/*',
to: '[name].[ext]',
globOptions: {
ignore: ['**/index.html'],
},
},
],
}),
],
}; };