About
本サイトについて
趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。
プロフィール
kght6123
佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。
趣味で開発したプログラムや開発メモを載せています。
ソースコードはGithubで公開しつつ、なるべく後から分かるように解説に努めてますので、
誰かのお役に立てれば嬉しいです。
佐賀県出身で1985年生まれ。
三重県四日市市在住のシステムエンジニア。家庭を大事にしたい2児の父。
amp-scriptでVueを使うときに、調べたことをしょうかいします!
下記のampproject/amphtmlのサンプル(vue-todomvc.amp.html、vue-todomvc.js)を参考に Vue.js で実装できます
(なかなか、見つけるのに苦労しました。汗)
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になります。
Vueを使うすべてのjsファイルでVueのソースコードを埋め込む必要があります、、、ちょっと本番運用で使うのは抵抗ありますね。
理想は、importを使ってVue.jsを読み込みたい!ですが、iOSのSafariはServiceWorker上でimportが使えないので、iOSに対応したいときはimportは使えないです。
(補足:amp-scriptはServiceWorker上で動きます。)
簡単なDOM操作だけならJavaScriptで実装、複雑なDOM操作が必要ならVue.jsで実装、150KBを超えそうなら最適化するか、AMPを諦めるか、JavaScriptへ切り替えを検討。。。って感じですか
うーん、、、最初からVue.js使わずに、JavaScriptで実装した方が良いかも。。。汗