Merge branch 'mg-remove-echarts-from-main-bundle' into 'master'

Remove eCharts and zrender from the main chunk

See merge request gitlab-org/gitlab!31435

app/assets/javascripts/behaviors/markdown/render_metrics.js

 import Vue from 'vue';
-import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
 import { createStore } from '~/monitoring/stores/embed_group/';
 
 // TODO: Handle copy-pasting - https://gitlab.com/gitlab-org/gitlab-foss/issues/64369.
 export default function renderMetrics(elements) {
   if (!elements.length) {
-    return;
+    return Promise.resolve();
   }
 
-  const EmbedGroupComponent = Vue.extend(EmbedGroup);
-
   const wrapperList = [];
 
   elements.forEach(element => {
@@ -31,14 +28,20 @@ export default function renderMetrics(elements) {
     element.parentNode.removeChild(element);
   });
 
-  wrapperList.forEach(wrapper => {
-    // eslint-disable-next-line no-new
-    new EmbedGroupComponent({
-      el: wrapper,
-      store: createStore(),
-      propsData: {
-        urls: wrapper.urls,
-      },
+  return import(
+    /* webpackChunkName: 'gfm_metrics' */ '~/monitoring/components/embeds/embed_group.vue'
+  ).then(({ default: EmbedGroup }) => {
+    const EmbedGroupComponent = Vue.extend(EmbedGroup);
+
+    wrapperList.forEach(wrapper => {
+      // eslint-disable-next-line no-new
+      new EmbedGroupComponent({
+        el: wrapper,
+        store: createStore(),
+        propsData: {
+          urls: wrapper.urls,
+        },
+      });
     });
   });
 }

config/webpack.config.js

@@ -268,6 +268,22 @@ module.exports = {
           minChunks: 2,
           reuseExistingChunk: true,
         },
+        echarts: {
+          priority: 14,
+          name: 'echarts',
+          chunks: 'all',
+          test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
+          minChunks: 2,
+          reuseExistingChunk: true,
+        },
+        security_reports: {
+          priority: 13,
+          name: 'security_reports',
+          chunks: 'initial',
+          test: /[\\/](vue_shared[\\/](security_reports|license_compliance)|security_dashboard)[\\/]/,
+          minChunks: 2,
+          reuseExistingChunk: true,
+        },
         vendors: {
           priority: 10,
           chunks: 'async',

spec/frontend/behaviors/markdown/render_metrics_spec.js

@@ -11,20 +11,20 @@ const getElements = () => Array.from(document.getElementsByClassName('js-render-
 
 describe('Render metrics for Gitlab Flavoured Markdown', () => {
   it('does nothing when no elements are found', () => {
-    renderMetrics([]);
-
-    expect(mockEmbedGroup).not.toHaveBeenCalled();
+    return renderMetrics([]).then(() => {
+      expect(mockEmbedGroup).not.toHaveBeenCalled();
+    });
   });
 
   it('renders a vue component when elements are found', () => {
     document.body.innerHTML = `<div class="js-render-metrics" data-dashboard-url="${TEST_HOST}"></div>`;
 
-    renderMetrics(getElements());
-
-    expect(mockEmbedGroup).toHaveBeenCalledTimes(1);
-    expect(mockEmbedGroup).toHaveBeenCalledWith(
-      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }),
-    );
+    return renderMetrics(getElements()).then(() => {
+      expect(mockEmbedGroup).toHaveBeenCalledTimes(1);
+      expect(mockEmbedGroup).toHaveBeenCalledWith(
+        expect.objectContaining({ propsData: { urls: [`${TEST_HOST}`] } }),
+      );
+    });
   });
 
   it('takes sibling metrics and groups them under a shared parent', () => {
@@ -36,14 +36,14 @@ describe('Render metrics for Gitlab Flavoured Markdown', () => {
       <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/3"></div>
     `;
 
-    renderMetrics(getElements());
-
-    expect(mockEmbedGroup).toHaveBeenCalledTimes(2);
-    expect(mockEmbedGroup).toHaveBeenCalledWith(
-      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/1`, `${TEST_HOST}/2`] } }),
-    );
-    expect(mockEmbedGroup).toHaveBeenCalledWith(
-      expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/3`] } }),
-    );
+    return renderMetrics(getElements()).then(() => {
+      expect(mockEmbedGroup).toHaveBeenCalledTimes(2);
+      expect(mockEmbedGroup).toHaveBeenCalledWith(
+        expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/1`, `${TEST_HOST}/2`] } }),
+      );
+      expect(mockEmbedGroup).toHaveBeenCalledWith(
+        expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/3`] } }),
+      );
+    });
   });
 });