---
# System prepended metadata

title: NCU Fresh 開發日誌

---

# NCU Fresh 開發日誌
- fullpage.js
- tailwindcss JIT mode in NUXT3
- Dockerfile
- Makefile
- Gitlab CI

## 坑
- Docker
    - mount to hot reload
    - node:lts-alpine version not match
    - ubunut 16.04 cannot update docker-compose
- nuxt
    - asset -> public
    - config import from nuxt3
    - head -> meta
    - route -> nuxt generate
        - Route caching and static pre-rendering with built-in crawler
    - websocket
    - nuxt-fullpage
        - ![](https://i.imgur.com/A5HImeI.png)
        - license
        - solution: use public dir
    - bug
        - https://github.com/nuxt/framework/issues/4325
    - vue-cal
        - webpack issue
    - v-calendar
    - @nuxtjs/device
        - now can not work on nuxt3 because vite
- tailwindcss
    - don't use @nuxt/tailwind -> cannot hot reload
- npm 
    - experientmental fetch
    - --location=global
- font-face
    - .ttf -> .woff2
    - .ttc -> .ttf -> .woff2
    - convert chinese font to unicode and then remove unuse font
        - use https://transfonter.org/
- image
    - use imageoptime to minimize image size 
    - use photoshop
    - use ImageOptim(on macOS)
- vue3
    - teleport
    - fragment
    - suspense
    - v-cloak
- vite
    - splitVendorChunkPlugin()
    - viteCompression() 
    - manualChunk
    - do not have `module export default`
    - do not support `$window` 

## perf
- font
    - 先把要得字都挑出來
    - 可先用 editor 做簡單處理，把換行、多餘空白、英文、符號拿掉
    - https://www.qqxiuzi.cn/zh/quchong/ 丟上去把重複的字去掉
    - https://transfonter.org/ 視情況直接把字丟進去或用 unicode 處理（建議這步驟分批做、分批檢查看少那些字）
    - 得到分批處理完的字體
    - https://superuser.com/questions/490922/merging-two-fonts 丟到 fontforge merge font
    - 得到最少的字體
- webp
- SSR