vue.jsで容量の大きいファイルを読み込む時はimportするよりaxiosの方が良いかも

importでファイルの読み込みが可能

パッと思いつくやり方として、importをする方法があります。

import json from './test.json'

export default {
  // 省略
  // 読み込んだjsonが使用可能
}

webpackでバンドルされる

デメリットとして、仮にこのファイルを使わなくてもwebpackでバンドルされてしまいます。
そのため、データを読み込むだけ読み込んで、使用しないという無駄のある作りになってしまいます。
何かのマスタデータのように容量の大きいファイルの場合は、必要な時だけそのファイルを読み込むという作りの方が良いのではないでしょうか。

axiosで読み込みが可能

import以外にもaxiosを使用してファイルの読み込みが可能なため、こちらを使うことで必要なタイミングでファイルを読み込むことができます。
APIをコールするときのようにパスを指定することで、読み込みが可能です。

mounted () {
  axios.get('./test.json')
  .then(response => {
    this.data = response.data;
  });
}

こうすることで、バンドル時にはtest.jsonが読み込まれず、mountされたデータが必要なタイミングのみ読み込みが行われるようになります。
実際にimportする場合とmountedでaxiosを使用して読み込む場合を比較してみても、mounted内で取得する方が容量が小さくなりました。ちなみにこのとき使用していたファイルはでかいです。

$ ll -h public/js/test.js
total 16328
// importでtest.jsonを取得時
-rw-r--r--  1 user  group   6.6M  6 28 12:10 public/js/test.js

// mountedの中でtest.jsonを取得時
$ ll -h public/js/ambassador.js
-rw-r--r--  1 user  group   3.4M  6 28 12:31 public/js/test.js