Vue builds

Vue.jsのビルドの種類 v-kansai Vue.js Nuxt.js Meetup #10 at tambourine commune 2019-09-18

はじめに：自己紹介安部草麻生エンジニア/テクニカルディレクター

みなさんはVue.jsの環境ってどう作ってますか？

環境の作り方・vue-cliを利用する・手で一個ずつ $ npm install ・CDNを利用する

環境の作り方・webpackを使う・browserifyなど、他の依存解決ツールを使う・CDNを利用する

vue-cliを使っていると目にする Runtime + Compilerとは？

Runtime + Compiler https://jp.vuejs.org/v /guide/installation.html#さまざまなビルドについて

Runtime + Compiler Compiler テンプレート文字列をレンダリングするためのもの・templateオプション・elオプション　　　　　に必須

Runtime + Compiler Runtime Compiler以外のコード群

Compilerが必要ない場面って？

Compilerが不要な場面すべてVue Componentを利用できる場合 → 必要な情報はWeb APIなどから取得 → もしくはJSON形式でテンプレートに埋め込む → テンプレート自体に情報が埋め込まれない

Compilerが不要な場面 Runtime onlyビルドの場合、完全ビルドに比べてファイルサイズは30%ほど軽量

ビルドに気をつけなきゃいけないとき

ビルドに気をつける import/requireでnpm経由のパッケージを利用する場合、パスはそのパッケージの package.jsonのmainの項目を参照する Vueのmainは dist/vue.runtime.common.js

ビルドに気をつける Runtimeのみのビルドが利用されてしまうので、 Compilerが必要な場合に困る！ → いやふつう気づくでしょ

ビルドに気をつける Componentのほうでうっかり手癖で const Vue = require(‘vue’); していると、なぜか動くところと動かないところが混在することになる

ビルドに気をつける 2時間くらいああでもないこうでもないってしてたんですよ Vue.set() とか使ってみたりして……

Runtimeだけにしたほうが色々考えなくて済む気はする

Kusamao Abe