About

本サイトについて

趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。

プロフィール

kght6123

佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。

kght6123.page

amp-scriptでVueを使いたい

2022-10-01T11:54:24.864Z

amp-scriptでVueを使うときに、調べたことをしょうかいします!

下記のampproject/amphtmlのサンプル(vue-todomvc.amp.htmlvue-todomvc.js)を参考に Vue.js で実装できます

(なかなか、見つけるのに苦労しました。汗)

JavaScriptのサイズ制限とVueランタイムとコンパイラのサイズについて

AMPの場合はJavaScriptのサイズに制限(1ページあたり150KB)があり、

サンプルに埋め込まれているvue.min.js(2.6.10)は、91.48 KBあるので、残り50KBしか使えません。

1ページ当たりのスクリプトのサイズなので、50KB(約5万文字)はなかなか超えないと思いますが、ちょっと心配です。

ちなみに。Vue.jsの3.0RC7(vue.global.prod.js)は、101.62 KBあるので、残りは更に減って40KBになります。

amp-scriptでimportが使えない!

Vueを使うすべてのjsファイルでVueのソースコードを埋め込む必要があります、、、ちょっと本番運用で使うのは抵抗ありますね。

サンプルのココの部分

理想は、importを使ってVue.jsを読み込みたい!ですが、iOSのSafariはServiceWorker上でimportが使えないので、iOSに対応したいときはimportは使えないです。

(補足:amp-scriptはServiceWorker上で動きます。)

Vue.jsとJavaScriptの使い分け

簡単なDOM操作だけならJavaScriptで実装、複雑なDOM操作が必要ならVue.jsで実装、150KBを超えそうなら最適化するか、AMPを諦めるか、JavaScriptへ切り替えを検討。。。って感じですか

うーん、、、最初からVue.js使わずに、JavaScriptで実装した方が良いかも。。。汗