kihashi/stardew_community_checklist
1
0
Fork 0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
Code Issues Releases Activity

Reduce bundle size w/ lazy imports and correct icon usage

Browse Source 
Largest bundle decreased from 2,901kB -> 118kB
This commit is contained in:
lachie-underhill 2023-06-05 16:40:18 +10:00
parent 3b5822c135
commit 5912def418
No known key found for this signature in database
GPG Key ID: 48057E0D2C37AC20
13 changed files with 115 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

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

1
src/assets/main.css
View File

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

0
src/assets/main.scss Normal file
View File

7
src/components/AppFooter.vue
View File

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

5
src/components/bundles/BundleNav.vue
View File

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

4
src/components/changelog/VersionDisplay.vue
View File

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

8
src/components/item-card/BundleButton.vue
View File

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

68
src/main.ts
View File

@ -1,24 +1,72 @@
import * as mdijs from '@mdi/js'
import mdiVue from 'mdi-vue/v3'
import { createPinia } from 'pinia'
import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
import 'bulma/css/bulma.min.css'
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')

12
src/router/index.ts
View File

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

4
src/store/index.ts
View File

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

8
src/views/SettingsView.vue
View File

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

13
vite.config.ts
View File

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

47
yarn.lock
View File

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