chore(webpack): added splitchunks for common modules

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -14,19 +14,15 @@
 import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import Banned from "./pages/Banned.vue";
-import WhatIsNew from "./components/modals/WhatIsNew.vue";
-import LoginModal from "./components/modals/Login.vue";
-import RegisterModal from "./components/modals/Register.vue";
 import ws from "./ws";
 import keyboardShortcuts from "./keyboardShortcuts";
 
 export default {
 	components: {
-		WhatIsNew,
-		LoginModal,
-		RegisterModal,
-		Banned
+		WhatIsNew: () => import("./components/modals/WhatIsNew.vue"),
+		LoginModal: () => import("./components/modals/Login.vue"),
+		RegisterModal: () => import("./components/modals/Register.vue"),
+		Banned: () => import("./pages/Banned.vue")
 	},
 	replace: false,
 	data() {

frontend/webpack.prod.js

@@ -1,5 +1,5 @@
 const { merge } = require("webpack-merge");
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 const common = require("./webpack.common.js");
 
@@ -11,7 +11,7 @@ module.exports = merge(common, {
 	},
 	resolve: {
 		alias: {
-			vue: "vue/dist/vue.min.js",
+			vue: "vue/dist/vue.esm.js",
 			styles: "src/styles"
 		}
 	},
@@ -19,5 +19,30 @@ module.exports = merge(common, {
 		new BundleAnalyzerPlugin({
 			analyzerMode: "static"
 		})
-	]
+	],
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				commons: {
+					name: "vendors",
+					test: /[\\/]node_modules[\\/](vue|vuex|vue-router)[\\/]/,
+					chunks: "all"
+				},
+				ui: {
+					name: false,
+					test(module) {
+						return (
+							module.resource.includes("Modal.vue") ||
+							module.resource.includes(
+								"AddToPlaylistDropdown.vue"
+							) ||
+							module.resource.includes("MainHeader.vue") ||
+							module.resource.includes("MainFooter.vue")
+						);
+					},
+					enforce: true
+				}
+			}
+		}
+	}
 });