-
Notifications
You must be signed in to change notification settings - Fork 26.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Display bundle sizes after build #876
Comments
We could use a table formatter like https://github.com/Automattic/cli-table for this Any other ideas? |
This looks great. But this list could grow since we might have more pages. Here's my suggestion.
|
why not use https://github.com/FormidableLabs/webpack-dashboard? |
@arunoda why do we have to save space? A list would take as much space as the table - if we want to display it readable (sizes on the same tab etc.) For me, this is the perfect example how not to do it: @transcranial this dashboard is maybe helpful when running next in |
@ntwcklng I think he just means that the horizontal lines in the table aren't needed, they take up vertical space |
@ntwcklng this looks pretty nice. |
I like this. |
I'd love to see this, but why restrict the output to ~5pages? Btw. would it be possible to not only display the size, but also the size difference to the previous build? main.js 159kB (48.2kB) (+36.4kB) |
I not against of displaying ~10 pages. But I fear that'll be too much info. In this case, we mostly need to figure out our heavy pages. We need to limit upto few pages.
I don't think this is possible. We do this only for production build (it doesn't make sense for the dev build) and it's not (most of the time) possible to compare with the previous bundle. |
I don't know if its a good idea to include the path in the output: Should we just go with the basename for the pages? If someone wants to test it: https://github.com/ntwcklng/next.js/tree/log-build-size |
@arunoda but even comparing prouction build sizes(like create-react-app does as far as i know) would help a lot. With this you can easily detect if you accidentally included the whole e.g. 'firebase' or 'lodash'... without a history the size is just a number, but if you can notice: "since last build my main.js is now 60kb bigger than before you can actually wonder where this comes from and figure out if the increasing file size is reasonable." |
Btw, webpack2 supports options related to this topic. https://webpack.js.org/configuration/performance/ We disable Additionally, I wonder if this feature can be implemented by a webpack plugin. Ideally, I hope |
I'm +1 for adding it to friendly-errors-webpack-plugin. Created an issue for it to discuss. |
For anyone looking into preventing bundle size regression. I have been solving a part of the issue with size-limit running in the CI: .size-limit
|
@timneutkens Since geowarin/friendly-errors-webpack-plugin#54 was closed and this ticke too, is there any follow-up ticket about this feature? |
Also keen to know if there has been any updates to this feature. ParcelJS also has this and it's proved to be very useful. |
What does this ticket have to do with friendly errors? Anyways it looks like that got closed. I hate when tickets get linked to somewhere else and then closed. Seems like everyone liked this idea, why not merge it in? |
Should this be reopened @timneutkens ? |
This ticket died for seemingly no reason. You can set @timneutkens Would be great to either have an option to show webpack output during the build or have a hook for handling build errors so we can print these messages to the console (since webpack already made them pretty but they're stuck in an array). Edit: Was just looking over the build code. Perhaps this could be addressed by printing the errors (and warnings?) from webpack stats individually in if (jsonStats.errors.length > 0) {
console.log()
console.error.apply(console, jsonStats.errors)
console.log.apply(console, jsonStats.warnings)
// Don't include jsonStats in the error or it would just print it again when thrown
return reject(new Error('Soft errors from webpack'))
} |
Let's re-open it. |
- Shows warnings even when resolving, to facilitate hints set to 'warning' - Fixes vercel#876 : Set performance.hints to 'warning' or 'error' in next.config.js
- Shows warnings even when resolving, to facilitate hints set to 'warning' - Fixes #876 : Set performance.hints to 'warning' or 'error' in next.config.js
I made a small plugin to do show bundle size when running https://github.com/lucleray/next-size @timneutkens Do you think it has its place in nextjs or it's better to keep it as a separate package ? |
I think we should re-open this issue. I kind of don't want to add extra dependencies to Next.js at this point, so can we make it work with 0 dependencies? |
@timneutkens It should be possible 🙂 There's 3 dependencies : |
@lucleray sounds great to me, let's remove chalk for now and move those lines into the codebase with a comment referring back to the license |
Here's the PR : #5664 |
@lucleray solved this really well 😌 |
It would be great to see bundle sizes in the terminal after building a project, similar to the output of a create-react-app build.
The text was updated successfully, but these errors were encountered: