webpack splitted chuncks (vue-simple-accordion & vue-cool-lightbox)

.babelrc

@@ -7,5 +7,6 @@
         "node": "current"
       }
     }]
-  ]
+  ],
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
 }

build/webpack.config.base.js

@@ -28,7 +28,8 @@ module.exports = {
   },
   output: {
     path: utils.resolve(themePath + '/assets/dist/'),
-    filename: '[name].js'
+    filename: '[name].js',
+    chunkFilename: '[name].js'
   },
   module: {
     rules: [
@@ -111,7 +112,24 @@ module.exports = {
       // },
     ]
   },
-
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vsa: {
+          test: /[\\/]node_modules[\\/](vue-simple-accordion)[\\/]/,
+          name: 'vsa',
+          chunks: 'all',
+          usedExports: true
+        },
+        vclb: {
+          test: /[\\/]node_modules[\\/](vue-cool-lightbox)[\\/]/,
+          name: 'vclb',
+          chunks: 'all',
+          usedExports: true
+        },
+      },
+    },
+  },
   plugins: [
     new MiniCssExtractPlugin({
       filename: '[name].css'
@@ -128,6 +146,6 @@ module.exports = {
       extensions: ['.js'],
       paths: [utils.resolve(themePath + '/assets/dist/')],
       minBytes: 4096
-    })
+    }),
   ]
 }

package.json

@@ -21,7 +21,6 @@
     "axios": "^0.21.0",
     "check-password-strength": "^1.0.15",
     "pretty-bytes": "^5.5.0",
-    "slim-select": "^1.27.0",
     "vue": "^2.6.12",
     "vue-autofocus-directive": "^1.0.4",
     "vue-cool-lightbox": "^2.6.9",
@@ -34,6 +33,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.12.7",
     "@kazupon/vue-i18n-loader": "^0.5.0",
     "@vue/test-utils": "^1.1.1",
@@ -64,6 +64,7 @@
     "node-sass": "^5.0.0",
     "querystring-es3": "^0.2.1",
     "sass-loader": "^10.1.0",
+    "slim-select": "^1.27.0",
     "style-loader": "^2.0.0",
     "uglify-es": "^3.3.9",
     "uglifyjs-webpack-plugin": "^2.2.0",

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -34,11 +34,11 @@ import { i18n, loadLanguageAsync } from 'vuejs/i18n'
 import VueMeta from 'vue-meta'
 Vue.use(VueMeta)
 
-import VueSimpleAccordion from 'vue-simple-accordion'
-Vue.use(VueSimpleAccordion, {
-  // ... Options go here
-})
-import 'vue-simple-accordion/dist/vue-simple-accordion.css'
+// import VueSimpleAccordion from 'vue-simple-accordion'
+// Vue.use(VueSimpleAccordion, {
+//   // ... Options go here
+// })
+// import 'vue-simple-accordion/dist/vue-simple-accordion.css'
 
 import Vue2TouchEvents from 'vue2-touch-events'
 Vue.use(Vue2TouchEvents)

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -10,6 +10,8 @@ global-js:
   version: VERSION
   js:
     assets/dist/main.js: { }
+    assets/dist/vsa.js: { }
+    assets/dist/vclb.js: { }
   dependencies:
     - core/drupal
     # - core/drupal.ajax

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -288,6 +288,15 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 
+import {
+  VsaList,
+  VsaItem,
+  VsaHeading,
+  VsaContent,
+  VsaIcon
+} from 'vue-simple-accordion'
+import 'vue-simple-accordion/dist/vue-simple-accordion.css'
+
 import LinkedMaterialCard from 'vuejs/components/Content/LinkedMaterialCard'
 
 import cardMixins from 'vuejs/components/cardMixins'
@@ -307,7 +316,37 @@ export default {
   props: ['item', 'addNoteId'],
   mixins: [cardMixins],
   components: {
-    LinkedMaterialCard
+    LinkedMaterialCard,
+    VsaList,
+    VsaItem,
+    VsaHeading,
+    VsaContent,
+    VsaIcon
+    // VsaList: () => import(
+    //   /* webpackPrefetch: true */
+    //   /* webpackChunkName: "vsa" */
+    //   /* webpackExports: ["VsaList"] */
+    //   '/app/node_modules/vue-simple-accordion/'),
+    // VsaItem: () => import(
+    //   /* webpackPrefetch: true */
+    //   /* webpackChunkName: "vsa" */
+    //   /* webpackExports: ["VsaItem"] */
+    //   '/app/node_modules/vue-simple-accordion/'),
+    // VsaHeading: () => import(
+    //   /* webpackPrefetch: true */
+    //   /* webpackChunkName: "vsa" */
+    //   /* webpackExports: ["VsaHeading"] */
+    //   '/app/node_modules/vue-simple-accordion/'),
+    // VsaContent: () => import(
+    //   /* webpackPrefetch: true */
+    //   /* webpackChunkName: "vsa" */
+    //   /* webpackExports: ["VsaContent"] */
+    //   '/app/node_modules/vue-simple-accordion/'),
+    // VsaIcon: () => import(
+    //   /* webpackPrefetch: true */
+    //   /* webpackChunkName: "vsa" */
+    //   /* webpackExports: ["VsaIcon"] */
+    //   '/app/node_modules/vue-simple-accordion/')
   },
   data() {
     return {