Vue builds

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. Compilerが必要ない場面って？
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide