reduce bundle size for pages not requiring authentication

Signed-off-by: Vu Van Dung <joulev.vvd@yahoo.com>
joulev · Jun 23, 2022 · 092bca4 · 092bca4
1 parent 6a69dc7
commit 092bca4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 30 deletions.
diff --git a/client/layouts/app.tsx b/client/layouts/app.tsx
@@ -10,7 +10,9 @@ import Footer from "~/client/components/footer";
 
 import { AppProps } from "~/types/client/components.type";
 
-const AppLayout: FC<AppProps> = ({ title, removePadding, loadingScreen, children, ...rest }) => {
+import AuthProvider from "../components/auth/provider";
+
+const App: FC<AppProps> = ({ title, removePadding, loadingScreen, children, ...rest }) => {
   const { user } = useAuth();
   const router = useRouter();
   useEffect(() => {
@@ -33,4 +35,10 @@ const AppLayout: FC<AppProps> = ({ title, removePadding, loadingScreen, children
   );
 };
 
+const AppLayout: FC<AppProps> = props => (
+  <AuthProvider>
+    <App {...props} />
+  </AuthProvider>
+);
+
 export default AppLayout;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -6,20 +6,17 @@ import { useRouter } from "next/router";
 import BreakpointContext from "~/client/context/breakpoint";
 import ModeContext from "~/client/context/mode";
 import { useBreakpointInit } from "~/client/hooks/breakpoint";
-import useNProgress from "~/client/hooks/nprogress";
 import { useModeInit } from "~/client/hooks/theme";
 
 import A from "~/client/components/anchor";
-import AuthProvider from "~/client/components/auth/provider";
 import PostHeading from "~/client/components/postHeading";
 import { ErrorBoundary } from "~/client/layouts/errors";
 
 import { AppPropsWithLayout } from "~/types/client/utils.type";
 
 import "~/client/styles/globals.css";
 
-function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  // useNProgress(); // The routes are fast enough that this isn't necessary
+export default function NextApp({ Component, pageProps }: AppPropsWithLayout) {
   const { mode, setMode } = useModeInit();
   const breakpoint = useBreakpointInit();
   const router = useRouter();
@@ -39,29 +36,15 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
               h6: props => <PostHeading {...props} level={6} />,
             }}
           >
-            {router.pathname.startsWith("/auth") || router.pathname.startsWith("/app") ? (
-              <AuthProvider>
-                <div
-                  id="wrapper"
-                  className={clsx(
-                    "relative min-h-[100vh]",
-                    router.asPath.startsWith("/docs") || "pb-[250px] sm:pb-[165px]"
-                  )}
-                >
-                  {getLayout(<Component {...pageProps} />, pageProps, router)}
-                </div>
-              </AuthProvider>
-            ) : (
-              <div
-                id="wrapper"
-                className={clsx(
-                  "relative min-h-[100vh]",
-                  router.asPath.startsWith("/docs") || "pb-[250px] sm:pb-[165px]"
-                )}
-              >
-                {getLayout(<Component {...pageProps} />, pageProps, router)}
-              </div>
-            )}
+            <div
+              id="wrapper"
+              className={clsx(
+                "relative min-h-[100vh]",
+                router.asPath.startsWith("/docs") || "pb-[250px] sm:pb-[165px]"
+              )}
+            >
+              {getLayout(<Component {...pageProps} />, pageProps, router)}
+            </div>
           </MDXProvider>
         </BreakpointContext.Provider>
       </ModeContext.Provider>
@@ -81,5 +64,3 @@ export function reportWebVitals(metric: NextWebVitalsMetric) {
   if (navigator.sendBeacon) navigator.sendBeacon(url, body);
   else fetch(url, { body, method: "POST", keepalive: true });
 }
-
-export default MyApp;
diff --git a/pages/auth.tsx b/pages/auth.tsx
@@ -10,6 +10,7 @@ import { githubProvider, googleProvider, signIn } from "~/client/lib/firebase/au
 
 import A from "~/client/components/anchor";
 import AuthError from "~/client/components/auth/error";
+import AuthProvider from "~/client/components/auth/provider";
 import Banner from "~/client/components/banner";
 import Button from "~/client/components/buttons";
 
@@ -69,4 +70,6 @@ const Auth: NextPageWithLayout = () => {
   );
 };
 
+Auth.getLayout = page => <AuthProvider>{page}</AuthProvider>;
+
 export default Auth;