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だけにしたほうが色々考えなくて済む気はする