Significantly improved load times

.gitignore

@@ -17,11 +17,11 @@ backend/config/default.json
 
 # Front End
 frontend/node_modules/
-frontend/build/bundle.js
+frontend/build/*.js
 frontend/build/config/default.json
 
 npm
 
 # Logs
 log/
-.env
+.env

frontend/App.vue

@@ -184,6 +184,8 @@
 </script>
 
 <style type='scss'>
+	.center { text-align: center; }
+
 	#toast-container { z-index: 10000 !important; }
 
 	html {

frontend/build/index.html

@@ -37,6 +37,7 @@
 	<link href='https://fonts.googleapis.com/css?family=Roboto:100,400' rel='stylesheet'>
 	<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
 	<link rel='stylesheet' href='/index.css'>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
 	<script src='https://www.youtube.com/iframe_api'></script>
 	<script src='/vendor/jquery.min.js'></script>
 	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js'></script>

frontend/components/MainHeader.vue

@@ -67,8 +67,6 @@
 </script>
 
 <style lang="scss" scoped>
-	@import 'theme.scss';
-
 	.nav {
 		background-color: #03a9f4;
 		height: 64px;
@@ -99,10 +97,10 @@
 
 		.nav-item {
 			font-size: 15px;
-			color: $white;
+			color: hsl(0, 0%, 100%);
 
 			&:hover {
-				color: $white;
+				color: hsl(0, 0%, 100%);
 			}
 		}
 		.admin {
@@ -145,10 +143,10 @@
 
 			.nav-item {
 				font-size: 15px;
-				color: $white;
+				color: hsl(0, 0%, 100%);
 
 				&:hover {
-					color: $white;
+					color: hsl(0, 0%, 100%);
 				}
 			}
 			.admin strong {

frontend/components/Modals/IssuesModal.vue

@@ -3,9 +3,9 @@
 		<div slot='body'>
 			<article class="message">
 				<div class="message-body">
-					<strong>Song ID: </strong>{{ $parent.editing.songId }}<br/ >
-					<strong>Created By: </strong>{{ $parent.editing.createdBy }}<br/ >
-					<strong>Created At: </strong>{{ $parent.editing.createdAt }}<br/ >
+					<strong>Song ID: </strong>{{ $parent.editing.songId }}<br/>
+					<strong>Created By: </strong>{{ $parent.editing.createdBy }}<br/>
+					<strong>Created At: </strong>{{ $parent.editing.createdAt }}<br/>
 					<span v-if='$parent.editing.description'><strong>Description: </strong>{{ $parent.editing.description }}</span>
 				</div>
 			</article>

frontend/components/Station/CommunityHeader.vue

@@ -142,7 +142,6 @@
 </script>
 
 <style lang='scss' scoped>
-	@import 'theme.scss';
 	.nav {
 		background-color: #03a9f4;
 		line-height: 64px;
@@ -155,11 +154,11 @@
 	}
 
 	a.nav-item {
-		color: $white;
+		color: hsl(0, 0%, 100%);
 		font-size: 15px;
 
 		&:hover {
-			color: $white;
+			color: hsl(0, 0%, 100%);
 		}
 
 		.admin {
@@ -218,7 +217,7 @@
 	.nav-center {
 		display: flex;
     align-items: center;
-		color: $blue;
+		color: #03A9F4;
 		font-size: 22px;
 		position: absolute;
 		margin: auto;

frontend/components/Station/OfficialHeader.vue

@@ -148,7 +148,6 @@
 </script>
 
 <style lang='scss' scoped>
-	@import 'theme.scss';
 	.nav {
 		background-color: #03a9f4;
 		line-height: 64px;
@@ -161,11 +160,11 @@
 	}
 
 	a.nav-item {
-		color: $white;
+		color: hsl(0, 0%, 100%);
 		font-size: 15px;
 
 		&:hover {
-			color: $white;
+			color: hsl(0, 0%, 100%);
 		}
 
 		.admin {
@@ -224,7 +223,7 @@
 	.nav-center {
 		display: flex;
     	align-items: center;
-		color: $blue;
+		color: #03A9F4;
 		font-size: 22px;
 		position: absolute;
 		margin: auto;

frontend/components/pages/Home.vue

@@ -171,8 +171,6 @@
 </script>
 
 <style lang='scss'>
-	@import 'theme.scss';
-
 	* { box-sizing: border-box; }
 
 	html {

frontend/main.js

@@ -4,28 +4,13 @@ import App from './App.vue';
 import auth from './auth';
 import io from './io';
 
-import NotFound from './components/404.vue';
-import Home from './components/pages/Home.vue';
-import Station from './components/Station/Station.vue';
-import Admin from './components/pages/Admin.vue';
-
-import News from './components/pages/News.vue';
-import About from './components/pages/About.vue';
-import Terms from './components/pages/Terms.vue';
-import Privacy from './components/pages/Privacy.vue';
-import Team from './components/pages/Team.vue';
-import User from './components/User/Show.vue';
-import Settings from './components/User/Settings.vue';
-import ResetPassword from './components/User/ResetPassword.vue';
-import Login from './components/Modals/Login.vue';
-import Register from './components/Modals/Register.vue';
-
 Vue.use(VueRouter);
 
 let router = new VueRouter({
 	history: true,
 	suppressTransitionError: true
 });
+
 let _this = this;
 
 lofig.folder = '../config/default.json';
@@ -42,8 +27,8 @@ lofig.get('serverDomain', function(res) {
 });
 
 document.onkeydown = event => {
-    event = event || window.event;
-    if (event.keyCode === 27) router.app.$dispatch('closeModal');
+	event = event || window.event;
+	if (event.keyCode === 27) router.app.$dispatch('closeModal');
 };
 
 router.beforeEach(transition => {
@@ -86,70 +71,71 @@ router.beforeEach(transition => {
 	}
 });
 
-router.afterEach((data) => {
+router.afterEach(data => {
 	ga('set', 'page', data.to.path);
 	ga('send', 'pageview');
 });
 
+
 router.map({
 	'/': {
-		component: Home
+		component: resolve => require(['./components/pages/Home.vue'], resolve)
 	},
 	'*': {
-		component: NotFound
+		component: resolve => require(['./components/404.vue'], resolve)
 	},
 	'404': {
-		component: NotFound
+		component: resolve => require(['./components/404.vue'], resolve)
 	},
 	'/terms': {
-		component: Terms
+		component: resolve => require(['./components/pages/Terms.vue'], resolve)
 	},
 	'/privacy': {
-		component: Privacy
+		component: resolve => require(['./components/pages/Privacy.vue'], resolve)
 	},
 	'/team': {
-		component: Team
+		component: resolve => require(['./components/pages/Team.vue'], resolve)
 	},
 	'/news': {
-		component: News
+		component: resolve => require(['./components/pages/News.vue'], resolve)
 	},
 	'/about': {
-		component: About
+		component: resolve => require(['./components/pages/About.vue'], resolve)
 	},
 	'/u/:username': {
-		component: User
+		component: resolve => require(['./components/User/Show.vue'], resolve),
 	},
 	'/settings': {
-		component: Settings,
+		component: resolve => require(['./components/User/Settings.vue'], resolve),
 		loginRequired: true
 	},
 	'/reset_password': {
-		component: ResetPassword
+		component: resolve => require(['./components/User/ResetPassword.vue'], resolve)
 	},
 	'/login': {
-		component: Login
+		component: resolve => require(['./components/Modals/Login.vue'], resolve)
 	},
 	'/register': {
-		component: Register
+		component: resolve => require(['./components/Modals/Register.vue'], resolve)
 	},
 	'/admin': {
-		component: Admin,
+		component: resolve => require(['./components/pages/Admin.vue'], resolve),
 		adminRequired: true
 	},
 	'/admin/:page': {
-		component: Admin,
+		component: resolve => require(['./components/pages/Admin.vue'], resolve),
 		adminRequired: true
 	},
 	'/official/:id': {
-		component: Station,
+		component: resolve => require(['./components/Station/Station.vue'], resolve),
 		officialRequired: true
 	},
 	'/:id': {
-		component: Station,
+		component: resolve => require(['./components/Station/Station.vue'], resolve),
 		officialRequired: true
 	},
 	'/community/:id': {
-		component: Station,
+		component: resolve => require(['./components/Station/Station.vue'], resolve),
 		communityRequired: true
 	}
 });

frontend/package.json

@@ -16,7 +16,6 @@
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-runtime": "^6.11.6",
-    "bulma": "^0.2.3",
     "css-loader": "^0.25.0",
     "eslint": "^3.4.0",
     "eslint-loader": "^1.5.0",
@@ -27,9 +26,9 @@
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^8.5.2",
     "vue-style-loader": "^1.0.0",
-    "whatwg-fetch": "^0.11.1",
     "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.15.1"
+    "webpack-dev-server": "^1.15.1",
+    "whatwg-fetch": "^0.11.1"
   },
   "dependencies": {
     "chart.js": "^2.5.0",

frontend/theme.scss

@@ -1,12 +0,0 @@
-// Change any Bulma default variables here
-$blue: #03A9F4;
-
-.is-primary {
-	background-color: $blue !important;
-}
-
-@import '~bulma';
-
-.center {
-  text-align: center;
-}

frontend/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = {
 	entry: './main.js',
 	output: {
 		path: __dirname + '/build/',
+		publicPath: '/',
 		filename: 'bundle.js'
 	},
 	module: {
@@ -22,13 +23,13 @@ module.exports = {
 			},
 			{
 				test: /\.scss$/,
+				exclude: /node_modules/,
 				loader: 'css-loader!sass-loader'
 			}
 		]
 	},
 	vue: {
 		loaders: {
-			sass: 'style-loader!css-loader!sass-loader?indentedSyntax',
 			scss: 'style-loader!css-loader!sass-loader'
 		}
 	}

windows-start.cmd

@@ -1,5 +1,5 @@
 start "Redis" "startRedis.cmd"
-start "Mongo" "startmongo.cmd"
+start "Mongo" "startMongo.cmd"
 cd frontend
 start "Frontend" npm run development-watch
 cd ..