[Tutorial Suggestion] Code Splitting

[aress31]

For developers who are starting to experiment with React and mui-treasury, writing a tutorial showing how to code split based on the <Content> of the layout library could be a good idea.

[siriwatknp]

I have a few experience with code splitting, can you give me an example of documentation like this?

[aress31]

Sure will do that sometime this week.

[aress31]

In fact, I think that the best things to do would be to reference the React official doc - https://reactjs.org/docs/code-splitting.html#code-splitting - as it is well presented and explained and obviously maintained by the React team. What I like with MUI-Layout, is that it makes code splitting with the use of the Content component to wrap around the routes - good for route-based code splitting.

A minimal example of code-splitting would be:

• App.jsx

import theme from "./styles/theme";
import routes from "./constants/routes";
--- other imports ---

export default () => {
  const muiTheme = React.useMemo(() => responsiveFontSizes(theme()), []);

  return (
    <MuiThemeProvider theme={muiTheme}>
      <CssBaseline />
      <Router>
        <Root themeProviderOmitted scheme={scheme}>
          {({ state: { sidebar } }) => (
            <>
              <Header />
              <Sidebar />
              <Content>
                <React.Suspense fallback={<Loader />}>
                  <Routes>
                    {routes.map((route) => (
                      <Route
                        key={uid(route)}
                        element={<route.element />}
                        path={route.path}
                      />
                    ))}
                  </Routes>
                </React.Suspense>
                )}
              </Content>
              <Footer />
            </>
          )}
        </Root>
      </Router>
    </MuiThemeProvider>
  );
};

• routes.jsx:

import React from "react";

export default [
  {
    element: React.lazy(() => import("../pages/Landing")),
    path: "/",
  },
  {
    element: React.lazy(() => import("../pages/Foo")),
    path: "/foo",
  },
  {
    element: React.lazy(() => import("../pages/Bar")),
    path: "/bar",
  },
  {
    element: React.lazy(() => import("../pages/NotFound")),
    label: "404 Not Found",
    path: "*",
  },
];