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

Question

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;
        });
    }

You can serve it as a static file, and then load it using xhr. — Shuvojit
– Shuvojit, Commented Nov 4, 2019 at 10:52

Pierre Said · Accepted Answer · 2019-11-04 11:34:31Z

3

I think you can achieve this with ~~require~~ import

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

edited Nov 4, 2019 at 11:34

answered Nov 4, 2019 at 11:04

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rule Over a year ago

I tried this but it doesn't change the size of myapp file. It does load the file though

Pierre Said Over a year ago

Ah I see . You can try with import instead

Rule Over a year ago

For future reference, i changed it to this:

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

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related