Как включить файл JSON в VueJs без его компиляции

Question

Я пытаюсь создать новое приложение VueJs, но сталкиваюсь с какой-то проблемой. У меня есть большой JSON-файл с массивом объектов, который я отображаю на основе критериев поиска, но при этом создается файл app.js, который слишком велик. Загрузка приложения занимает слишком много времени.

В данный момент я импортирую его как:

import SpellStore from '../store/spells.json'

Полный компонент здесь:

<script>
import SpellBlock from '../components/SpellBlock.vue'
import SpellStore from '../store/spells.json'
export default {
    name: 'Spells',
    components: {
        SpellBlock
    },
    computed: {
        count: function () {
            return this.$store.state.count
        },
        spells: function () {
            var result = SpellStore
            if (this.filter.text) {
                result = result.filter(m => !m.name.toLowerCase().indexOf(this.filter.text.toLowerCase()))
            }
            return result;
        },

    },
    data(){
        return {
            maxResults: 50,
            filter: {
                text:'',
            },
          }
      }
};

Проблема : Когда я собираюсь для производства, он генерирует файл app.js размером около 12 Мб, только потому, что файл json действительно большой. И когда я просматриваю исходный код app.js, я на самом деле вижу весь объект json. В моем приложении пока еще немногое. Я не хочу обременять ВСЕХ пользователей этим большим файлом, когда он не нужен. Как мне загрузить этот файл только при необходимости? Мне тоже не повезло с гуглом. Как мне подойти к этому?

Решено

async mounted() {
    await import("../store/spells.json")
        .then(({default: json}) => {
            this.SpellStore = json;
        });
    }

Answer 1

Я думаю, что вы можете достичь этого с require import

async mounted() {
  this.SpellStore = await import("../store/spells.json");
}