mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-12-22 11:43:48 +01:00
Add lazy loading support.
This commit is contained in:
parent
b48d55ebca
commit
ac6d6357c8
@ -1,7 +1,6 @@
|
||||
import React, { ReactElement } from 'react';
|
||||
import React, { ReactElement, Suspense } from 'react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
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 RegistationPage from './components/registration-page';
|
||||
import LoginPage from './components/login-page';
|
||||
@ -11,96 +10,90 @@ import { Provider } from 'react-redux';
|
||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
import { theme } from './theme';
|
||||
import AppI18n, { Locales } from './classes/app-i18n';
|
||||
import MapsPage from './components/maps-page';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
|
||||
import ReactGA from 'react-ga4';
|
||||
import EditorPage from './components/editor-page';
|
||||
import AppConfig from './classes/app-config';
|
||||
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' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
interface DefaultTheme extends Theme { }
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
interface DefaultTheme extends Theme { }
|
||||
}
|
||||
|
||||
// Google Analytics Initialization.
|
||||
ReactGA.initialize([
|
||||
{
|
||||
trackingId: AppConfig.getGoogleAnalyticsAccount(),
|
||||
}
|
||||
{
|
||||
trackingId: AppConfig.getGoogleAnalyticsAccount(),
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchIntervalInBackground: false,
|
||||
staleTime: 5 * 1000 * 60, // 10 minutes
|
||||
},
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchIntervalInBackground: false,
|
||||
staleTime: 5 * 1000 * 60, // 10 minutes
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const App = (): ReactElement => {
|
||||
const locale = AppI18n.getDefaultLocale();
|
||||
const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
|
||||
const locale = AppI18n.getDefaultLocale();
|
||||
const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
|
||||
|
||||
return locale.message ? (
|
||||
<Provider store={store}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IntlProvider
|
||||
locale={locale.code}
|
||||
defaultLocale={Locales.EN.code}
|
||||
messages={locale.message as Record<string, string>}
|
||||
>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/c/login" />
|
||||
</Route>
|
||||
<Route path="/c/login"
|
||||
component={LoginPage}
|
||||
/>
|
||||
<Route
|
||||
path="/c/registration"
|
||||
component={RegistationPage}
|
||||
/>
|
||||
<Route
|
||||
path="/c/registration-success"
|
||||
component={RegistrationSuccessPage}
|
||||
/>
|
||||
<Route
|
||||
path="/c/forgot-password"
|
||||
component={ForgotPasswordPage}
|
||||
/>
|
||||
<Route
|
||||
path="/c/forgot-password-success"
|
||||
component={ForgotPasswordSuccessPage}
|
||||
/>
|
||||
<Route
|
||||
exact path="/c/maps/"
|
||||
component={withSessionExpirationHandling(MapsPage)}
|
||||
/>
|
||||
<Route exact path="/c/maps/:id/edit">
|
||||
<EnhacedEditorPage isTryMode={false} />
|
||||
</Route>
|
||||
<Route exact path="/c/maps/:id/try">
|
||||
<EnhacedEditorPage isTryMode={true} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</IntlProvider>
|
||||
</QueryClientProvider>
|
||||
</Provider>
|
||||
) : (
|
||||
<div>Loading ... </div>
|
||||
);
|
||||
return locale.message ? (
|
||||
<Provider store={store}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<IntlProvider
|
||||
locale={locale.code}
|
||||
defaultLocale={Locales.EN.code}
|
||||
messages={locale.message as Record<string, string>}
|
||||
>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/c/login" />
|
||||
</Route>
|
||||
<Route path="/c/login" component={LoginPage} />
|
||||
<Route path="/c/registration" component={RegistationPage} />
|
||||
<Route path="/c/registration-success" component={RegistrationSuccessPage} />
|
||||
<Route path="/c/forgot-password" component={ForgotPasswordPage} />
|
||||
<Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
|
||||
<Route
|
||||
exact
|
||||
path="/c/maps/"
|
||||
>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<MapsPage/>
|
||||
</Suspense>
|
||||
</Route>
|
||||
<Route exact path="/c/maps/:id/edit">
|
||||
<Suspense fallback={<div></div>}>
|
||||
<EnhacedEditorPage isTryMode={false} />
|
||||
</Suspense>
|
||||
</Route>
|
||||
<Route exact path="/c/maps/:id/try">
|
||||
<Suspense fallback={<div></div>}>
|
||||
<EnhacedEditorPage isTryMode={true} />
|
||||
</Suspense>
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</IntlProvider>
|
||||
</QueryClientProvider>
|
||||
</Provider>
|
||||
) : (
|
||||
<div>Loading ... </div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
@ -8,61 +8,62 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
webpack;
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: path.join(__dirname, 'src', 'index.tsx'),
|
||||
},
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/',
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)$/,
|
||||
type: 'asset/inline',
|
||||
},
|
||||
{
|
||||
test: /\.wxml$/i,
|
||||
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'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
entry: {
|
||||
app: path.join(__dirname, 'src', 'index.tsx'),
|
||||
},
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/',
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)$/,
|
||||
type: 'asset/inline',
|
||||
},
|
||||
{
|
||||
test: /\.wxml$/i,
|
||||
type: 'asset/source',
|
||||
},
|
||||
],
|
||||
},
|
||||
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'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user