CODEWITHSUNDEEP
vue.jswebpack
Rule
Rule

Reputation: 325

How do i include a JSON file in VueJs without compiling it

I am trying to create a new VueJs application but I am running into a problem of sorts. I have a large JSON file with an array of objects in it that i display based on search criteria but this generates a app.js file which is way too large. It takes too long to boot the application.

At the moment I import it as:

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

Full component here:

<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:'',
            },
          }
      }
};

Problem: When i build for production it generates an app.js file about 12Mb, only because the json file is really big. And when i view the source of the app.js I can in fact see the entire json object there. There is not much else in my application yet. I don't want to burden ALL users with this large file when it is not needed. How do i load this file only when needed? I am not having any luck with google either. How do i approach this?

Solved

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

Upvotes: 0

Views: 2214

Answers (1)

Pierre Said
Pierre Said

Reputation: 3820

I think you can achieve this with require import

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

Upvotes: 3

Related Questions