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/dist/main.css

@@ -1,3 +1,4 @@
+.vsa-item__heading{width:100%;height:100%}.vsa-item__heading,.vsa-item__trigger{display:flex;justify-content:flex-start;align-items:center}.vsa-item__trigger{margin:0;padding:0;color:inherit;font-family:inherit;font-size:100%;line-height:1.15;border-width:0;background-color:transparent;background-image:none;overflow:visible;text-transform:none;flex:1 1 auto;color:var(--vsa-text-color);transition:all .2s linear;padding:var(--vsa-heading-padding)}.vsa-item__trigger[role=button]{cursor:pointer}.vsa-item__trigger[type=button],.vsa-item__trigger[type=reset],.vsa-item__trigger[type=submit]{-webkit-appearance:button}.vsa-item__trigger:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.vsa-item__trigger::-moz-focus-inner,.vsa-item__trigger[type=button]::-moz-focus-inner,.vsa-item__trigger[type=reset]::-moz-focus-inner,.vsa-item__trigger[type=submit]::-moz-focus-inner{border-style:none;padding:0}.vsa-item__trigger:-moz-focusring,.vsa-item__trigger[type=button]:-moz-focusring,.vsa-item__trigger[type=reset]:-moz-focusring,.vsa-item__trigger[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.vsa-item__trigger:focus,.vsa-item__trigger:hover{outline:none;background-color:var(--vsa-highlight-color);color:var(--vsa-bg-color)}.vsa-item__trigger__icon--is-default{width:40px;height:40px;transform:scale(var(--vsa-default-icon-size))}.vsa-item__trigger__icon--is-default:after,.vsa-item__trigger__icon--is-default:before{background-color:var(--vsa-text-color);content:"";height:3px;position:absolute;top:10px;transition:all .13333s ease-in-out;width:30px}.vsa-item__trigger__icon--is-default:before{left:0;transform:rotate(45deg) translate3d(8px,22px,0);transform-origin:100%}.vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-8px,22px,0);right:0;transform-origin:0}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:before{transform:rotate(45deg) translate3d(14px,14px,0)}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-14px,14px,0)}.vsa-item__trigger__icon{display:block;margin-left:auto;position:relative;transition:all .2s ease-in-out}.vsa-item__trigger:focus .vsa-item__trigger__icon--is-default:after,.vsa-item__trigger:focus .vsa-item__trigger__icon--is-default:before,.vsa-item__trigger:hover .vsa-item__trigger__icon--is-default:after,.vsa-item__trigger:hover .vsa-item__trigger__icon--is-default:before{background-color:var(--vsa-bg-color)}.vsa-item__trigger__content{font-weight:700;font-size:1.25rem}.vsa-item__content{margin:0;padding:var(--vsa-content-padding)}.vsa-item--is-active .vsa-item__heading,.vsa-item:not(:last-of-type){border-bottom:var(--vsa-border)}.vsa-collapse-enter-active,.vsa-collapse-leave-active{transition-property:opacity,height,padding-top,padding-bottom;transition-duration:.3s;transition-timing-function:ease-in-out}.vsa-collapse-enter,.vsa-collapse-leave-active{opacity:0;height:0;padding-top:0;padding-bottom:0;overflow:hidden}.vsa-list{--vsa-max-width:720px;--vsa-min-width:300px;--vsa-heading-padding:1rem 1rem;--vsa-text-color:#373737;--vsa-highlight-color:#57a;--vsa-bg-color:#fff;--vsa-border-color:rgba(0,0,0,0.2);--vsa-border-width:1px;--vsa-border-style:solid;--vsa-border:var(--vsa-border-width) var(--vsa-border-style) var(--vsa-border-color);--vsa-content-padding:1rem 1rem;--vsa-default-icon-size:1;display:block;max-width:var(--vsa-max-width);min-width:var(--vsa-min-width);width:100%;padding:0;margin:0;list-style:none;border:var(--vsa-border);color:var(--vsa-text-color);background-color:var(--vsa-bg-color)}.vsa-list [hidden]{display:none}
 .overlay[data-v-b98ce164]{background-color:rgba(0,0,0,0.8);position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999}.modal[data-v-b98ce164]{background-color:#fff;position:absolute;box-sizing:border;max-width:80vw;max-height:70vh;top:0;right:0;bottom:0;left:0;margin:auto;padding:1em;border-radius:3px;box-shadow:2px 2px}
 
 .form-item[data-v-7bb795f8],.form-actions[data-v-7bb795f8]{display:inline-block;max-width:32%;margin:0}input[data-v-7bb795f8]{box-sizing:border-box;max-width:100%}div.description[data-v-7bb795f8]{display:none}.form-item-persistent-login[data-v-7bb795f8]{display:none}
@@ -6,7 +7,6 @@
 
 fieldset[data-v-340aa566]{padding:0;margin:0;border:none}
 
-.vsa-item__heading{width:100%;height:100%}.vsa-item__heading,.vsa-item__trigger{display:flex;justify-content:flex-start;align-items:center}.vsa-item__trigger{margin:0;padding:0;color:inherit;font-family:inherit;font-size:100%;line-height:1.15;border-width:0;background-color:transparent;background-image:none;overflow:visible;text-transform:none;flex:1 1 auto;color:var(--vsa-text-color);transition:all .2s linear;padding:var(--vsa-heading-padding)}.vsa-item__trigger[role=button]{cursor:pointer}.vsa-item__trigger[type=button],.vsa-item__trigger[type=reset],.vsa-item__trigger[type=submit]{-webkit-appearance:button}.vsa-item__trigger:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.vsa-item__trigger::-moz-focus-inner,.vsa-item__trigger[type=button]::-moz-focus-inner,.vsa-item__trigger[type=reset]::-moz-focus-inner,.vsa-item__trigger[type=submit]::-moz-focus-inner{border-style:none;padding:0}.vsa-item__trigger:-moz-focusring,.vsa-item__trigger[type=button]:-moz-focusring,.vsa-item__trigger[type=reset]:-moz-focusring,.vsa-item__trigger[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.vsa-item__trigger:focus,.vsa-item__trigger:hover{outline:none;background-color:var(--vsa-highlight-color);color:var(--vsa-bg-color)}.vsa-item__trigger__icon--is-default{width:40px;height:40px;transform:scale(var(--vsa-default-icon-size))}.vsa-item__trigger__icon--is-default:after,.vsa-item__trigger__icon--is-default:before{background-color:var(--vsa-text-color);content:"";height:3px;position:absolute;top:10px;transition:all .13333s ease-in-out;width:30px}.vsa-item__trigger__icon--is-default:before{left:0;transform:rotate(45deg) translate3d(8px,22px,0);transform-origin:100%}.vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-8px,22px,0);right:0;transform-origin:0}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:before{transform:rotate(45deg) translate3d(14px,14px,0)}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-14px,14px,0)}.vsa-item__trigger__icon{display:block;margin-left:auto;position:relative;transition:all .2s ease-in-out}.vsa-item__trigger:focus .vsa-item__trigger__icon--is-default:after,.vsa-item__trigger:focus .vsa-item__trigger__icon--is-default:before,.vsa-item__trigger:hover .vsa-item__trigger__icon--is-default:after,.vsa-item__trigger:hover .vsa-item__trigger__icon--is-default:before{background-color:var(--vsa-bg-color)}.vsa-item__trigger__content{font-weight:700;font-size:1.25rem}.vsa-item__content{margin:0;padding:var(--vsa-content-padding)}.vsa-item--is-active .vsa-item__heading,.vsa-item:not(:last-of-type){border-bottom:var(--vsa-border)}.vsa-collapse-enter-active,.vsa-collapse-leave-active{transition-property:opacity,height,padding-top,padding-bottom;transition-duration:.3s;transition-timing-function:ease-in-out}.vsa-collapse-enter,.vsa-collapse-leave-active{opacity:0;height:0;padding-top:0;padding-bottom:0;overflow:hidden}.vsa-list{--vsa-max-width:720px;--vsa-min-width:300px;--vsa-heading-padding:1rem 1rem;--vsa-text-color:#373737;--vsa-highlight-color:#57a;--vsa-bg-color:#fff;--vsa-border-color:rgba(0,0,0,0.2);--vsa-border-width:1px;--vsa-border-style:solid;--vsa-border:var(--vsa-border-width) var(--vsa-border-style) var(--vsa-border-color);--vsa-content-padding:1rem 1rem;--vsa-default-icon-size:1;display:block;max-width:var(--vsa-max-width);min-width:var(--vsa-min-width);width:100%;padding:0;margin:0;list-style:none;border:var(--vsa-border);color:var(--vsa-text-color);background-color:var(--vsa-bg-color)}.vsa-list [hidden]{display:none}
 
 
 #user-tools[data-v-4e9a834e]{

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'
+// import VueSimpleAccordion from 'vue-simple-accordion'
-Vue.use(VueSimpleAccordion, {
+// Vue.use(VueSimpleAccordion, {
-  // ... Options go here
+//   // ... Options go here
-})
+// })
-import 'vue-simple-accordion/dist/vue-simple-accordion.css'
+// 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 {