Dcard Frontend i18n

internationalization

怎麼做?

怎麼做?

  1. refactor code
  2. 把對應語言的字串檔放進去

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-US
  • ja-JP

Performance

  • zh-TW
  • en-US
  • ja-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