Nuxt i18n Experience Sharing

Nuxt i18n 實戰經驗分享 @ v-tw #006
v-tw event: https://vuejs.kktix.cc/events/v-tw-meetup-006

Transcript

1. Abel — LINE TODAY 前端工程師 2020.08.19 1X[W LQ 䋿䜗妿涢獤Ձ
2. Menu 1. Intro Nuxt i18n 5mins 2. Intro LINE TODAY 5mins 3. Our Problems 15mins 4. Q&A 5mins
3. Nuxt i18n Example
4. Nuxt i18n Set Locale
5. Nuxt i18n Lazy Load
6. LINE TODAY 4 Countries 2500 Messages 4 Languages
7. LINE TODAY Modules
8. LINE TODAY Async Component
9. Nuxt i18n lazy load 700 messages Poll Component Weather Component Movie Component LINE TODAY i18n setup
10. Problem 1 Page speed
11. Problem 1 Page speed
12. Problem 1 Split Message /\.poll\./ title.poll.page /\.weather\./ info.weather.AQI /\.movie\./ bt.movie.book poll_zh_TW.json 20 messages weather_zh_TW.json 50 messages movie_zh_TW.json 130 messages lang/zh_TW.json 700 messages 150 messages Others bt.copy
13. Problem 1 JSON size
14. Problem 1 JSON size
15. Problem 1 JSON size
16. Problem 1 JSON size Real case https://lin.ee/C2LF1Im
17. Problem 1 Split Message Nuxt i18n lazy load 700 messages Poll Component Weather Component Movie Component poll_zh_TW.json 20 messages weather_zh_TW.json 50 messages movie_zh_TW.json 130 messages shared 150 messages
18. Problem 1 Async Component
19. Problem 1 Solution
20. Problem 1 Import Message
21. Problem 2 SSR
22. Problem 2 SSR import messages import component Async Component 1st request 2nd request HTML with language Weather.vue Async Component HTML no language Weather.vue
23. Problem 2 Solution Nuxt Plugin Import 700 messages import 50 messages import component Async Component Weather.vue SSR CSR HTML with language
24. Problem 2 SSR Solution
25. Problem 2 SSR Solution
26. Problem 3 Shared: Module:
27. Problem 3 JSON vs JS literal Module: Nuxt i18n lazy load:
28. Problem 3 Speed https://lin.ee/jtds26s
29. Problem 3 Create shared JS
30. Problem 3 Solution
31. Summary • Split big JSON into small pieces. • Only import the messages the you need. • Server side: import the whole messages. • Client side: import messages on the fly. • Don’t use JS literal to save i18n message. Use JSON.
32. Example https://lin.ee/3VzyZnF nuxt-i18n-demo
33. Q&A
34. LINE TECH FRESH https://engineering.linecorp.com/zh-hant/blog/tech-fresh-2020/ 34