various build optimizations

.circleci/config.yml

@@ -48,6 +48,24 @@ jobs:
       - store_artifacts:
           path: tests/e2e/screenshots
 
+  build:
+    <<: *vm_settings
+    steps:
+      - checkout
+
+      # Install dependencies
+      - restore_cache: *install_restore_cache
+      - run: *install_run
+      - save_cache: *install_save_cache
+
+      - run:
+          name: Build for production
+          command: yarn build:ci
+
+      # Store build artifacts
+      - store_artifacts:
+          path: dist
+
   # deploy:
   #   <<: *vm_settings
   #   steps:
@@ -67,6 +85,7 @@ workflows:
   test_and_deploy:
     jobs:
       - test
+      - build
       # - deploy:
       #     # Only deploy if tests pass
       #     requires:

package.json

@@ -6,6 +6,7 @@
     "dev": "vue-cli-service serve",
     "dev:e2e": "vue-cli-service e2e:open --mode=development",
     "build": "vue-cli-service build",
+    "build:ci": "ANALYZE=true yarn build",
     "lint":
       "eslint --ext .js,.vue --fix . && stylelint --fix \"src/**/*.vue\" \"src/**/*.scss\" && markdownlint docs/*.md *.md && prettier --list-different --write \"**/*.{js,jsx,json,css,scss,vue,md}\"",
     "unit": "jest",
@@ -25,8 +26,10 @@
   },
   "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"],
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.4",
+    "@fortawesome/fontawesome-free-solid": "^5.0.8",
+    "@fortawesome/vue-fontawesome": "^0.0.22",
     "axios": "0.18.0",
-    "font-awesome": "4.7.0",
     "lodash": "4.17.5",
     "normalize.css": "8.0.0",
     "nprogress": "0.2.0",
@@ -62,6 +65,7 @@
     "stylelint-config-standard": "18.2.x",
     "stylelint-scss": "2.5.x",
     "vue-jest": "2.1.x",
-    "vue-template-compiler": "2.5.16"
+    "vue-template-compiler": "2.5.16",
+    "webpack-bundle-analyzer": "2.11.x"
   }
 }

src/app.vue

@@ -81,16 +81,6 @@ h6 {
   @extend %typography-small;
 }
 
-// ===
-// Animations
-// ===
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 // ===
 // Vendor
 // ===

src/components/_base-icon.unit.js

@@ -2,26 +2,21 @@ import BaseIcon from './_base-icon'
 
 describe('@components/base-icon', () => {
   it('renders a font-awesome icon', () => {
-    const { element } = mountShallow(BaseIcon, {
-      ...createComponentMocks({
-        style: {
-          fa: 'fa',
-          'fa-some-icon': 'fa-some-icon',
-        },
-      }),
+    const { element } = mount(BaseIcon, {
       propsData: {
-        name: 'some-icon',
+        name: 'sync',
       },
     })
 
-    expect(element.className).toEqual('fa fa-some-icon')
+    expect(element.tagName).toEqual('svg')
+    expect(element.classList).toContain('svg-inline--fa', 'fa-sync', 'fa-w-16')
   })
 
   it('renders a custom icon', () => {
     const { element } = mountShallow(BaseIcon, {
       ...createComponentMocks({
         style: {
-          iconCustomSomeIcon: 'icon-custom-some-icon',
+          iconCustomSomeIcon: 'generated-class-name',
         },
       }),
       propsData: {
@@ -30,6 +25,6 @@ describe('@components/base-icon', () => {
       },
     })
 
-    expect(element.className).toEqual('icon-custom-some-icon')
+    expect(element.className).toEqual('generated-class-name')
   })
 })

src/components/_base-icon.vue

@@ -1,11 +1,14 @@
 <script>
+import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 import camelCase from 'lodash/camelCase'
 
 export default {
+  components: {
+    FontAwesomeIcon,
+  },
   props: {
     source: {
       type: String,
-      // http://fontawesome.io/icons/
       default: 'font-awesome',
     },
     name: {
@@ -14,6 +17,15 @@ export default {
     },
   },
   computed: {
+    // https://fontawesome.com/icons
+    fontAwesomeIcon() {
+      return {
+        // Add new icons to this list as you need them
+        sync: require('@fortawesome/fontawesome-free-solid/faSync'),
+        user: require('@fortawesome/fontawesome-free-solid/faUser'),
+      }[this.name]
+    },
+    // Gets a CSS module class, e.g. iconCustomLogo
     customIconClass() {
       return this.$style[camelCase('icon-custom-' + this.name)]
     },
@@ -22,30 +34,13 @@ export default {
 </script>
 
 <template>
-  <span
+  <FontAwesomeIcon
     v-if="source === 'font-awesome'"
-    :class="[
-      $style.fa,
-      $style['fa-' + name],
-    ]"
+    :icon="fontAwesomeIcon"
+    v-bind="$attrs"
   />
   <span
     v-else-if="source === 'custom'"
     :class="customIconClass"
   />
 </template>
-
-<style lang="scss" module>
-$fa-font-path: 'font-awesome/fonts';
-
-@import '~font-awesome/scss/font-awesome';
-
-.iconCustomLoading {
-  @extend .fa;
-  @extend .fa-refresh;
-
-  :global {
-    animation: spin 2s linear infinite;
-  }
-}
-</style>

src/router/views/login.vue

@@ -63,8 +63,8 @@ export default {
       >
         <BaseIcon
           v-if="tryingToLogIn"
-          source="custom"
-          name="loading"
+          name="sync"
+          spin
         />
         <span v-else>Log in</span>
       </BaseButton>

src/state/modules/index.js

@@ -1,15 +1,22 @@
-// Register each file as a corresponding Vuex module -- module nesting will
-// mirror [sub-]directory hierarchy. (Modules are namespaced as the camelCase
-// equivalent of their file name.)
+// Register each file as a corresponding Vuex module. Module nesting will
+// mirror [sub-]directory hierarchy and modules are namespaced as the camelCase
+// equivalent of their file name.
 
 import camelCase from 'lodash/camelCase'
 
-const requireModule = require.context('.', true, /\.js$/)
+const requireModule = require.context(
+  // Search for files in the current directory
+  '.',
+  // Search for files in subdirectories
+  true,
+  // Include any `.js` files that are not unit tests
+  /^((?!\.unit\.).)*\.js$/
+)
 const root = { modules: {} }
 
 requireModule.keys().forEach(fileName => {
-  // Skip files that aren't modules
-  if (fileName === './index.js' || /\.unit\.js$/.test(fileName)) return
+  // Skip this file, as it's not a module
+  if (fileName === './index.js') return
 
   // Get the module path as an array
   const modulePath = fileName

vue.config.js

@@ -1,3 +1,4 @@
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 const appConfig = require('./src/app.config')
 
 module.exports = {
@@ -9,6 +10,13 @@ module.exports = {
     resolve: {
       alias: require('./aliases.config').webpack,
     },
+    plugins: [
+      // Optionally produce a bundle analysis
+      // TODO: Remove once this feature is built into Vue CLI
+      new BundleAnalyzerPlugin({
+        analyzerMode: process.env.ANALYZE ? 'static' : 'disabled',
+      }),
+    ],
   },
   css: {
     // Enable CSS source maps.