Client build includes server-only libraries
Pikachews opened this issue · 4 comments
I noticed that when I build a project including this library, the resulting client build includes a bunch of server libraries that bloat up the size.
For comparison, here's the output of a clean create-next-app output:
Page Size First Load JS
┌ λ / 7.08 kB 69.8 kB
├ /_app 4.67 kB 62.7 kB
└ λ /404 3.25 kB 66 kB
+ First Load JS shared by all 62.7 kB
├ static/pages/_app.js 4.67 kB
├ chunks/fa0d1538d4ec6ce8974fb6c1dd3701ae265e0f01.b01e96.js 10.5 kB
├ chunks/framework.c8d289.js 40.3 kB
├ runtime/main.71488f.js 6.54 kB
└ runtime/webpack.c21266.js 746 B
After adding this library, here's the resulting output size:
Page Size First Load JS
┌ λ / 7.08 kB 211 kB
├ /_app 145 kB 203 kB
└ λ /404 3.25 kB 207 kB
+ First Load JS shared by all 203 kB
├ static/pages/_app.js 145 kB
├ chunks/e3159650bc6aa89eb4037de31e151c2fac446e71.c2e7b8.js 10.7 kB
├ chunks/framework.c8d289.js 40.3 kB
├ runtime/main.92af30.js 6.28 kB
└ runtime/webpack.c21266.js 746 B
Here's an analysis of the client output with this library:
It seems all of the extraneous libraries stem from the importing of cookies.
If I dynamically import this library, the size goes back down to something reasonable (the analysis diagram still ends up including the extraneous libraries, although they're not loaded):
ServerCookies = (await import ('cookies')).default as any
cookies = new NodeCookiesWrapper(new ServerCookies(req, res));
Page Size First Load JS
┌ λ / 7.08 kB 72.2 kB
├ /_app 6.63 kB 65.1 kB
└ λ /404 3.25 kB 68.3 kB
+ First Load JS shared by all 65.1 kB
├ static/pages/_app.js 6.63 kB
├ chunks/971fcca33ddeb824ee6f37f20ba5b5cb1789aea2.c2e7b8.js 10.7 kB
├ chunks/framework.c8d289.js 40.3 kB
├ runtime/main.92af30.js 6.28 kB
└ runtime/webpack.0b6f2e.js 1.18 kB
This is probably not the ideal solution, but just throwing that out there.
Looks like the proper solution is one of these methods: https://arunoda.me/blog/ssr-and-server-only-modules (though #2 wouldnt apply in this case).
Definitely, thanks for spotting this! I think the proper fix these days is using the
if (typeof window === "undefined") {
ServerCookies = require('cookies')
}trick. Next.js configures webpack to drop that code for client-side builds.
...thought I, not knowing that this does not apply to modules from node_modules. I'll use the evil eval hack then.
🎉 This issue has been resolved in version 1.1.3 🎉
The release is available on:
Your semantic-release bot 📦🚀