Topsters 3's bundle size isn't too bad as-is, but there are a few packages that can be replaced to reduce the size.
[x] uuid: Browsers offer the randomUUID() function built-in, which generates the same type of UUID we're using the uuid package for. The main difference is that the built-in function will only run on HTTPS connections. That limitation shouldn't be a blocker, as the website is never served via HTTP and the localStorage will be different on HTTP (i.e. the website would already break if served on a non-SSL connection).
[x] fflate: We might be able to use the built-in Compression Streams browser API for this. I'm not totally sure if we could do a 1-1 replacement and my brief experimentation with it when setting up fflate was a mess, but it's worth investigating if we could shave off a few KB.
[ ] bootstrap-icons-vue: This seems to be tree-shaking correctly to the only few icons we're using. We might save a bit of space by storing the SVGs in the repo and removing the extra dependency. It's possible that this would bring marginal benefit or no benefit though.
[x] vuex - We're definitely not using all the features of Vuex, so it might be worth exploring ways of maintaining a global state without a package. This might be relevant. (Switched to Pinia, which is 3.5 KB vs. Vuex's ~10KB. It's unlikely that rolling my own state management solution would be smaller than Pinia.)
Topsters 3's bundle size isn't too bad as-is, but there are a few packages that can be replaced to reduce the size.
uuid
: Browsers offer therandomUUID()
function built-in, which generates the same type of UUID we're using theuuid
package for. The main difference is that the built-in function will only run on HTTPS connections. That limitation shouldn't be a blocker, as the website is never served via HTTP and thelocalStorage
will be different on HTTP (i.e. the website would already break if served on a non-SSL connection).fflate
: We might be able to use the built-in Compression Streams browser API for this. I'm not totally sure if we could do a 1-1 replacement and my brief experimentation with it when setting upfflate
was a mess, but it's worth investigating if we could shave off a few KB.bootstrap-icons-vue
: This seems to be tree-shaking correctly to the only few icons we're using. We might save a bit of space by storing the SVGs in the repo and removing the extra dependency. It's possible that this would bring marginal benefit or no benefit though.vuex
- We're definitely not using all the features of Vuex, so it might be worth exploring ways of maintaining a global state without a package. This might be relevant. (Switched to Pinia, which is 3.5 KB vs. Vuex's ~10KB. It's unlikely that rolling my own state management solution would be smaller than Pinia.)