Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt i18n Experience Sharing
Search
LINE Developers Taiwan
PRO
August 19, 2020
Programming
0
12k
Nuxt i18n Experience Sharing
Nuxt i18n 實戰經驗分享 @ v-tw #006
v-tw event:
https://vuejs.kktix.cc/events/v-tw-meetup-006
LINE Developers Taiwan
PRO
August 19, 2020
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
就讓AI幫你帶LINE好運
line_developers_tw
PRO
1
25
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
47k
LINE 台灣實習計畫 2024 - TECH FRESH 介紹
line_developers_tw
PRO
0
470
LINE 台灣實習計畫 - 相關福利與面試流程
line_developers_tw
PRO
0
490
Navigating My Internship: A 5W1H Perspective
line_developers_tw
PRO
0
18
1001 號 到 333 號
line_developers_tw
PRO
0
14
關於我連線三年半的故事
line_developers_tw
PRO
0
810
LINE 電商部門實習分享
line_developers_tw
PRO
0
44
大學六年,我差點忘了畢業
line_developers_tw
PRO
0
450
Other Decks in Programming
See All in Programming
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Ruby Pattern Matching
bkuhlmann
0
930
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
エンターテイメント業界で利用されるAWS
demuyan
0
210
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
340
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
280
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
Git Lint
bkuhlmann
4
750
Hanami and htmx
bkuhlmann
0
210
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
What's in a price? How to price your products and services
michaelherold
237
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Code Reviewing Like a Champion
maltzj
514
39k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Documentation Writing (for coders)
carmenintech
60
3.9k
GraphQLとの向き合い方2022年版
quramy
32
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Transcript
Abel — LINE TODAY 前端工程師 2020.08.19 1X[W LQ 䋿䜗妿涢獤Ձ
Menu 1. Intro Nuxt i18n 5mins 2. Intro LINE TODAY
5mins 3. Our Problems 15mins 4. Q&A 5mins
Nuxt i18n Example
Nuxt i18n Set Locale
Nuxt i18n Lazy Load
LINE TODAY 4 Countries 2500 Messages 4 Languages
LINE TODAY Modules
LINE TODAY Async Component
Nuxt i18n lazy load 700 messages Poll Component Weather Component
Movie Component LINE TODAY i18n setup
Problem 1 Page speed
Problem 1 Page speed
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
Problem 1 JSON size
Problem 1 JSON size
Problem 1 JSON size
Problem 1 JSON size Real case https://lin.ee/C2LF1Im
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
Problem 1 Async Component
Problem 1 Solution
Problem 1 Import Message
Problem 2 SSR
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
Problem 2 Solution Nuxt Plugin Import 700 messages import 50
messages import component Async Component Weather.vue SSR CSR HTML with language
Problem 2 SSR Solution
Problem 2 SSR Solution
Problem 3 Shared: Module:
Problem 3 JSON vs JS literal Module: Nuxt i18n lazy
load:
Problem 3 Speed https://lin.ee/jtds26s
Problem 3 Create shared JS
Problem 3 Solution
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.
Example https://lin.ee/3VzyZnF nuxt-i18n-demo
Q&A
LINE TECH FRESH https://engineering.linecorp.com/zh-hant/blog/tech-fresh-2020/ 34
35