Reduce bundle size & build space (#262)

* Reduce bundle size to only used packages

* Remove use of node-sql-parser

Author: ppsreejith

apps/src/metabase/helpers/parseSql.ts

@@ -1,31 +1,9 @@
-import { Parser } from 'node-sql-parser';
-import { uniqBy } from 'lodash';
-
 export interface TableAndSchema {
   name: string;
   schema: string;
   count?: number;
 }
 
-// using regex version so we don't have to deal with metabase filters syntax
-// might be a better idea to just use this one instead of the ridiculous regex
-/*export*/ function getTablesFromSql(sql: string): TableAndSchema[] {
-  const parser = new Parser();
-  try {
-    const tableList = parser.tableList(sql);
-    // returned is {type}::{schemaName}::{tableName} eg. select::public::users
-    return tableList.map((table: string) => {
-      const [type, schema, tableName] = table.split('::');
-      return {
-        name: tableName,
-        schema: schema
-      };
-    });
-  } catch (error) {
-    console.warn('Error parsing SQL (maybe malformed):', sql, error);
-    return [];
-  }
-}
 export const removeSurroundingBackticksAndQuotes = (str: string) => {
   // trim away surrounding backticks and quotes
   return str.replace(/^[`"]|[`"]$/g, '');

web/package.json

@@ -86,12 +86,14 @@
     "dotenv": "^16.4.5",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "30.0.0-alpha.5",
     "jest-environment-jsdom": "30.0.0-alpha.5",
     "jest-html-reporters": "^3.1.7",
     "js-tiktoken": "^1.0.12",
     "react-dock": "^0.7.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "serve": "^14.2.3",
     "ts-node": "^10.9.2",
     "typescript": "5",

web/src/components/common/YAMLEditor.tsx

@@ -1,29 +1,45 @@
-import React, {FC, useEffect, useState, useRef, useCallback, useMemo} from 'react';
-import * as monaco from "monaco-editor";
-import Editor, { loader } from "@monaco-editor/react";
-loader.config({ monaco });
-import { configureMonacoYaml } from 'monaco-yaml'
-import yamlWorker from "./yaml.worker.js?worker";
+import React, {FC, useEffect, useState, useRef, useCallback, useMemo, Suspense} from 'react';
+import { Box, Spinner } from '@chakra-ui/react';
 
-// @ts-ignore
-window.MonacoEnvironment = {
-    getWorker(moduleId: any, label: string) {
-        switch (label) {
-            case 'yaml':
-                return new yamlWorker();
-            default:
-                throw new Error(`Unknown label ${label}`);
-        }
-    },
+// Lazy load Monaco Editor and related modules
+const LazyEditor = React.lazy(() => import("@monaco-editor/react"));
+
+// Dynamic imports for Monaco setup
+const loadMonaco = async () => {
+  const [monaco, { configureMonacoYaml }, yamlWorker] = await Promise.all([
+    import("monaco-editor"),
+    import('monaco-yaml'),
+    import("./yaml.worker.js?worker")
+  ]);
+  return { monaco, configureMonacoYaml, yamlWorker };
 };
 
 // Global configuration to prevent multiple setups
 let yamlConfigured = false;
 let stylesInjected = false;
+let monacoLoaded = false;
 
-const configureYamlOnce = (schemaUri?: string) => {
+const configureYamlOnce = async (schemaUri?: string) => {
     if (yamlConfigured) return;
 
+    const { monaco, configureMonacoYaml, yamlWorker } = await loadMonaco();
+    
+    // Configure Monaco environment
+    if (!monacoLoaded) {
+        // @ts-ignore
+        window.MonacoEnvironment = {
+            getWorker(moduleId: any, label: string) {
+                switch (label) {
+                    case 'yaml':
+                        return new yamlWorker.default();
+                    default:
+                        throw new Error(`Unknown label ${label}`);
+                }
+            },
+        };
+        monacoLoaded = true;
+    }
+    
     const schemas = schemaUri ? [{
         uri: schemaUri,
         fileMatch: ['*'],
@@ -93,7 +109,7 @@ export const CodeEditor: FC<CodeEditorProps> = (props) => {
         debouncedOnChange(value);
     }, [debouncedOnChange]);
 
-    const onValidate = useCallback((markers: any[]) => {
+    const onValidate = useCallback(async (markers: any[]) => {
         const yamlMarkerErrors = markers.map((marker: any) => marker.message);
         setYamlErrors(yamlMarkerErrors);
         onValidation(markers.length > 0);
@@ -110,6 +126,8 @@ export const CodeEditor: FC<CodeEditorProps> = (props) => {
             const model = editorRef.current.getModel();
             if (!model) return;
 
+            const { monaco } = await loadMonaco();
+            
             const decorations = markers.map((marker: any) => {
                 const lineLength = model.getLineLength(marker.startLineNumber) || 1;
 
@@ -139,10 +157,11 @@ export const CodeEditor: FC<CodeEditorProps> = (props) => {
         }
     }, [onValidation]);
 
-    const handleEditorDidMount = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => {
+    const handleEditorDidMount = useCallback(async (editor: any) => {
         editorRef.current = editor;
         injectErrorStyles();
-    }, []);
+        await configureYamlOnce(schemaUri);
+    }, [schemaUri]);
 
     // Configure YAML once when component mounts
     useEffect(() => {
@@ -162,38 +181,50 @@ export const CodeEditor: FC<CodeEditorProps> = (props) => {
 
     return (
         <div style={{border: "1px solid #ccc"}} className={className}>
-            <Editor
-                options={{
-                    readOnly: disabled,
-                    lineDecorationsWidth: 5,
-                    lineNumbersMinChars: 0,
-                    glyphMargin: false,
-                    folding: false,
-                    lineNumbers: 'off',
-                    minimap: {
-                        enabled: false
-                    },
-                    fontSize: 11,
-                    // Performance optimizations
-                    wordWrap: 'off',
-                    scrollBeyondLastLine: false,
-                    renderLineHighlight: 'none',
-                    occurrencesHighlight: 'off',
-                    renderControlCharacters: false,
-                    renderWhitespace: 'none',
-                    automaticLayout: true,
-                    // Reduce some visual overhead
-                    hideCursorInOverviewRuler: true,
-                    overviewRulerBorder: false,
-                }}
-                width={width}
-                height={height}
-                language={language}
-                value={value}
-                onValidate={onValidate}
-                onChange={handleOnChange}
-                onMount={handleEditorDidMount}
-            />
+            <Suspense fallback={
+                <Box 
+                    display="flex" 
+                    alignItems="center" 
+                    justifyContent="center" 
+                    width={width} 
+                    height={height}
+                >
+                    <Spinner size="md" />
+                </Box>
+            }>
+                <LazyEditor
+                    options={{
+                        readOnly: disabled,
+                        lineDecorationsWidth: 5,
+                        lineNumbersMinChars: 0,
+                        glyphMargin: false,
+                        folding: false,
+                        lineNumbers: 'off',
+                        minimap: {
+                            enabled: false
+                        },
+                        fontSize: 11,
+                        // Performance optimizations
+                        wordWrap: 'off',
+                        scrollBeyondLastLine: false,
+                        renderLineHighlight: 'none',
+                        occurrencesHighlight: 'off',
+                        renderControlCharacters: false,
+                        renderWhitespace: 'none',
+                        automaticLayout: true,
+                        // Reduce some visual overhead
+                        hideCursorInOverviewRuler: true,
+                        overviewRulerBorder: false,
+                    }}
+                    width={width}
+                    height={height}
+                    language={language}
+                    value={value}
+                    onValidate={onValidate}
+                    onChange={handleOnChange}
+                    onMount={handleEditorDidMount}
+                />
+            </Suspense>
         </div>
     );
 };

web/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react'
 import path from 'path'
 import child_process from 'child_process'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 export default ({ mode }) => {
   let env = loadEnv(
@@ -14,7 +15,13 @@ export default ({ mode }) => {
   env.npm_package_version = process.env.npm_package_version || ''
   return defineConfig({
     plugins: [
-      react()
+      react(),
+      ...(mode === 'production' ? [visualizer({
+        filename: 'web-build/bundle-analysis.html',
+        open: false,
+        gzipSize: true,
+        brotliSize: true,
+      })] : [])
     ],
     assetsInclude: ['**/*.md'],
     resolve: {
@@ -31,7 +38,18 @@ export default ({ mode }) => {
     build: {
       outDir: path.resolve(__dirname, './web-build'),
       emptyOutDir: true,
-      sourcemap: true,
+      sourcemap: mode === 'development',
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'monaco-editor': ['monaco-editor', '@monaco-editor/react', 'monaco-yaml'],
+            'react-vendor': ['react', 'react-dom', 'react-redux', '@reduxjs/toolkit'],
+            'ui-vendor': ['@chakra-ui/react', '@chakra-ui/icons', '@emotion/react', '@emotion/styled', 'framer-motion'],
+            'utility-vendor': ['lodash', 'axios', 'query-string'],
+            'apps-vendor': ['apps']
+          }
+        }
+      }
     },
     root: path.resolve(__dirname, 'src/app'), // Set the root to your app directory
     publicDir: path.resolve(__dirname, 'public'), // Set the public directory to your public directory