Nuxt i18n Experience Sharing

Slide 1

Slide 1 text

Abel — LINE TODAY 前端工程師 2020.08.19 1X[W LQ 䋿䜗妿涢獤Ձ

Slide 2

Slide 2 text

Menu 1. Intro Nuxt i18n 5mins 2. Intro LINE TODAY 5mins 3. Our Problems 15mins 4. Q&A 5mins

Slide 3

Slide 3 text

Nuxt i18n Example

Slide 4

Slide 4 text

Nuxt i18n Set Locale

Slide 5

Slide 5 text

Nuxt i18n Lazy Load

Slide 6

Slide 6 text

LINE TODAY 4 Countries 2500 Messages 4 Languages

Slide 7

Slide 7 text

LINE TODAY Modules

Slide 8

Slide 8 text

LINE TODAY Async Component

Slide 9

Slide 9 text

Nuxt i18n lazy load 700 messages Poll Component Weather Component Movie Component LINE TODAY i18n setup

Slide 10

Slide 10 text

Problem 1 Page speed

Slide 11

Slide 11 text

Problem 1 Page speed

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Problem 1 JSON size

Slide 14

Slide 14 text

Problem 1 JSON size

Slide 15

Slide 15 text

Problem 1 JSON size

Slide 16

Slide 16 text

Problem 1 JSON size Real case https://lin.ee/C2LF1Im

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Problem 1 Async Component

Slide 19

Slide 19 text

Problem 1 Solution

Slide 20

Slide 20 text

Problem 1 Import Message

Slide 21

Slide 21 text

Problem 2 SSR

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Problem 2 Solution Nuxt Plugin Import 700 messages import 50 messages import component Async Component Weather.vue SSR CSR HTML with language

Slide 24

Slide 24 text

Problem 2 SSR Solution

Slide 25

Slide 25 text

Problem 2 SSR Solution

Slide 26

Slide 26 text

Problem 3 Shared: Module:

Slide 27

Slide 27 text

Problem 3 JSON vs JS literal Module: Nuxt i18n lazy load:

Slide 28

Slide 28 text

Problem 3 Speed https://lin.ee/jtds26s

Slide 29

Slide 29 text

Problem 3 Create shared JS

Slide 30

Slide 30 text

Problem 3 Solution

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

Example https://lin.ee/3VzyZnF nuxt-i18n-demo

Slide 33

Slide 33 text

Q&A

Slide 34

Slide 34 text

LINE TECH FRESH https://engineering.linecorp.com/zh-hant/blog/tech-fresh-2020/ 34

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text