Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue builds

Kusamao Abe
September 18, 2019

Vue builds

Kusamao Abe

September 18, 2019
Tweet

More Decks by Kusamao Abe

Other Decks in Programming

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