LIFFのファイルサイズを軽くする

liffのファイルサイズはそこそこ大きいです。gzip前だと115kBもあります。
下記はviteで実際にビルドした結果ですが、gzip圧縮をしても、まだ32kB以上ありますね。

実はこのliffのファイルサイズを小さくする方法があります。プラガブルSDKです。

https://developers.line.biz/ja/docs/liff/pluggable-sdk/#what-is-pluggable-sdk

このプラガブルSDKを使うと、LIFF SDKのファイルサイズを最大約34%削減できるそうです。仕組みとしては、使うAPIを選択してそれだけを読み込むことで削減することになります。

LIFFのプラガブルSDK使ってみた

では、liffのinitメソッドとgetAccessTokenメソッドだけを使うという想定でプラガブルSDKを実際に使ってみましょう。

まずは、liffオブジェクトを@line/liff/coreからインポートします。

import liff from "@line/liff/core"

このオブジェクトには、

• liff.id プロパティ
• liff.ready プロパティ
• liff.init() メソッド
• liff.getVersion() メソッド
• liff.use()　メソッド

が含まれています。
その他のAPIを利用するためには、対応するモジュールをインポートし、liff.use()　メソッドを使って有効化してあげる必要があります。

今回の場合、getAccessToken を有効化するので、下記のようなコードになります。

import liff from "@line/liff/core"
import GetAccessToken from "@line/liff/get-access-token"

liff.use(new GetAccessToken())

あとは、通常と同じようにliffオブジェクトを扱えば大丈夫です。有効化していないAPIを利用しようとすると、TypeScriptの場合ビルドエラーになります。

さて、実際にviteを使ってこちらのコードをビルドしてみましょう。

すると、結果は次のようになりました。

ファイルサイズは76kB、gzip後は22kBにまで減らせました。
割合で言うと、34%削減、gzip後は33%削減となるので、ドキュメントの最大約34%削減の通りですね。

まとめ

開発環境だとたいていWifiサクサクだと思うので気づきにくいですが、街中だとビルドサイズが地味に効いてくることもあるかと思うのでぜひプラガブルSDK使ってみてください。

普通にTree shakingで削減できるようにしてくれたらありがたいんですけどね、、、