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
LINE 實習分享 & 國際黑客松參賽分享
line_developers_tw
PRO
0
19
在 GCP 運用 Parse 全家餐管理那堆 AI 應用的資料
line_developers_tw
PRO
0
22
40歲的我會給20歲的自己,關於軟體開發的7個建議
line_developers_tw
PRO
0
7.6k
從零到一:轉碼仔的實習攻略
line_developers_tw
PRO
0
34
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
45
做Data超讚的 誰懂?
line_developers_tw
PRO
0
33
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
120
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
240
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
770
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
チームリードになって変わったこと
isaka1022
0
190
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
9
3.3k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.9k
もう僕は OpenAPI を書きたくない
sgash708
2
750
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Embracing the Ebb and Flow
colly
84
4.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Producing Creativity
orderedlist
PRO
343
39k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
How to Ace a Technical Interview
jacobian
276
23k
Faster Mobile Websites
deanohume
306
31k
Typedesign – Prime Four
hannesfritz
40
2.5k
Visualization
eitanlees
146
15k
Automating Front-end Workflow
addyosmani
1367
200k
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