diff --git a/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx b/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
index 9789b7eca0e0e..2aa747ed58055 100644
--- a/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
+++ b/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
@@ -4,11 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { FC, useState, lazy, Suspense } from 'react';
 import { EuiButtonEmpty, EuiPortal, EuiSpacer } from '@elastic/eui';
 import { ComponentStrings } from '../../../i18n';
 import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
-import { FunctionReferenceGenerator } from '../function_reference_generator';
+
+let FunctionReferenceGenerator: null | React.LazyExoticComponent<any> = null;
+if (process.env.NODE_ENV === 'development') {
+  FunctionReferenceGenerator = lazy(() =>
+    import('../function_reference_generator').then((module) => ({
+      default: module.FunctionReferenceGenerator,
+    }))
+  );
+}
 
 const { HelpMenu: strings } = ComponentStrings;
 
@@ -27,19 +35,19 @@ export const HelpMenu: FC<Props> = ({ functionRegistry }) => {
     setFlyoutVisible(false);
   };
 
-  const isDevelopment = !['production', 'test'].includes(process.env.NODE_ENV);
-
   return (
     <>
       <EuiButtonEmpty size="xs" flush="left" iconType="keyboardShortcut" onClick={showFlyout}>
         {strings.getKeyboardShortcutsLinkLabel()}
       </EuiButtonEmpty>
-      {isDevelopment && (
-        <>
+
+      {FunctionReferenceGenerator ? (
+        <Suspense fallback={null}>
           <EuiSpacer size="s" />
           <FunctionReferenceGenerator functionRegistry={functionRegistry} />
-        </>
-      )}
+        </Suspense>
+      ) : null}
+
       {isFlyoutVisible && (
         <EuiPortal>
           <KeyboardShortcutsDoc onClose={hideFlyout} />