From 948f64c295a57e847fff468179a233db271ee123 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Sun, 25 Aug 2019 07:28:51 -0500
Subject: [PATCH] Shrink bundle size

A whole 30k... Changing Vue Material imports didn't change the vendor bundle at all; something still isn't right, but it's not a show-stopper
---
 src/app/package.json                          |  3 +-
 src/app/src/App.vue                           |  5 +--
 .../components/request/RequestListItem.vue    |  2 +-
 src/app/src/main.js                           | 38 +++++++++++++++++--
 src/app/src/router.js                         | 30 +++++----------
 src/app/vue.config.js                         |  9 ++++-
 src/app/yarn.lock                             |  2 +-
 7 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/src/app/package.json b/src/app/package.json
index f9e93bf..a2053d7 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -30,6 +30,7 @@
     "pug": "^2.0.1",
     "pug-plain-loader": "^1.0.0",
     "sass-loader": "^7.3.1",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.5.17",
+    "webpack-bundle-analyzer": "^3.4.1"
   }
 }
diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index 3e2898b..3dd4f83 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-#app
+#app.page-container
   md-app(md-waterfall md-mode='fixed-last' role='application')
     md-app-toolbar.md-large.md-dense.md-primary
       .md-toolbar-row
@@ -16,8 +16,7 @@
       md-snackbar(:md-active.sync='snackbar.visible'
                   md-position='center'
                   :md-duration='snackbar.interval'
-                  ref='snackbar')
-        | {{ snackbar.message }}
+                  ref='snackbar') {{ snackbar.message }}
       footer
         p.mpj-muted-text.mpj-text-right
           | myPrayerJournal v{{ version }}
diff --git a/src/app/src/components/request/RequestListItem.vue b/src/app/src/components/request/RequestListItem.vue
index 0bd120f..f081e5a 100644
--- a/src/app/src/components/request/RequestListItem.vue
+++ b/src/app/src/components/request/RequestListItem.vue
@@ -92,4 +92,4 @@ export default {
 .mpj-action-cell
   width: 1%
   white-space: nowrap
-</style>
\ No newline at end of file
+</style>
diff --git a/src/app/src/main.js b/src/app/src/main.js
index 1654f93..7d3d17d 100644
--- a/src/app/src/main.js
+++ b/src/app/src/main.js
@@ -1,8 +1,24 @@
 /* eslint-disable */
 
 // Vue packages and components
-import Vue         from 'vue'
-import VueMaterial from 'vue-material'
+import Vue from 'vue'
+import { MdApp,
+         MdButton,
+         MdCard,
+         MdContent,
+         MdDatepicker,
+         MdDialog,
+         MdEmptyState,
+         MdField,
+         MdIcon,
+         MdLayout,
+         MdProgress,
+         MdRadio,
+         MdSnackbar,
+         MdTable,
+         MdTabs,
+         MdToolbar,
+         MdTooltip } from 'vue-material/dist/components'
 
 // myPrayerJournal components
 import App         from './App'
@@ -19,7 +35,23 @@ import 'vue-material/dist/theme/default.css'
 
 Vue.config.productionTip = false
 
-Vue.use(VueMaterial)
+Vue.use(MdApp)
+Vue.use(MdButton)
+Vue.use(MdCard)
+Vue.use(MdContent)
+Vue.use(MdDatepicker)
+Vue.use(MdDialog)
+Vue.use(MdEmptyState)
+Vue.use(MdField)
+Vue.use(MdIcon)
+Vue.use(MdLayout)
+Vue.use(MdProgress)
+Vue.use(MdRadio)
+Vue.use(MdSnackbar)
+Vue.use(MdTable)
+Vue.use(MdTabs)
+Vue.use(MdToolbar)
+Vue.use(MdTooltip)
 Vue.component('date-from-now', DateFromNow)
 Vue.component('page-title', PageTitle)
 
diff --git a/src/app/src/router.js b/src/app/src/router.js
index 66e5617..a34f57c 100644
--- a/src/app/src/router.js
+++ b/src/app/src/router.js
@@ -3,17 +3,7 @@
 /* eslint-disable */
 import Vue    from 'vue'
 import Router from 'vue-router'
-
-import ActiveRequests   from '@/components/request/ActiveRequests'
-import AnsweredRequests from '@/components/request/AnsweredRequests'
-import EditRequest      from '@/components/request/EditRequest'
-import FullRequest      from '@/components/request/FullRequest'
-import Home             from '@/components/Home'
-import Journal          from '@/components/Journal'
-import LogOn            from '@/components/user/LogOn'
-import PrivacyPolicy    from '@/components/legal/PrivacyPolicy'
-import SnoozedRequests  from '@/components/request/SnoozedRequests'
-import TermsOfService   from '@/components/legal/TermsOfService'
+import Home   from '@/components/Home'
 /* eslint-enable */
 
 Vue.use(Router)
@@ -37,49 +27,49 @@ export default new Router({
     {
       path: '/journal',
       name: 'Journal',
-      component: Journal
+      component: () => import('@/components/Journal')
     },
     {
       path: '/legal/privacy-policy',
       name: 'PrivacyPolicy',
-      component: PrivacyPolicy
+      component: () => import('@/components/legal/PrivacyPolicy')
     },
     {
       path: '/legal/terms-of-service',
       name: 'TermsOfService',
-      component: TermsOfService
+      component: () => import('@/components/legal/TermsOfService')
     },
     {
       path: '/request/:id/edit',
       name: 'EditRequest',
-      component: EditRequest,
+      component: () => import('@/components/request/EditRequest'),
       props: true
     },
     {
       path: '/request/:id/full',
       name: 'FullRequest',
-      component: FullRequest,
+      component: () => import('@/components/request/FullRequest'),
       props: true
     },
     {
       path: '/requests/active',
       name: 'ActiveRequests',
-      component: ActiveRequests
+      component: () => import('@/components/request/ActiveRequests')
     },
     {
       path: '/requests/answered',
       name: 'AnsweredRequests',
-      component: AnsweredRequests
+      component: () => import('@/components/request/AnsweredRequests')
     },
     {
       path: '/requests/snoozed',
       name: 'SnoozedRequests',
-      component: SnoozedRequests
+      component: () => import('@/components/request/SnoozedRequests')
     },
     {
       path: '/user/log-on',
       name: 'LogOn',
-      component: LogOn
+      component: () => import('@/components/user/LogOn')
     }
   ]
 })
diff --git a/src/app/vue.config.js b/src/app/vue.config.js
index df4d8dc..95d966f 100644
--- a/src/app/vue.config.js
+++ b/src/app/vue.config.js
@@ -1,9 +1,16 @@
 const webpack = require('webpack')
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 module.exports = {
   outputDir: '../MyPrayerJournal.Api/wwwroot',
   configureWebpack: {
     plugins: [
+      // new BundleAnalyzerPlugin(),
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
-    ]
+    ],
+    optimization: {
+      splitChunks: {
+        chunks: 'all'
+      }
+    }
   }
 }
diff --git a/src/app/yarn.lock b/src/app/yarn.lock
index e3462b3..f3eb97e 100644
--- a/src/app/yarn.lock
+++ b/src/app/yarn.lock
@@ -8737,7 +8737,7 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-webpack-bundle-analyzer@^3.3.0:
+webpack-bundle-analyzer@^3.3.0, webpack-bundle-analyzer@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.4.1.tgz#430544c7ba1631baccf673475ca8300cb74a3c47"
   integrity sha512-Bs8D/1zF+17lhqj2OYmzi7HEVYqEVxu7lCO9Ff8BwajenOU0vAwEoV8e4ICCPNZAcqR1PCR/7o2SkW+cnCmF0A==