2x size of the initial bundle load

[mohitgupta1918]

I am using next.js with express server.

I have created a single page(pages/index.js) that has a extremely long text( 9 Mb size ).

when i am running the application
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}

after running npm run build, npm run start
The browser is loading a 18.5 Mb bundle.

image

after running the webpack-bundle-analyser I have identified
{
"name": "dist/pages/index.js",
"size": 9771946,
"chunks": [],
"chunkNames": [],
"emitted": true,
"isOverSizeLimit": true
},
{
"name": "bundles/pages/index.json",
"size": 9771839,
"chunks": [],
"chunkNames": [],
"emitted": true,
"isOverSizeLimit": true
},
Repo link :
Can someone explain ?

[bringking]

@mohitgupta1918 this PR should address this - #1611. Essentially, next 2.0 inlines the current route bundle and component bundle into the __NEXT_DATA__ object so it can be bootstrapped by the app on the client, which results in basically doubling the size of your HTML document since it contains the rendered HTML + strings, and the JSON representation of your component. @arunoda's PR moves the components into JS bundles that are loaded as plain script tags that are async. Does that make sense?

[arunoda]

Anyway, @mohitgupta1918 18MB is so wrong. I assume you are sending a lot of data via getInitialProps.

[arunoda]

Wow. That component is 9MB :)
Don't load it as a component. Use a HTTP API or similar to load chunk by chunk. I hope no one is going to read that 9MB at once.

Anyway, #1611 should fix double loading issue.