page large download of data only in development
Answered
B33fb0n3 posted this in #help-forum
B33fb0n3OP
Hey, I currently have a page, that looks like this: https://paste.gg/p/B33fb0n3/2d0acbb7d0804b84a3df24d5be0af0fd
The data returned is nothing more than this: https://paste.gg/p/B33fb0n3/fcfde855bc654db1beabf9a0f46c8d84
When I access the page now in development it loads like 2 seconds. The network tab says this: https://ibb.co/rsf5mGJ
You can see, that 17.7mb will be downloaded. But there isn't anything else on my "page.js".
When I build my project, the page is loaded instantly.
Can I somewhere see what will be downloaded?
How to reduce the size (and the time)?
The data returned is nothing more than this: https://paste.gg/p/B33fb0n3/fcfde855bc654db1beabf9a0f46c8d84
When I access the page now in development it loads like 2 seconds. The network tab says this: https://ibb.co/rsf5mGJ
You can see, that 17.7mb will be downloaded. But there isn't anything else on my "page.js".
When I build my project, the page is loaded instantly.
Can I somewhere see what will be downloaded?
How to reduce the size (and the time)?
Answered by joulev
Does the page have some big libraries running on the client side (like a complex editor, for example)? Because 720kB is a large number
29 Replies
B33fb0n3OP
bump
B33fb0n3OP
bump
B33fb0n3OP
bump
B33fb0n3OP
bump
can you make a reproduction repository?
@B33fb0n3 Hey, I currently have a page, that looks like this: https://paste.gg/p/B33fb0n3/2d0acbb7d0804b84a3df24d5be0af0fd
The data returned is nothing more than this: https://paste.gg/p/B33fb0n3/fcfde855bc654db1beabf9a0f46c8d84
When I access the page now in development it loads like 2 seconds. The network tab says this: https://ibb.co/rsf5mGJ
You can see, that 17.7mb will be downloaded. But there isn't anything else on my "page.js".
When I build my project, the page is loaded instantly.
Can I somewhere see what will be downloaded?
How to reduce the size (and the time)?
also clicking on that row will show you the content that you've downloaded
which is that 17MB worth of data
B33fb0n3OP
yea, I can click on it, but it seems like it's not readable. I can't make a reproduction of it. When I deploy it (production) the page loads in ms. So the problem somehow relates to dev mode 🤔 @joulev
In production the pages are prefetched for instantaneous load time, so the ms loading time doesn’t mean it’s guaranteed you’re not sending 17MB (or a minified version of it) to users
In any case, do make a reproduction repository so I can try this myself
@joulev In any case, do make a reproduction repository so I can try this myself
B33fb0n3OP
I really want to do that, but the project is to big to cut out the specific parts. I don't even know what the problem is, which is why I can't present the problem in isolation. Maybe it is possible that you are accessing my PC 🤔
@B33fb0n3 oh, that sounds horrible... 😦
You should check the network tab to see if there are any abnormally large requests in prod mode. If there are none, I suppose this is just a dev mode bug (or it could be a feature helping to make dev mode HMR faster, who knows)
If it’s just a dev mode bug, we can safely ignore it. If it affects prod too then that’s very bad news
@B33fb0n3 I really want to do that, but the project is to big to cut out the specific parts. I don't even know what the problem is, which is why I can't present the problem in isolation. Maybe it is possible that you are accessing my PC 🤔
Well but you know full well I can’t help much with a problem I can’t reproduce 
@joulev You should check the network tab to see if there are any abnormally large requests in prod mode. If there are none, I suppose this is just a dev mode bug (or it could be a feature helping to make dev mode HMR faster, who knows)
B33fb0n3OP
yea, I just checked the network tab in devmode and the only large thing that I see is this 17 MB page stuff. I also checked the production network tab and couldn't find any request, that is more than 1 MB large. I also checked the output when generating the deployment and also seems to be "normal". So sounds like a devmode bug...
@B33fb0n3 yea, I just checked the network tab in devmode and the only large thing that I see is this 17 MB page stuff. I also checked the production network tab and couldn't find any request, that is more than 1 MB large. I also checked the output when generating the deployment and also seems to be "normal". So sounds like a devmode bug...
Does the page have some big libraries running on the client side (like a complex editor, for example)? Because 720kB is a large number
Answer
@joulev Does the page have some big libraries running on the client side (like a complex editor, for example)? Because 720kB *is* a large number
B33fb0n3OP
You are right. A 3D object is displayed and this 3D object is loaded on the client side and to load this object I use large libraries. It is of course a pity that it is then "relatively difficult", but at least the problem is identified. Thank you ^^
@B33fb0n3 You are right. A 3D object is displayed and this 3D object is loaded on the client side and to load this object I use large libraries. It is of course a pity that it is then "relatively difficult", but at least the problem is identified. Thank you ^^
Oh yeah then it’s a dev mode only thing, no need to be too worried
@joulev Oh yeah then it’s a dev mode only thing, no need to be too worried
B33fb0n3OP
why? The libraries are also loaded in Production. And the 3D objects are also processed from the libraries to the client in Production...
@B33fb0n3 why? The libraries are also loaded in Production. And the 3D objects are also processed from the libraries to the client in Production...
I meant that the 17MB abnormality is a dev mode only thing. The 720kB thing is expected since you load large libraries + some 3d shenanigans.
You certainly can optimise that 720kB number by lazy loading, but if it’s your intention to load those heavy libraries, then 720kB final load is expected and nothing wrong with that.
B33fb0n3OP
Ah ok. I tried using suspense boundaries like this, but it seems like that they don't trigger xD
Well I can’t comment because I don’t know anything about whatever library this is and what you are doing here haha
B33fb0n3OP
A possible thing could be to not import it like this:
More like this, I guess:
import ThreeDElement from "@/app/components/customerComponents/ThreeDElement";More like this, I guess:
const ThreeDElement = dynamic(() => import('@/app/components/customerComponents/ThreeDElement'), { ssr: false })@B33fb0n3 A possible thing could be to not import it like this:
jsx
import ThreeDElement from "@/app/components/customerComponents/ThreeDElement";
More like this, I guess:
jsx
const ThreeDElement = dynamic(() => import('@/app/components/customerComponents/ThreeDElement'), { ssr: false })
Yes that’s a good idea to try
B33fb0n3OP
ok, will do that. Thanks a lot â¤ï¸