Dcard Frontend i18n
internationalization
怎麼做?
怎麼做?
- refactor code
- 把對應語言的字串檔放進去
Refactoring

React Component
Refactoring
React
Refactoring
React
AST(Abstract syntax tree)
Refactoring
React
AST(Abstract syntax tree)
Chinese
Refactoring
React
AST(Abstract syntax tree)
Chinese
Insert variables
Structure
Structure
Typescript
Structure
Typescript
Javascript
Structure
Typescript
Javascript
Nextjs
Refactoring

Others
暴力解
取得所有中文

取得所有中文


取得所有中文

Insert variable back

Insert variable back

LC_CTYPE=C sed -i '' \
-E 's/string_91([^0-9])/meta.search_title.without_query.title_format\1/g' \
$(ag 'string_91([^0-9])' \
./sites/web --ignore-dir ./sites/web/config | \
awk '{split($0, a, ":"); print a[1]}')Performance & SEO
Performance
- zh-TW
- en-US
- ja-JP
Performance
- zh-TW
en-USja-JP
Performance
- zh-TW
en-USja-JP
const intlLoader = new IntlLoader({
defaultLocale: Locale.zhTW,
locales: {
[Locale.zhTW]: async () =>
(
await import(
/* webpackChunkName: "locale-zh-TW" */ '../locale/zh-TW.json'
)
).default,
[Locale.enUS]: async () =>
(
await import(
/* webpackChunkName: "locale-en-US" */ '../locale/en-US.json'
)
).default,
[Locale.jaJP]: async () =>
(
await import(
/* webpackChunkName: "locale-ja-JP" */ '../locale/ja-JP.json'
)
).default,
},
});Performance


Performance
Performance
Server Side 載入
Time to first byte ++
Performance
Server Side 載入
Time to first byte ++
Client Side 載入
第一個畫面會沒有資料
Performance
Server
Client
HTML
中文字串
Performance
Server
Client
HTML
中文字串
Performance
Registry
Client
有用到的就註冊
寫到 HTML
HTML
Server
Performance
Registry
Client
有用到的就註冊
寫到 HTML
HTML
Server
中文字串
Q&A
Thanks
Dcard Frontend i18n
By 邱俊霖
Dcard Frontend i18n
- 168