Webpack: Split out unicons and bizcharts (#28374)

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -1,7 +1,6 @@
 // Libraries
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, Suspense } from 'react';
 import tinycolor from 'tinycolor2';
-import { Chart, Geom } from 'bizcharts';
 
 // Utils
 import { formattedValueToString, DisplayValue, getColorForTheme } from '@grafana/data';
@@ -14,6 +13,16 @@ import { getTextColorForBackground } from '../../utils';
 const LINE_HEIGHT = 1.2;
 const MAX_TITLE_SIZE = 30;
 
+const Chart = React.lazy(async () => {
+  const { Chart } = await import(/* webpackChunkName: "bizcharts" */ 'bizcharts');
+  return { default: Chart };
+});
+
+const Geom = React.lazy(async () => {
+  const { Geom } = await import(/* webpackChunkName: "bizcharts" */ 'bizcharts');
+  return { default: Geom };
+});
+
 export abstract class BigValueLayout {
   titleFontSize: number;
   valueFontSize: number;
@@ -166,17 +175,19 @@ export abstract class BigValueLayout {
     }
 
     return (
-      <Chart
+      <Suspense fallback={<div>Loading chart...</div>}>
-        height={this.chartHeight}
+        <Chart
-        width={this.chartWidth}
+          height={this.chartHeight}
-        data={data}
+          width={this.chartWidth}
-        animate={false}
+          data={data}
-        padding={[4, 0, 0, 0]}
+          animate={false}
-        scale={scales}
+          padding={[4, 0, 0, 0]}
-        style={this.getChartStyles()}
+          scale={scales}
-      >
+          style={this.getChartStyles()}
-        {this.renderGeom()}
+        >
-      </Chart>
+          {this.renderGeom()}
+        </Chart>
+      </Suspense>
     );
   }
 
@@ -209,10 +220,10 @@ export abstract class BigValueLayout {
     lineStyle.stroke = lineColor;
 
     return (
-      <>
+      <Suspense fallback={<div>Loading chart...</div>}>
         <Geom type="area" position="time*value" size={0} color={fillColor} style={lineStyle} shape="smooth" />
         <Geom type="line" position="time*value" size={1} color={lineColor} style={lineStyle} shape="smooth" />
-      </>
+      </Suspense>
     );
   }
 

scripts/webpack/webpack.common.js

@@ -180,6 +180,12 @@ module.exports = {
       chunks: 'all',
       minChunks: 1,
       cacheGroups: {
+        unicons: {
+          test: /[\\/]node_modules[\\/]@iconscout[\\/]react-unicons[\\/].*[jt]sx?$/,
+          chunks: 'initial',
+          priority: 20,
+          enforce: true,
+        },
         moment: {
           test: /[\\/]node_modules[\\/]moment[\\/].*[jt]sx?$/,
           chunks: 'initial',