From ac6d6357c86ba301fffb679121b138e633634e7c Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Mon, 15 Aug 2022 20:00:49 -0700 Subject: [PATCH] Add lazy loading support. --- packages/webapp/src/app.tsx | 137 ++++++++++++++---------------- packages/webapp/webpack.common.js | 113 ++++++++++++------------ 2 files changed, 122 insertions(+), 128 deletions(-) diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx index b1b905f9..2a382368 100644 --- a/packages/webapp/src/app.tsx +++ b/packages/webapp/src/app.tsx @@ -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 ? ( - - - } - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) : ( -
Loading ...
- ); + return locale.message ? ( + + + } + > + + + + + + + + + + + + + + + Loading...}> + + + + + }> + + + + + }> + + + + + + + + + + + ) : ( +
Loading ...
+ ); }; export default App; diff --git a/packages/webapp/webpack.common.js b/packages/webapp/webpack.common.js index 4c3e57bd..e8e66143 100644 --- a/packages/webapp/webpack.common.js +++ b/packages/webapp/webpack.common.js @@ -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'], + }, + }, + ], + }), + ], };