I currently load a component when you go to the url /hsk1game. I have 6 urls hsk1game hsk2game etc. My single component loads the different files based on the url. I import my files as such:
import Hsk1Data from '../HskFiles/hsk1.json';
import Hsk2Data from '../HskFiles/hsk2.json';
import Hsk3Data from '../HskFiles/hsk3.json';
import Hsk4Data from '../HskFiles/hsk4.json';
import Hsk5Data from '../HskFiles/hsk5.json';
import Hsk6Data from '../HskFiles/hsk6.json';
I currently put the files into an array and pull out the correct file according to the current url. This works fine but I feel it might be expensive. I can put the data into a database and then only make a single request instead of importing them all. But I was wondering if there's a better way with files?
Thank you
So it depends on how much information is in those JSON files, people make a huge huff about performance when the reality is unless you are working with LOTS of data then its really negligible.
If your JSON files are massive, i'd recommend using the second method you described and returning that information via a request, because it won't be required by the bundler and so will reduce the amount of data that needs to be transferred when the page first loads.
If the JSON files are reasonably small, there is nothing wrong with just importing them.
Related
So this is my problem:
I need to import a JSON file into a TypeScript class. I can just do this with:
import * as data from 'data.json';
Which works fine. Only the JSON file is changing. And when I import it like this, it caches the JSON file and won't show the changes accurately.
I've googled this and only found solutions that involve Ajax calls, node fs or node file-loader. None of these are possible with my setup.
So does anyone know of a way how to re-import JSON files? It doesn't even have to be when they change, but maybe on some click event or so. Or prevent caching from imports in the first place.
Also, I am using webpack...
how can I "block" imports of a javascript file?
ex: if the file is:
const file = require('./file');
or
import file from './file';
would it be possible to make sure that if there were any of these two forms of import, the file would give an error or would it just not work?
ps: i still want to be able to export
You could have a custom made hook where you could have access to all of the file content and upon that to decide to strip or to load the file but the logic could be quite tangled and complicated if you want to create and common approach. You could read more about custom hooks and decide for yourself if this approach is suitable for you.
Sorry if I'm doing something wrong, I'm just starting with Svelte. I looked around on the web and couldn't find anything
I have a large hard coded data array made of objects that I want to keep in its own file while being able to access the data in app.svelte. I'm trying to keep my app.svelte as simple as possible. I tried export const data=[{data:"mydata"}] along with import {data} from "./data.svelte" but the export keyword means it expects the data to be sent over to data.svelte file, not the other way around. I really have no clue how to acheive this in Svelte. The data could also be json in a json file, as long as it is imported in my app.
Thank you for your help
.svelte files should be reserverd for components only, you can add your data in a regular javascript file instead
in data.js
export const data=[{data:"mydata"}]
in App.svelte
<script>
import { data } from './data.js'
</script>
This is possible with json files as well, but it will require an extra step as svelte does not by default understand json files. Depending on what bundler you use, you will have to add plugin, for Rollup this is https://www.npmjs.com/package/#rollup/plugin-json
I'm trying to load all the "modules" contained in a particular directory. All of these can be individually loaded like this:
import 'dir1/plugins/one'
import 'dir1/plugins/two'
import 'dir1/plugins/three'
I've tried using something that sounded close to what I wanted to do:
require.context('dir1/plugins', true, /index\.js/)
This seems to load the files, as I can see their contents in the entry point, but I'm unable to use their functions later in my code.
I'm thinking I'm using require.context incorrectly, or it's doing something totally different as I'm understanding it. My goal is to not be forced to include every single plugin individually, as I want to load them all without exception.
Any hints?
Does using the JavaScript import statement for images, css and others defeat the purpose of import statement which was designed to import only the JS Modules ?
Of course, for now it gets transpiled to ES5 require using webpack. But that same question comes up again. Is it incorrect to use import statement to import images or css or files ?
EDIT:
I like the idea of controlling imports that we can control the assets on build time in such a clean way - The idea that I use the image path to import the image, and
on different environments the image path would contain different values - url or path
this image can be compressed on build time
the JS module importing this image can contain the image dimensions through a custom loader
assets dependency tree is maintained at one place and un-imported items gets chucked away automatically
rebuild time is fast - DX(developer experience) would be good
I guess, this is much better than using any templating, using placeholders in the JS files to inject URLs or paths based on environment during pre-build (webpack).
But using the import statement feels not right to do so in terms of principle or semantics.
This is from Mozilla Developer Network:
The import statement is used to import functions that have been exported from an external module, another script, etc.
From everything I've read on MDN and other sources its purpose is to make a module/script methods and properties available within the current scope it's being imported into.