Vue.js AMP amp-script

amp-scriptでVueを使いたい

kght6123

kght6123

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で実装した方が良いかも。。。汗