Vue builds

D24ddc5243a04e4425e553827dec3266?s=47 Kusamao Abe
September 18, 2019

Vue builds

D24ddc5243a04e4425e553827dec3266?s=128

Kusamao Abe

September 18, 2019
Tweet

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