Vue.js AMP amp-script
amp-scriptでVueを使いたい
kght6123
下記のampproject/amphtmlのサンプル(vue-todomvc.amp.html、vue-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で実装した方が良いかも。。。汗