Reduce bundle size w/ lazy imports and correct icon usage

Largest bundle decreased from 2,901kB -> 118kB

package.json

@@ -13,10 +13,10 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free-brands": "^5.0.13",
-    "@fortawesome/fontawesome-free-regular": "^5.0.13",
-    "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@mdi/js": "^7.2.96",
     "bulma": "^0.9.4",

src/assets/main.css

@@ -1 +0,0 @@
-@import "~bulma/bulma";

src/components/AppFooter.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
-import faReddit from '@fortawesome/fontawesome-free-brands/faReddit'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { RouterLink } from 'vue-router'
 </script>
 
@@ -29,10 +26,10 @@ import { RouterLink } from 'vue-router'
         </p>
         <div class="github-reddit">
           <a href="https://github.com/kihashi/stardew_community_checklist">
-            <FontAwesomeIcon :icon="faGithub" />
+            <font-awesome-icon icon="fa-brands fa-github" />
           </a>
           <a href="https://www.reddit.com/r/stardewchecklist/">
-            <FontAwesomeIcon :icon="faReddit" />
+            <font-awesome-icon icon="fa-brands fa-reddit" />
           </a>
         </div>
       </div>

src/components/bundles/BundleNav.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useGeneralStore } from '@/store'
 import { ref } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -36,7 +35,7 @@ const menuActive = ref(false)
           >
             <a class="navbar-link">
               <span class="icon has-text-success" v-if="store.isRoomComplete(room.id)">
-                <font-awesome-icon icon="check-circle" />
+                <font-awesome-icon icon="fa-solid fa-check-circle" />
               </span>
               <span>{{ room.name }}</span>
             </a>
@@ -49,7 +48,7 @@ const menuActive = ref(false)
                 :to="{ name: 'bundle-items', params: { id: bundle.id } }"
               >
                 <span class="icon has-text-success" v-if="store.isBundleComplete(bundle.id)">
-                  <font-awesome-icon icon="check-circle" />
+                  <font-awesome-icon icon="fa-solid fa-check-circle" />
                 </span>
                 <span>{{ bundle.name }}</span>
               </RouterLink>

src/components/changelog/VersionDisplay.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -48,7 +46,7 @@ const releaseUrl = computed(
       <p class="card-footer-item">
         <a :href="releaseUrl" class="button">
           <span class="icon">
-            <FontAwesomeIcon :icon="faGithub" />
+            <font-awesome-icon icon="fa-brands fa-github" />
           </span>
           <span>Release</span>
         </a>

src/components/item-card/BundleButton.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCheckSquare, faSquare } from '@fortawesome/fontawesome-free-regular'
 import { useGeneralStore, type BundleItem } from '@/store'
 import { computed } from 'vue'
 
@@ -43,7 +41,9 @@ function toggleItemInBundle() {
     <div class="control is-expanded">
       <a class="button is-rounded is-fullwidth" :class="buttonClass" @click="toggleItemInBundle">
         <span class="icon">
-          <font-awesome-icon :icon="itemInBundle ? faCheckSquare : faSquare"></font-awesome-icon>
+          <font-awesome-icon
+            :icon="itemInBundle ? 'fa-regular fa-check-square' : 'fa-regular fa-square'"
+          />
         </span>
         <span class="is-size-7" v-if="bundle">{{ bundle.name }}{{ numberInBundle }}</span>
       </a>
@@ -54,7 +54,7 @@ function toggleItemInBundle() {
         :to="{ name: 'bundle-items', params: { id: bundleItem.bundle_id } }"
       >
         <span class="icon is-small">
-          <font-awesome-icon icon="link"></font-awesome-icon>
+          <font-awesome-icon icon="fa-solid fa-link"></font-awesome-icon>
         </span>
       </router-link>
     </div>

src/main.ts

@@ -1,24 +1,72 @@
-import * as mdijs from '@mdi/js'
+import 'bulma/css/bulma.min.css'
-import mdiVue from 'mdi-vue/v3'
+
-import { createPinia } from 'pinia'
-import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
 import { createApp } from 'vue'
-
 import App from './App.vue'
-import router from './router'
-
-import '../node_modules/bulma/bulma.sass'
-
 const app = createApp(App)
 
+import router from './router'
 app.use(router)
 
+// Pinia (state management)
+import { createPinia } from 'pinia'
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
+
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedState)
 app.use(pinia)
 
+// Material Design icons
+import {
+  mdiCow,
+  mdiDiamond,
+  mdiFish,
+  mdiFlower,
+  mdiLeaf,
+  mdiMushroom,
+  mdiSnowflake,
+  mdiSword,
+  mdiWhiteBalanceSunny
+} from '@mdi/js'
+import mdiVue from 'mdi-vue/v3'
 app.use(mdiVue, {
-  icons: mdijs
+  icons: {
+    mdiCow,
+    mdiFlower,
+    mdiWhiteBalanceSunny,
+    mdiLeaf,
+    mdiSnowflake,
+    mdiDiamond,
+    mdiMushroom,
+    mdiFish,
+    mdiSword
+  }
 })
 
+// Font Awesome icons
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+import { faGithub, faReddit } from '@fortawesome/free-brands-svg-icons'
+import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons'
+import {
+  faCheckCircle,
+  faCloudUploadAlt,
+  faCopy,
+  faLink,
+  faTrash
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCloudUploadAlt,
+  faCopy,
+  faTrash,
+  faGithub,
+  faCheckCircle,
+  faCheckSquare,
+  faSquare,
+  faLink,
+  faReddit
+)
+app.component('font-awesome-icon', FontAwesomeIcon)
+
 app.mount('#app')

src/router/index.ts

@@ -1,11 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import Welcome from '@/views/WelcomeView.vue'
+const Welcome = () => import('@/views/WelcomeView.vue')
-import Bundles from '@/views/BundlesView.vue'
+const Bundles = () => import('@/views/BundlesView.vue')
-import BundleItems from '@/components/bundles/BundleItems.vue'
+const BundleItems = () => import('@/components/bundles/BundleItems.vue')
-import Search from '@/views/SearchView.vue'
+const Search = () => import('@/views/SearchView.vue')
-import Settings from '@/views/SettingsView.vue'
+const Settings = () => import('@/views/SettingsView.vue')
-import Changelog from '@/views/ChangelogView.vue'
+const Changelog = () => import('@/views/ChangelogView.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

src/store/index.ts

@@ -166,7 +166,7 @@ export const useGeneralStore = defineStore('general', {
     resetData() {
       this.StoredBundleItemIds = {}
     },
-    migrateV1StateIfExists() {
+    async migrateV1StateIfExists() {
       const v1data = localStorage.getItem('user_data')
 
       if (v1data === null || v1data === '') return
@@ -202,7 +202,7 @@ export const useGeneralStore = defineStore('general', {
       localStorage.removeItem('user_data')
       localStorage.setItem('v1data', v1data)
     },
-    migrateV2StateIfExists() {
+    async migrateV2StateIfExists() {
       const v2data = localStorage.getItem('vuex')
 
       if (v2data === null || v2data === '') return

src/views/SettingsView.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
 import { useGeneralStore } from '@/store'
-import { faCloudUploadAlt, faCopy, faTrash } from '@fortawesome/fontawesome-free-solid'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { ref } from 'vue'
 import useClipboard from 'vue-clipboard3'
 
@@ -120,7 +118,7 @@ async function copySerializedState() {
           <div class="control">
             <button class="button is-info" @click="copySerializedState">
               <span class="icon">
-                <font-awesome-icon :icon="faCopy"></font-awesome-icon>
+                <font-awesome-icon icon="fa-solid fa-copy"></font-awesome-icon>
               </span>
             </button>
           </div>
@@ -138,7 +136,7 @@ async function copySerializedState() {
           <div class="control">
             <button class="button is-info" @click="loadData">
               <span class="icon">
-                <font-awesome-icon :icon="faCloudUploadAlt"></font-awesome-icon>
+                <font-awesome-icon icon="fa-solid fa-cloud-upload-alt"></font-awesome-icon>
               </span>
             </button>
           </div>
@@ -157,7 +155,7 @@ async function copySerializedState() {
               @click="onDelete"
             >
               <span class="icon">
-                <font-awesome-icon :icon="faTrash"></font-awesome-icon>
+                <font-awesome-icon icon="fa-solid fa-trash"></font-awesome-icon>
               </span>
               <span v-if="deleteConfirm"> Are You Sure? </span>
               <span v-else> Reset Data </span>

vite.config.ts

@@ -11,5 +11,18 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          bundles: [
+            './src/views/BundlesView.vue',
+            './src/components/bundles/BundleItems.vue',
+            './src/components/bundles/BundleNav.vue'
+          ]
+        }
+      }
+    }
   }
 })

yarn.lock

@@ -422,32 +422,6 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
   integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
 
-"@fortawesome/fontawesome-common-types@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
-  integrity sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==
-
-"@fortawesome/fontawesome-free-brands@^5.0.13":
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz#4d15ff4e1e862d5e4a4df3654f8e8acbd47e9c09"
-  integrity sha512-xC/sEPpfcJPvUbud2GyscLCLQlE2DVBYaTHVwuyVGliYBdYejSEYMINU8FN5A0xhO68yCbpCfMlBv6Gqby+jww==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
-
-"@fortawesome/fontawesome-free-regular@^5.0.13":
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-regular/-/fontawesome-free-regular-5.0.13.tgz#eb78c30184e3f456a423a1dcfa0f682f7b50de4a"
-  integrity sha512-36lz9Idww1L4QaaTcv7GZiOeIP9emJFDUsedvRovI10kmwyd6rN0PKkIjnq0FB4foLhX4Rou8vnbCCmjtqiLug==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
-
-"@fortawesome/fontawesome-free-solid@^5.0.13":
-  version "5.0.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz#24b61aaf471a9d34a5364b052d64a516285ba894"
-  integrity sha512-b+krVnqkdDt52Yfev0x0ZZgtxBQsLw00Zfa3uaVWIDzpNZVtrEXuxldUSUaN/ihgGhSNi8VpvDAdNPVgCKOSxw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
-
 "@fortawesome/fontawesome-svg-core@^6.4.0":
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
@@ -455,6 +429,27 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.4.0"
 
+"@fortawesome/free-brands-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz#c785cf5563231eadc5ef5f8cd0274e0b8920433f"
+  integrity sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-regular-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
+  integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
 "@fortawesome/vue-fontawesome@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz#633e2998d11f7d4ed41f0d5ea461a22ec9b9d034"