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,6 +28,11 @@ export default function renderMetrics(elements) {
     element.parentNode.removeChild(element);
   });
 
+  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({
@@ -41,4 +43,5 @@ export default function renderMetrics(elements) {
         },
       });
     });
+  });
 }

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,21 +11,21 @@ const getElements = () => Array.from(document.getElementsByClassName('js-render-
 
 describe('Render metrics for Gitlab Flavoured Markdown', () => {
   it('does nothing when no elements are found', () => {
-    renderMetrics([]);
-
+    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());
-
+    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', () => {
     document.body.innerHTML = `
@@ -36,8 +36,7 @@ describe('Render metrics for Gitlab Flavoured Markdown', () => {
       <div class="js-render-metrics" data-dashboard-url="${TEST_HOST}/3"></div>
     `;
 
-    renderMetrics(getElements());
-
+    return renderMetrics(getElements()).then(() => {
       expect(mockEmbedGroup).toHaveBeenCalledTimes(2);
       expect(mockEmbedGroup).toHaveBeenCalledWith(
         expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/1`, `${TEST_HOST}/2`] } }),
@@ -46,4 +45,5 @@ describe('Render metrics for Gitlab Flavoured Markdown', () => {
         expect.objectContaining({ propsData: { urls: [`${TEST_HOST}/3`] } }),
       );
     });
+  });
 });