[klamkaodokna]

taki oto fragment kodu bardzo mocno wydluza mi czas kompilowania apki (a nawet czasem powoduje crashe) przy kazdej zmianie w kodzie, NAWET jezeli komponent, w ktorym on sie znajduje nie jest nigdzie renderowany a jedynie importowany. w tym katalogu jest ~2700 plikow json o lacznej wadze ~70mb. jakis pomysl jak temu zaradzic? potrzebuje sobie poradzic z tym, bo wszystkie te pliki moga byc potrzebne ale zazwyczaj 99% z nich nie jest i nie wiem jak rozwiazac problem importowania ich. chatgpt nie bardzo pomaga w tej kwestii

useEffect(() => {
import(./withsblimps/nodes/${nodeNumber}.json).then(module => setNode(module))
}, [nodeNumber])
lub

useEffect(() => {
const loadNode = async () => {
const module = await import(./withsblimps/nodes/${nodeNumber}.json);
setNode(module);
};

loadNode();
}, [nodeNumber]);
#react #javascript #naukaprogramowania

[Rufurege1]

Co to za reactowe gówno? xD

[klamkaodokna]

@Rufurege1: takie, jakie mi akurat potrzebne. nie pytaj mnie o jakies szczegoly bo nie jestem zawodowym programista

[lufa08]

@klamkaodokna:
Zrób to od strony serwera. Wykonaj requset z id danego jsona w body do funkcji na backendzie. Łatwo to osiągniesz używając nextjs. Później w razie potrzeby możesz wygenerować statyczne podstrony dla każdego jsona (nie wiem co przedstawiają te dane, dlatego ciężko tu pomóc)
Jak dane są poufne, to zabezpiecz endpoint. Najlepiej secret key'em, który będziesz przechowował w .env
Jakbyś potrzebował pomocy to napisz, coś wykminimy.

[klamkaodokna]

@lufa08: ok, dziekuje, postaram sie jakos krok po kroku zrozumiec co napisales bo nie bardzo nadazam za relacja miedzy klientem a serwerem przy takich reactowych apkach odpalanych na localhoscie (dlatego tez caly czas nie rozumiem, dlaczego te same console.logi wywolywane sa w konsoli jeden pod drugim pochodzace od klienta i serwera)

a poki co, moglbys mi w skrocie objasnic dlaczego ta apka sie tak ciezko laduje przy samym imporcie komponentu z

[lufa08]

@klamkaodokna: Przy każdym re-renderze wszystkie te jsony się importują ponownie przez co siłą rzeczy apka musi nad nimi pomyśleć.

[lufa08]

@klamkaodokna: Chcesz te dane z jsonów wyświetlać na osobnej podstronie dla każdego z nich?

[klamkaodokna]

@lufa08: nie, dlatego ma byc dynamiczny import, ze zwykle 99% z nich nie bedzie zbytnio potrzebnych. a moje zdziwienie bierze sie stad, ze skoro komponent nie jest renderowany a jedynie importowany to ten useeffect nie powinien sie w ogole wykonywac ale widocznie tak to nie dziala

[klamkaodokna]

jesli odkomentuje tego useeffecta tworzy sie taki plik zawierajacy obiekt z tymi jsonami widoczny na screenie oraz majacy na koncu taki kod:

function webpackAsyncContext(req) {
	if(!__webpack_require__.o(map, req)) {
	return Promise.resolve().then(() => {
	var e = new Error("Cannot find module '" + req + "'");
	e.code = 'MODULE_NOT_FOUND';
	throw e;
	});
	}

	var ids = map[req], id = ids[0];
	return Promise.all(ids.slice(1).map(__webpack_require__.e)).then(() => {
	return __webpack_require__.t(id, 3 | 16);
	});
}
webpackAsyncContext.keys = ()

[klamkaodokna]

da sie cos zmienic w ustawieniach webpacka, zeby inaczej sie obchodzil z tymi jsonami?

[AntyKuc]

@klamkaodokna: Czy to jest jakaś lista która zawiera komponenty i każdy ten komponent ma useEffecta importującego JSONa?

[klamkaodokna]

@AntyKuc: nie, to jeden komponent

[AntyKuc]

@klamkaodokna: A myślałeś żeby wrzucić te JSONy do folderu z assetami (obrazki, ikony itd.) tak żeby nie wchodziły w skład bundla jsowego?

[klamkaodokna]

@AntyKuc: nie myslalem bo sie nie znam na tym XD ale co to za folder?

[AntyKuc]

@klamkaodokna: Używasz jakiegoś CLI do reacta (create-react-app, vite)?

[klamkaodokna]

create-react-app

@AntyKuc: tego

[AntyKuc]

@klamkaodokna: https://create-react-app.dev/docs/using-the-public-folder/

Wrzuć do tego folderu te JSONy, i zmień tego useEffecta żeby zaciągał fetchem zamiast importem.


useEffect(() => {
const loadNode = async () => {
const response = await fetch(${process.env.PUBLIC_URL}/${nodeNumber}.json)
const json = await response.json()
setNode(json)
}
loadNode()
}, [nodeNumber])