Slide 1
Slide 1 text
Vue.jsのビルドの種類
v-kansai Vue.js Nuxt.js Meetup #10
at tambourine commune
2019-09-18
Slide 2
Slide 2 text
はじめに：自己紹介
安部 草麻生
エンジニア/テクニカルディレクター
Slide 3
Slide 3 text
みなさんはVue.jsの環境って
どう作ってますか？
Slide 4
Slide 4 text
環境の作り方
・vue-cliを利用する
・手で一個ずつ
$ npm install
・CDNを利用する
Slide 5
Slide 5 text
環境の作り方
・webpackを使う
・browserifyなど、他の依存解決ツールを使う
・CDNを利用する
Slide 6
Slide 6 text
vue-cliを使っていると目にする
Runtime + Compilerとは？
Slide 7
Slide 7 text
Runtime + Compiler
https://jp.vuejs.org/v /guide/installation.html#さまざまなビルドについて
Slide 8
Slide 8 text
Runtime + Compiler
Compiler
テンプレート文字列をレンダリングするためのもの
・templateオプション
・elオプション に必須
Slide 9
Slide 9 text
Runtime + Compiler
Runtime Compiler以外のコード群
Slide 10
Slide 10 text
Compilerが必要ない場面って？
Slide 11
Slide 11 text
Compilerが不要な場面
すべてVue Componentを利用できる場合
→ 必要な情報はWeb APIなどから取得
→ もしくはJSON形式でテンプレートに埋め込む
→ テンプレート自体に情報が埋め込まれない
Slide 12
Slide 12 text
Compilerが不要な場面
Runtime onlyビルドの場合、完全ビルドに比べて
ファイルサイズは30%ほど軽量
Slide 13
Slide 13 text
ビルドに気をつけなきゃいけないとき
Slide 14
Slide 14 text
ビルドに気をつける
import/requireでnpm経由のパッケージを
利用する場合、パスはそのパッケージの
package.jsonのmainの項目を参照する
Vueのmainは
dist/vue.runtime.common.js
Slide 15
Slide 15 text
ビルドに気をつける
Runtimeのみのビルドが利用されてしまうので、
Compilerが必要な場合に困る！
→ いやふつう気づくでしょ
Slide 16
Slide 16 text
ビルドに気をつける
Componentのほうでうっかり手癖で
const Vue = require(‘vue’);
していると、なぜか動くところと動かないところが
混在することになる
Slide 17
Slide 17 text
ビルドに気をつける
2時間くらいああでもないこうでもない
ってしてたんですよ
Vue.set()
とか使ってみたりして……
Slide 18
Slide 18 text
Runtimeだけにしたほうが色々考えなくて済む気はする