splitted chunks for vue router pages, materialdesignicons styles

build/webpack.config.base.js

@@ -25,11 +25,13 @@ module.exports = {
     'main': utils.resolve(themePath + '/assets/scripts/main.js'),
     // 'lang-en': utils.resolve(langPath + '/en.json'),
     'print': utils.resolve(themePath + '/assets/styles/print.scss')
+    // 'mdi': utils.resolve(themePath + '/assets/styles/mdi/scss/materialdesignicons.scss')
   },
   output: {
+    publicPath: '/themes/custom/materiotheme/assets/dist/',
     path: utils.resolve(themePath + '/assets/dist/'),
     filename: '[name].js',
-    chunkFilename: '[name].js'
+    chunkFilename: '[name].bundle.js'
   },
   module: {
     rules: [
@@ -52,12 +54,12 @@ module.exports = {
       //   type: 'javascript/auto',
       //   loader: '@kazupon/vue-i18n-loader'
       // },
-      {
-        test: /\.js$/,
-        use: {
-          loader: 'babel-loader',
-        }
-      },
+      // {
+      //   test: /\.js$/,
+      //   use: {
+      //     loader: 'babel-loader',
+      //   }
+      // },
       {
         test: /\.(graphql|gql)$/,
         exclude: /node_modules/,
@@ -115,18 +117,23 @@ module.exports = {
   optimization: {
     splitChunks: {
       cacheGroups: {
-        vsa: {
-          test: /[\\/]node_modules[\\/](vue-simple-accordion)[\\/]/,
-          name: 'vsa',
-          chunks: 'all',
-          usedExports: true
-        },
+        // 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
         },
+        // vue_page_article: {
+        //   test: /[\\/]web[\\/]themes[\\/]custom[\\/]materiotheme[\\/]vuejs[\\/]components[\\/]Pages[\\/]Article.vue/,
+        //   name: 'vue_page_article',
+        //   chunks: 'all'
+        // }
       },
     },
   },

web/themes/custom/materiotheme/assets/dist/main.js.LICENSE.txt

@@ -4,12 +4,6 @@
  * Released under the MIT License.
  */
 
-/*!
- * vue-i18n v8.24.2 
- * (c) 2021 kazuya kawaguchi
- * Released under the MIT License.
- */
-
 /*!
  * vue-infinite-loading v2.4.5
  * (c) 2016-2020 PeachScript

web/themes/custom/materiotheme/assets/dist/module-mdi.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[462],{4834:(e,c,s)=>{"use strict";s.r(c)}}]);

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

@@ -51,9 +51,13 @@ import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
 
 import { mapState } from 'vuex'
 
-// require('theme/assets/styles/main.scss');
 import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'slim-select/slimselect.min.css'
+import(
+  /* webpackChunkName: "module-mdi" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'theme/assets/styles/mdi/scss/materialdesignicons.scss')
 import 'theme/assets/styles/main.scss'
 import 'theme/assets/styles/print.scss'
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2,7 +2,9 @@
 // @import '~slim-select/scss';
 
 $mdi-font-path: './mdi/fonts/';
-@import './mdi/scss/materialdesignicons';
+// @import './mdi/scss/materialdesignicons';
+@import './mdi/scss/variables';
+@import './mdi/scss/functions';
 @import './base/variables';
 @import './base/colors';
 @import './base/reset';

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

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

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -2,12 +2,54 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from 'vuejs/components/Pages/Home'
-import Base from 'vuejs/components/Pages/Base'
-import Thematique from 'vuejs/components/Pages/Thematique'
-import Blabla from 'vuejs/components/Pages/Blabla'
-import Article from 'vuejs/components/Pages/Article'
-import Showrooms from 'vuejs/components/Pages/Showrooms'
-import Pricing from 'vuejs/components/Pages/Pricing'
+// const Home = () => import(
+//   /* webpackMode: "lazy" */
+//   /* webpackPrefetch: true */
+//   /* webpackPreload: true */
+//   'vuejs/components/Pages/Home')
+// // import Base from 'vuejs/components/Pages/Base'
+const Base = () => import(
+  /* webpackChunkName: "module-base" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Base')
+// import Thematique from 'vuejs/components/Pages/Thematique'
+const Thematique = () => import(
+  /* webpackChunkName: "module-thematique" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Thematique')
+// import Blabla from 'vuejs/components/Pages/Blabla'
+const Blabla = () => import(
+  /* webpackChunkName: "module-blabla" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Blabla')
+// import Article from 'vuejs/components/Pages/Article'
+const Article = () => import(
+  /* webpackChunkName: "module-article" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Article')
+// import Showrooms from 'vuejs/components/Pages/Showrooms'
+const Showrooms = () => import(
+  /* webpackChunkName: "module-showrooms" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Showrooms')
+// import Pricing from 'vuejs/components/Pages/Pricing'
+const Pricing = () => import(
+  /* webpackChunkName: "module-pricing" */
+  /* webpackMode: "lazy" */
+  /* webpackPrefetch: true */
+  /* webpackPreload: true */
+  'vuejs/components/Pages/Pricing')
+
 // import Cart from 'vuejs/components/Pages/Cart'
 
 Vue.use(VueRouter)