move scss to async chunks

packages/kbn-optimizer/limits.yml

@@ -96,7 +96,7 @@ pageLoadAssetSize:
   visTypeVega: 153573
   visTypeVislib: 242838
   visTypeXy: 113478
-  visualizations: 295025
+  visualizations: 90000
   visualize: 57431
   watcher: 43598
   runtimeFields: 41752

src/plugins/visualizations/public/components/index.ts

@@ -6,6 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { lazy } from 'react';
-
-export const VisualizationContainer = lazy(() => import('./visualization_container'));
+export { VisualizationContainer } from './visualization_container';

src/plugins/visualizations/public/components/visualization_container.tsx

@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
-import React, { ReactNode, Suspense } from 'react';
+import React, { ReactNode, Suspense, lazy } from 'react';
 import { EuiLoadingChart } from '@elastic/eui';
 import classNames from 'classnames';
-import { VisualizationNoResults } from './visualization_noresults';
-import { VisualizationError } from './visualization_error';
+
 import { IInterpreterRenderHandlers } from '../../../expressions/common';
 
 export interface VisualizationContainerProps {
@@ -22,6 +21,9 @@ export interface VisualizationContainerProps {
   error?: string;
 }
 
+const VisualizationNoResults = lazy(() => import('./visualization_noresults'));
+const VisualizationError = lazy(() => import('./visualization_error'));
+
 export const VisualizationContainer = ({
   'data-test-subj': dataTestSubj = '',
   className,
@@ -52,6 +54,3 @@ export const VisualizationContainer = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default VisualizationContainer;

src/plugins/visualizations/public/components/visualization_error.tsx

@@ -44,3 +44,6 @@ export class VisualizationError extends React.Component<VisualizationNoResultsPr
     }
   }
 }
+
+// eslint-disable-next-line import/no-default-export
+export default VisualizationError;

src/plugins/visualizations/public/components/visualization_noresults.tsx

@@ -48,3 +48,6 @@ export class VisualizationNoResults extends React.Component<VisualizationNoResul
     }
   }
 }
+
+// eslint-disable-next-line import/no-default-export
+export default VisualizationNoResults;

src/plugins/visualizations/public/embeddable/create_vis_embeddable_from_object.ts

@@ -7,7 +7,7 @@
  */
 
 import { Vis } from '../types';
-import {
+import type {
   VisualizeInput,
   VisualizeEmbeddable,
   VisualizeByValueInput,
@@ -31,6 +31,7 @@ import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory';
 import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants';
 import { SavedVisualizationsLoader } from '../saved_visualizations';
 import { IndexPattern } from '../../../data/public';
+import { createVisualizeEmbeddableAsync } from './visualize_embeddable_async';
 
 export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDeps) => async (
   vis: Vis,
@@ -72,7 +73,7 @@ export const createVisEmbeddableFromObject = (deps: VisualizeEmbeddableFactoryDe
       dashboardSave: Boolean(getCapabilities().dashboard?.showWriteControls),
     };
 
-    return new VisualizeEmbeddable(
+    return createVisualizeEmbeddableAsync(
       getTimeFilter(),
       {
         vis,

src/plugins/visualizations/public/embeddable/index.ts

@@ -7,8 +7,9 @@
  */
 
 export { DisabledLabEmbeddable } from './disabled_lab_embeddable';
-export { VisualizeEmbeddable, VisualizeInput } from './visualize_embeddable';
 export { VisualizeEmbeddableFactory } from './visualize_embeddable_factory';
 export { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
 export { VIS_EVENT_TO_TRIGGER } from './events';
 export { createVisEmbeddableFromObject } from './create_vis_embeddable_from_object';
+
+export type { VisualizeEmbeddable, VisualizeInput } from './visualize_embeddable';

src/plugins/visualizations/public/embeddable/visualize_embeddable_async.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { VisualizeEmbeddable as VisualizeEmbeddableType } from './visualize_embeddable';
+
+export const createVisualizeEmbeddableAsync = async (
+  ...args: ConstructorParameters<typeof VisualizeEmbeddableType>
+) => {
+  // Build optimization. Move app styles from main bundle
+  // @ts-expect-error TS error, cannot find type declaration for scss
+  await import('./embeddables.scss');
+
+  const { VisualizeEmbeddable } = await import('./visualize_embeddable');
+
+  return new VisualizeEmbeddable(...args);
+};

src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx

@@ -22,7 +22,7 @@ import {
   AttributeService,
 } from '../../../embeddable/public';
 import type { DisabledLabEmbeddable } from './disabled_lab_embeddable';
-import {
+import type {
   VisualizeByReferenceInput,
   VisualizeByValueInput,
   VisualizeEmbeddable,
@@ -32,7 +32,7 @@ import {
 } from './visualize_embeddable';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
 import type { SerializedVis, Vis } from '../vis';
-import { createVisAsync } from '../vis_lazy';
+import { createVisAsync } from '../vis_async';
 import {
   getCapabilities,
   getTypes,

src/plugins/visualizations/public/index.ts

@@ -9,7 +9,7 @@
 import { PublicContract } from '@kbn/utility-types';
 import { PluginInitializerContext } from 'src/core/public';
 import { VisualizationsPlugin, VisualizationsSetup, VisualizationsStart } from './plugin';
-import { VisualizeEmbeddableFactory, VisualizeEmbeddable } from './embeddable';
+import type { VisualizeEmbeddableFactory, VisualizeEmbeddable } from './embeddable';
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new VisualizationsPlugin(initializerContext);

src/plugins/visualizations/public/plugin.ts

@@ -5,9 +5,6 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
-import './index.scss';
-
 import {
   setUISettings,
   setTypes,
@@ -68,7 +65,7 @@ import type {
 import type { DataPublicPluginSetup, DataPublicPluginStart } from '../../../plugins/data/public';
 import type { ExpressionsSetup, ExpressionsStart } from '../../expressions/public';
 import type { EmbeddableSetup, EmbeddableStart } from '../../embeddable/public';
-import { createVisAsync } from './vis_lazy';
+import { createVisAsync } from './vis_async';
 
 /**
  * Interface for this plugin's returned setup/start contracts.

src/plugins/visualizations/public/saved_visualizations/_saved_vis.ts

@@ -13,14 +13,14 @@
  *
  * NOTE: It's a type of SavedObject, but specific to visualizations.
  */
-import { SavedObjectsStart, SavedObject } from '../../../../plugins/saved_objects/public';
+import type { SavedObjectsStart, SavedObject } from '../../../../plugins/saved_objects/public';
 // @ts-ignore
 import { updateOldState } from '../legacy/vis_update_state';
 import { extractReferences, injectReferences } from './saved_visualization_references';
-import { IIndexPattern, IndexPatternsContract } from '../../../../plugins/data/public';
-import { ISavedVis, SerializedVis } from '../types';
 import { createSavedSearchesLoader } from '../../../discover/public';
-import { SavedObjectsClientContract } from '../../../../core/public';
+import type { SavedObjectsClientContract } from '../../../../core/public';
+import type { IIndexPattern, IndexPatternsContract } from '../../../../plugins/data/public';
+import type { ISavedVis, SerializedVis } from '../types';
 
 export interface SavedVisServices {
   savedObjectsClient: SavedObjectsClientContract;

src/plugins/visualizations/public/saved_visualizations/saved_visualizations.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/public';
+import type { SavedObjectReference, SavedObjectsFindOptionsReference } from 'kibana/public';
 import { SavedObjectLoader } from '../../../../plugins/saved_objects/public';
 import { findListItems } from './find_list_items';
 import { createSavedVisClass, SavedVisServices } from './_saved_vis';

src/plugins/visualizations/public/vis_lazy.ts → src/plugins/visualizations/public/vis_async.ts

@@ -13,8 +13,13 @@ export const createVisAsync = async <TVisParams = VisParams>(
   visType: string,
   visState: SerializedVis<TVisParams> = {} as any
 ) => {
+  // Build optimization. Move app styles from main bundle
+  // @ts-expect-error TS error, cannot find type declaration for scss
+  await import('./vis.scss');
+
   const { Vis } = await import('./vis');
   const vis = new Vis(visType, visState);
+
   await vis.setState(visState);
   return vis;
 };