イチロー引退　グラウンドでの最後の勇姿　2019MLB開幕2戦目8回裏YouTube をBGMにモチベーション爆上がり中のsukezaneです。

本記事執筆の経緯

こちらの素晴らしいチュートリアル記事の中で筆者さんがわからないって言っていたモノに対して調べようと思ったことがきっかけ
Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた
※本記事のタイトルは決して上記の筆者さんを否定するものではないですし、むしろ自分で調べなかったら絶対気にすることなかったので感謝です！！

何についての記事か

vueを読み込む際に使っているコレ

import Vue from 'vue/dist/vue.esm.js'

対象読者

vueの入門者（わたし）

どうやって使っているか

app/javascript/packs/todo.js


import Vue from 'vue/dist/vue.esm.js'
import Header from './components/header.vue'

 var app = new Vue({
   el: '#app',
   components: {
    'navbar': Header,
  }
 });

こんな感じで意味もわからずなんとなく使っている

でも時々`import Vue from 'vue'`って書いてるやん？

何が違うか

import Vue from 'vue/dist/vue.esm.js': 完全ビルド（vue.esm.js）
import Vue from 'vue': ランタイム限定ビルド（vue.runtime.esm.js）

って呼ぶらしい。

何が違うかPart2

公式より抜粋

ランタイム + コンパイラとランタイム限定の違い

もしクライアントでテンプレートをコンパイルする必要がある (例えば、 template オプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち完全ビルドが必要です。

hoge.js

// これはコンパイラが必要です
new Vue({
  template: '<div>{{ hi }}</div>'
})

// これはコンパイラは必要ありません
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

どうすればいいのか１

html側にテンプレートの参照を書かずに単一ファイルコンポーネント側にまとめ、html側ではマウントするDOMの情報だけを書くようにする
例）クリックした時に何かするやつ（修正前）

click.html

<div id=#app>
  <button v-on:click="myClick">Click me!</button>
</div>

click.js

import Vue from 'vue/dist/vue.esm.js'

const app = new Vue({
  el: "#app",
  methods: {
    myClick() {
      alert("click")
    }
  }
})

例）クリックした時に何かするやつ（修正後）

click.html

<div id=#app></div>

click.js

import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new App
  app.$mount('#app')
})

app.vue

<template>
  <button v-on:click="myClick">Click me!</button>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  methods: {
    myClick() {
      alert("click")
    }
  }
})
</script>

疎結合になってメンテもしやすそう！！

どうすればいいのか2

一応エイリアスを作成すれば完全ビルドの書き方のままでも動くんだけど

ランタイム限定ビルドは完全ビルドに比べおよそ 30% 軽量

と公式にあるため基本は1がいいと思うが 30%くらい別にいいわっていうときはエイリアスを作成すればimport Vue from 'vue'としてimportできるようになります。（実態は完全ビルドなんですけどね）

エイリアスを作成する（パフォーマンス30%減）

webpackの場合

webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' webpack 1 用
    }
  }
}

2年目も後半になったので`とりあえず動くからいいや`は卒業しようと思います。

なんかあったらコメントくださいませ
以上。

vue/dist/vue.esm.js って何~【とりあえず動くからいいや】からの卒業~