Performance: Code split login page (#92704)

feat(frontend): lazy load login page

public/app/core/components/Login/LoginPage.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import * as runtimeMock from '@grafana/runtime';
 
-import { LoginPage } from './LoginPage';
+import LoginPage from './LoginPage';
 
 const postMock = jest.fn();
 jest.mock('@grafana/runtime', () => ({

public/app/core/components/Login/LoginPage.tsx

@@ -16,7 +16,7 @@ import { LoginLayout, InnerBox } from './LoginLayout';
 import { LoginServiceButtons } from './LoginServiceButtons';
 import { UserSignup } from './UserSignup';
 
-export const LoginPage = () => {
+const LoginPage = () => {
   const styles = useStyles2(getStyles);
   document.title = Branding.AppTitle;
 
@@ -79,6 +79,8 @@ export const LoginPage = () => {
   );
 };
 
+export default LoginPage;
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     forgottenPassword: css({

public/app/routes/routes.tsx

@@ -1,7 +1,6 @@
 import { Redirect, RouteComponentProps } from 'react-router-dom';
 
 import { isTruthy } from '@grafana/data';
-import { LoginPage } from 'app/core/components/Login/LoginPage';
 import { NavLandingPage } from 'app/core/components/NavLandingPage/NavLandingPage';
 import { PageNotFound } from 'app/core/components/PageNotFound/PageNotFound';
 import config from 'app/core/config';
@@ -382,7 +381,9 @@ export function getAppRoutes(): RouteDescriptor[] {
     // LOGIN / SIGNUP
     {
       path: '/login',
-      component: LoginPage,
+      component: SafeDynamicImport(
+        () => import(/* webpackChunkName: "LoginPage" */ 'app/core/components/Login/LoginPage')
+      ),
       pageClass: 'login-page',
       chromeless: true,
     },