perf: Lazy load React Ace (#29796)

superset-frontend/packages/superset-ui-chart-controls/src/ace-builds.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module 'ace-builds/src-min-noconflict/mode-sql';

superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx

@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { useEffect, useState } from 'react';
 import { Popover } from 'antd';
+import type ReactAce from 'react-ace';
 import type { PopoverProps } from 'antd/lib/popover';
-import AceEditor from 'react-ace';
 import { CalculatorOutlined } from '@ant-design/icons';
 import { css, styled, useTheme, t } from '@superset-ui/core';
-import 'ace-builds/src-noconflict/mode-sql';
 
 const StyledCalculatorIcon = styled(CalculatorOutlined)`
   ${({ theme }) => css`
@@ -36,6 +36,19 @@ const StyledCalculatorIcon = styled(CalculatorOutlined)`
 
 export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => {
   const theme = useTheme();
+  const [AceEditor, setAceEditor] = useState<typeof ReactAce | null>(null);
+  useEffect(() => {
+    Promise.all([
+      import('react-ace'),
+      import('ace-builds/src-min-noconflict/mode-sql'),
+    ]).then(([reactAceModule]) => {
+      setAceEditor(() => reactAceModule.default);
+    });
+  }, []);
+
+  if (!AceEditor) {
+    return null;
+  }
   return (
     <Popover
       content={

superset-frontend/src/components/AsyncAceEditor/index.tsx

@@ -18,27 +18,24 @@
  */
 import { forwardRef, useEffect, ComponentType } from 'react';
 
-import {
+import type {
   Editor as OrigEditor,
   IEditSession,
   Position,
   TextMode as OrigTextMode,
 } from 'brace';
-import AceEditor, { IAceEditorProps } from 'react-ace';
-import { config } from 'ace-builds';
-import { acequire } from 'ace-builds/src-noconflict/ace';
+import type AceEditor from 'react-ace';
+import type { IAceEditorProps } from 'react-ace';
+
 import AsyncEsmComponent, {
   PlaceholderProps,
 } from 'src/components/AsyncEsmComponent';
 import useEffectEvent from 'src/hooks/useEffectEvent';
-import cssWorkerUrl from 'ace-builds/src-noconflict/worker-css';
 import { useTheme, css } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 
 export { getTooltipHTML } from './Tooltip';
 
-config.setModuleUrl('ace/mode/css_worker', cssWorkerUrl);
-
 export interface AceCompleterKeywordData {
   name: string;
   value: string;
@@ -116,7 +113,26 @@ export default function AsyncAceEditor(
   }: AsyncAceEditorOptions = {},
 ) {
   return AsyncEsmComponent(async () => {
-    const { default: ReactAceEditor } = await import('react-ace');
+    const reactAcePromise = import('react-ace');
+    const aceBuildsConfigPromise = import('ace-builds');
+    const cssWorkerUrlPromise = import(
+      'ace-builds/src-min-noconflict/worker-css'
+    );
+    const acequirePromise = import('ace-builds/src-min-noconflict/ace');
+
+    const [
+      { default: ReactAceEditor },
+      { config },
+      { default: cssWorkerUrl },
+      { acequire },
+    ] = await Promise.all([
+      reactAcePromise,
+      aceBuildsConfigPromise,
+      cssWorkerUrlPromise,
+      acequirePromise,
+    ]);
+
+    config.setModuleUrl('ace/mode/css_worker', cssWorkerUrl);
 
     await Promise.all(aceModules.map(x => aceModuleLoaders[x]()));
 

superset-frontend/src/types/ace-builds.ts

@@ -16,4 +16,5 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-declare module 'ace-builds/src-noconflict/worker-css';
+declare module 'ace-builds/src-min-noconflict/worker-css';
+declare module 'ace-builds/src-min-noconflict/ace';