Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: adding bundle analyzer options #11066

Closed
wants to merge 2 commits into from
Closed

feat: adding bundle analyzer options #11066

wants to merge 2 commits into from

Conversation

andrescabana86
Copy link

@andrescabana86 andrescabana86 commented Mar 14, 2020 •
edited
Loading

Feature Request:
The previous version of bundle analyzer had the configuration at the nextConfig object.
Adding this to the initializer to accept custom configuration for webpack-bundle-analyzer

The bundle analyzer will accept custom options. This is an example:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
    analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
    analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
    bundleAnalyzerConfig: {
      server: {
        analyzerMode: 'static',
        defaultSizes: 'stat',
        reportFilename: `bundle-report/server-stats.html`,
        generateStatsFile: true,
        statsFilename: `bundle-report/server-stats.json`,
        statsOptions: { exclude: /node_modules/ },
        openAnalyzer: true,
      },
      browser: {
        analyzerMode: 'static',
        defaultSizes: 'stat',
        reportFilename: `bundle-report/client-stats.html`,
        generateStatsFile: true,
        statsFilename: `bundle-report/client-stats.json`,
        statsOptions: { exclude: /node_modules/ },
        openAnalyzer: true,
      },
    },
  })

@andrescabana86
feat: adding bundle analyzer options
861d5e3 
Feature Request:
The previous version of bundle analyzer had the configuration at the nextConfig object.
Adding this to the initializer to accept custom configuration for webpack-bundle-analyzer
@ijjk
Copy link
Member

ijjk commented Mar 14, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary andrescabana86/next.js patch-1 Change
buildDuration 10.1s 10.3s ⚠️ +150ms
nodeModulesSize 56.6 MB 56.6 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary andrescabana86/next.js patch-1 Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB ✓
Overall change 26.2 kB 26.2 kB ✓
Client Pages
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary andrescabana86/next.js patch-1 Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary andrescabana86/next.js patch-1 Change
index.html gzip 916 B 916 B ✓
link.html gzip 925 B 925 B ✓
withRouter.html gzip 913 B 913 B ✓
Overall change 2.75 kB 2.75 kB ✓
Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary andrescabana86/next.js patch-1 Change
buildDuration 11.2s 11.2s ⚠️ +42ms
nodeModulesSize 56.6 MB 56.6 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary andrescabana86/next.js patch-1 Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB ✓
Overall change 26.2 kB 26.2 kB ✓
Client Pages
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary andrescabana86/next.js patch-1 Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary andrescabana86/next.js patch-1 Change
_error.js gzip 293 kB 293 kB -104 B
404.html gzip 1.32 kB 1.32 kB ✓
hooks.html gzip 957 B 957 B ✓
index.js gzip 293 kB 294 kB ⚠️ +385 B
link.js gzip 301 kB 301 kB ⚠️ +344 B
routerDirect.js gzip 300 kB 300 kB -67 B
withRouter.js gzip 300 kB 300 kB -235 B
Overall change 1.49 MB 1.49 MB ⚠️ +323 B

@ijjk
Copy link
Member

ijjk commented Mar 14, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary andrescabana86/next.js patch-1 Change
buildDuration 9.5s 9.6s ⚠️ +96ms
nodeModulesSize 56.6 MB 56.6 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary andrescabana86/next.js patch-1 Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB ✓
Overall change 26.2 kB 26.2 kB ✓
Client Pages
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary andrescabana86/next.js patch-1 Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary andrescabana86/next.js patch-1 Change
index.html gzip 916 B 916 B ✓
link.html gzip 925 B 925 B ✓
withRouter.html gzip 913 B 913 B ✓
Overall change 2.75 kB 2.75 kB ✓
Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary andrescabana86/next.js patch-1 Change
buildDuration 10s 10.1s ⚠️ +13ms
nodeModulesSize 56.6 MB 56.6 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary andrescabana86/next.js patch-1 Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB ✓
Overall change 26.2 kB 26.2 kB ✓
Client Pages
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.96 kB 2.96 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.38 kB 7.38 kB ✓
Client Pages Modern
zeit/next.js canary andrescabana86/next.js patch-1 Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.06 kB 2.06 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.26 kB 5.26 kB ✓
Client Build Manifests
zeit/next.js canary andrescabana86/next.js patch-1 Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary andrescabana86/next.js patch-1 Change
_error.js gzip 293 kB 293 kB ⚠️ +5 B
404.html gzip 1.32 kB 1.32 kB ✓
hooks.html gzip 957 B 957 B ✓
index.js gzip 294 kB 293 kB -278 B
link.js gzip 301 kB 301 kB ⚠️ +330 B
routerDirect.js gzip 300 kB 300 kB ⚠️ +87 B
withRouter.js gzip 299 kB 300 kB ⚠️ +576 B
Overall change 1.49 MB 1.49 MB ⚠️ +720 B

@timneutkens
Copy link
Member

This was a conscious choice to not allow configuring the plugin as we'll likely change the bundle analyzer soon to be more geared towards Next.js output. If we were to allow configuration now that change would be breaking without a good reason.

@jtthackery jtthackery mentioned this pull request Mar 14, 2020
Closed
@andrescabana86
Copy link
Author

This was a conscious choice to not allow configuring the plugin as we'll likely change the bundle analyzer soon to be more geared towards Next.js output. If we were to allow configuration now that change would be breaking without a good reason.

agreed with that, and I will close this PR and wait for a better solution

In the mean time, @timneutkens... could you please tell me how I can implement this in my project?

Screen Shot 2020-03-14 at 21 55 13

I tried following this documentation without success. More information about how to implement it in a github private project would be really helpful

kind regards

@timneutkens
Copy link
Member

timneutkens commented Mar 15, 2020 •
edited
Loading

In the mean time, @timneutkens... could you please tell me how I can implement this in my project?

It's custom infrastructure that is probably not super useful in your own application as it's used to track Next.js internals. @ijjk can provide some pointers I guess.

agreed with that, and I will close this PR and wait for a better solution

I'll close the PR 👍

@cdaringe
Copy link

cdaringe commented May 29, 2021 •
edited
Loading

I wanted to return to this thread to share what we did to help improve our page developers' experience, as it pertains to studying bundle stats. We can now:

  • turn on full stats.json during app compilation
  • post compile, run each page thru a puppeteer script, and capture all downloaded assets
  • reduce webpack's full stats.json to just those assets/modules/chunks consumed by a page, recorded in the prior step
    • in terms of a function signature, we more or less do: (stats: Webpack.Stats.ToJSONOutput, capturedTraffic: CapturedTraffic) => Webpack.Stats.ToJSONOutput, where the output is narrowed to just one page of interest

Now, individual page developers can use http://webpack.github.io/analyse and & https://chrisbateman.github.io/webpack-visualizer/, and be able to take corrective action. Without this ability to reduce stats.json,

  • it's difficult analyze a page's JS graph, as the rest of the app's chunks create a high noise:signal ratio in forensic tools, like those mentioned above
  • it's difficult to analyze nearly any stats at all, as in our case the stats.json file is 400MB+ (probably ways to tune that down), and the analyse web-app doesn't do super hot with giant datas. i may look into optimizations over there

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@andrescabana86 @ijjk @timneutkens @cdaringe