Vue builds

Transcript

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