travis-r6s / gridsome-plugin-flexsearch

Add lightning fast search to Gridsome with FlexSearch

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Only load flexsearch.json on Search Results page

jxlstudio opened this issue · comments

My flexsearch.json file is over 400kb, and it loads on every page of my website. Is there a way for me to have it only load on a single designated page?

Not at the moment, no - however it won't be that hard to add it as a config option. I'll take a look at it tonight...

Incidentally, I had a large site which generated a flexsearch.json file of over 20mb - however compressing this with the Brotli plugin reduced it to about 150kb - might be worth checking out if you have a host which supports br encoding...

@thetre97 I am hosting on Netlify currently, but I am not sure if/how I could/would add that encoding.

@jxlstudio Ah, unfortunately I don't think Netlify supports serving that encoding yet.
Zeit Now or Cloudflare Workers Sites does if you are interested.

I have to launch the site by Thursday, probably won't have the time to set it up before then.

If we can figure out the config for the vanilla flexsearch-gridsome plugin it would be awesome. I just have one page that search results are used on.

I have just pushed some updates to the develop branch - would you be able to try the updates out in your project? yarn add thetre97/gridsome-plugin-flexsearch#develop

I have added a couple of options - chunked mode, and autoFetch.

...
options: {
  chunk: true, # Boolean or Number
  autoFetch: '/search', # Boolean, String, or Array of Strings
  ...

Chunk mode will split up the flexsearch index and docs data, to reduce the flexseach.json filesize.
It will split the docs in to arrays of 2000 objects if true, or a custom value i.e. chunk: 1000.

AutoFetch will usually automatically fetch necessary data and setup the flexsearch clientside. However you can specify false to do this yourself (using this.$search.import({ ...) or if you specify a path (or array of paths) i.e. autoFetch: '/search', then it will only fetch & load the data when it hits that route/s.

Let me know if it works, and if there are any issues.

No errors and everything seems to be working fine.

Page speed score went from 86 to 90.

Thanks! Are you going to push this to master?

Great - just pushed v0.1.15.

AutoFetch will usually automatically fetch necessary data and setup the flexsearch clientside. However you can specify false to do this yourself (using this.$search.import({ ...) or if you specify a path (or array of paths) i.e. autoFetch: '/search', then it will only fetch & load the data when it hits that route/s.

Let me know if it works, and if there are any issues.

Hi, first, thank you for a great plugin. It works great!

Could you please give a more explicit example of manually setting up flexsearch? I would like to completely skip loading the plug-in (and the data) but only for specific browsers (e.g., IE).

Thank you.