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

@@ -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"
   }
 }

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')
+                  ref='snackbar') {{ snackbar.message }}
-        | {{ snackbar.message }}
       footer
         p.mpj-muted-text.mpj-text-right
           | myPrayerJournal v{{ version }}

src/app/src/main.js

@@ -2,7 +2,23 @@
 
 // Vue packages and components
 import Vue from 'vue'
-import VueMaterial from 'vue-material'
+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)
 

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'
 /* 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')
     }
   ]
 })

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'
+      }
+    }
   }
 }

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==