Split javascript files with webpack

themes/neff/layouts/_default/baseof.html

@@ -161,6 +161,7 @@
         </script>
 
         {{ partial "part/script.html" (dict "ctx" . "path" "js/common.bundle.js")}}
+        {{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}}
                 {{- block "scripts" . -}}{{- end -}}
             </body>
         </html>

themes/neff/layouts/catalog/single.html

@@ -34,5 +34,7 @@
 {{- end -}}
 
 {{- define "scripts" -}}
+  {{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}}
+  {{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}}
   {{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}}
 {{- end -}}

themes/neff/webpack.common.js

@@ -6,7 +6,7 @@ const path = require("path")
 
 module.exports = {
   entry: {
-    common: ["./src/js/main.js"],
+    app: ["./src/js/main.js"],
     images: ["./src/js/images.js"],
     catalog: ["./src/js/catalog.js"],
     style: ["./src/scss/main.scss"],
@@ -20,6 +20,25 @@ module.exports = {
   },
   optimization: {
     //usedExports: true,
+    splitChunks: {
+      cacheGroups: {
+        common: {
+          name: 'common',
+          chunks: 'initial',
+          minChunks: 2
+        },
+        vue: {
+          test: /[\\/]node_modules[\\/](vue)[\\/]/,
+          name: 'vue',
+          chunks: 'all',
+        },
+        three: {
+          test: /[\\/]node_modules[\\/](three)[\\/]/,
+          name: 'three',
+          chunks: 'all',
+        },
+      }
+    },
   },
   module: {
     rules: [