diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx
index f94273d3544..a99aab8a344 100644
--- a/public/app/routes/routes.tsx
+++ b/public/app/routes/routes.tsx
@@ -13,7 +13,6 @@ import { getRoutes as getDataConnectionsRoutes } from 'app/features/data-connect
 import { DATASOURCES_ROUTES } from 'app/features/datasources/constants';
 import { getLiveRoutes } from 'app/features/live/pages/routes';
 import { getRoutes as getPluginCatalogRoutes } from 'app/features/plugins/admin/routes';
-import AppRootPage from 'app/features/plugins/components/AppRootPage';
 import { getProfileRoutes } from 'app/features/profile/routes';
 import { ServiceAccountPage } from 'app/features/serviceaccounts/ServiceAccountPage';
 import { AccessControlAction, DashboardRoutes } from 'app/types';
@@ -39,11 +38,14 @@ export function getAppRoutes(): RouteDescriptor[] {
           component: (props) => {
             const hasRoot = pluginHasRootPage(props.match.params.pluginId, config.bootData.navTree);
             const hasQueryParams = Object.keys(props.queryParams).length > 0;
-            return hasRoot || hasQueryParams ? (
-              <AppRootPage {...props} />
-            ) : (
-              <NavLandingPage navId={`plugin-page-${props.match.params.pluginId}`} />
-            );
+            if (hasRoot || hasQueryParams) {
+              const AppRootPage = SafeDynamicImport(
+                () => import(/* webpackChunkName: "AppRootPage" */ 'app/features/plugins/components/AppRootPage')
+              );
+              return <AppRootPage {...props} />;
+            } else {
+              return <NavLandingPage navId={`plugin-page-${props.match.params.pluginId}`} />;
+            }
           },
         },
       ]