Vue.jsのビルドの種類v-kansai Vue.js Nuxt.js Meetup #10at tambourine commune2019-09-18
View Slide
はじめに:自己紹介安部 草麻生エンジニア/テクニカルディレクター
みなさんはVue.jsの環境ってどう作ってますか?
環境の作り方・vue-cliを利用する・手で一個ずつ$ npm install・CDNを利用する
環境の作り方・webpackを使う・browserifyなど、他の依存解決ツールを使う・CDNを利用する
vue-cliを使っていると目にするRuntime + Compilerとは?
Runtime + Compilerhttps://jp.vuejs.org/v /guide/installation.html#さまざまなビルドについて
Runtime + CompilerCompilerテンプレート文字列をレンダリングするためのもの・templateオプション・elオプション に必須
Runtime + CompilerRuntime 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だけにしたほうが色々考えなくて済む気はする