aholachek / bundle-wizard Goto Github PK

View Code? Open in Web Editor NEW

714.0 8.0 11.0 133.39 MB

Magically easy insight into the JavaScript loaded by a web app

JavaScript 88.72% HTML 2.41% SCSS 8.88%

performance bundle-analyzer javascript developer-tools

bundle-wizard's People

Contributors

Stargazers

Watchers

Forkers

8holon earn9 thedemodev harshcasper hydrosquall pyjava1984 codebyfredrik alexrogalskiy fairhopeweb gg-big-org marcin-piechaczek

bundle-wizard's Issues

bundle-wizard is great – thank you

Hey, just wanted to drop by and say thanks for creating bundle-wizard.

I’ve just recently learned about bundle-wizard and have used it a couple times, and it’s so great and convenient for analyzing sites. The attention to detail is incredible: I love how different modules are highlighted differently (makes it much easier to parse bundle contents than when looking at all-white source-map-explorer); and how clicking a concrete module shows its content (with syntax highlighting!). The captured “long task” warnings are also 💯.

So, thanks a lot for making this! bundle-wizard is just great.

Cert name invalid

Wondering why I'm getting this error from puppeteer that "CERT_NAME_IS_INVALID" when the src code for this script asks puppeteer to ignore HTTPS errors. Maybe it needs to be set to true explicitly?

Ref part of bundle-wizard code:

bundle-wizard/src/functions/downloadCoverage.js

Line 71 in 5c23213

ignoreHTTPSErrors

Here's an implementation where it's set to true: christopherwk210/site-scan@04e8822

My error:

[feat] Override some default puppeteer option

Hi !

first, thanks for this great tool !

I'm on a local site that is a bit slow and would like to wait a bit more, because I'm currently blocked by this

🧙‍  Welcome to bundle-wizard
✔ Which site would you like to analyze? · http://192.168.0.6:3000/courses-en-ligne
🤖  Loading http://192.168.0.6:3000/courses-en-ligne ...
⚠️  Unable to fetch website data

TimeoutError: Navigation timeout of 30000 ms exceeded
    at /Users/jpv/.npm/_npx/25331/lib/node_modules/puppeteer/lib/cjs/puppeteer/common/LifecycleWatcher.js:106:111 {
  name: 'TimeoutError'
}

I guess puppeteer is the source of my trouble here, I would like to have it wait longer.
You already added a useful --ignoreHTTPSerror flag, maybe adding a way to specifically configure the timeout would be good.
I guess more demands could arrive around puppeteer itself, so maybe giving a proxy option could help prevent this :)

Thanks

Cannot read property 'emulate' of undefined

TypeError: Cannot read property 'emulate' of undefined
at downloadCoverage (/Users/sibelius/.npm/_npx/4891/lib/node_modules/bundle-wizard/src/functions/downloadCoverage.js:93:16)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async main (/Users/sibelius/.npm/_npx/4891/lib/node_modules/bundle-wizard/src/index.js:29:28)

Chrome could not be killed

📋  Writing coverage file to disk...
Error: Chrome could not be killed Command failed: taskkill /pid 19896 /T /F
ERROR: The process "19896" not found.

    at C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\chrome-launcher\dist\chrome-launcher.js:282:28
    at new Promise (<anonymous>)
    at Launcher.kill (C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\chrome-launcher\dist\chrome-launcher.js:262:16)
    at Object.<anonymous> (C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\chrome-launcher\dist\chrome-launcher.js:54:29)
    at Generator.next (<anonymous>)
    at C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\chrome-launcher\dist\chrome-launcher.js:13:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\chrome-launcher\dist\chrome-launcher.js:9:12)
    at Object.kill (C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\chrome-launcher\dist\chrome-launcher.js:49:28)
    at downloadCoverage (C:\Users\Seonglae\AppData\Local\npm-cache\_npx\bb7f27a7b68f073a\node_modules\bundle-wizard\src\functions\downloadCoverage.js:163:30)     

⬇️   Downloading sourcemaps...
⚠️  No sourcemaps could be downloaded, analysis cannot proceed.

npx bundle-wizard google.com - this happens

UnhandledPromiseRejectionWarning: Error

System:

ubuntu 18.04.1 LTS
npm 6.14.4
node 10.19.0
bundle-wizard 1.2.0

Hi. Thanks for developing this great tool. I am getting these errors while running bundle-wizard and not sure why / how to fix it:

(node:18250) UnhandledPromiseRejectionWarning: Error: Protocol error (Network.getResponseBody): No data found for resource with given identifier
    at Promise (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/Connection.js:156:63)
    at new Promise (<anonymous>)
    at CDPSession.send (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/Connection.js:155:16)
    at _contentPromise._bodyLoadedPromise.then (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/HTTPResponse.js:58:53)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at HTTPResponse.<anonymous> (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/helper.js:116:19)
    at page.on.response (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/bundle-wizard/src/functions/downloadCoverage.js:108:14)
    at /home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:233
    at Array.map (<anonymous>)
    at Object.emit (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:217)
    at Page.emit (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/EventEmitter.js:72:22)
    at Page.networkManager.on (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/Page.js:180:84)
    at /home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:233
    at Array.map (<anonymous>)
    at Object.emit (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:217)
(node:18250) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:18250) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:18250) UnhandledPromiseRejectionWarning: Error: Protocol error (Network.getResponseBody): No data found for resource with given identifier
    at Promise (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/Connection.js:156:63)
    at new Promise (<anonymous>)
    at CDPSession.send (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/Connection.js:155:16)
    at _contentPromise._bodyLoadedPromise.then (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/HTTPResponse.js:58:53)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at HTTPResponse.<anonymous> (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/helper.js:116:19)
    at page.on.response (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/bundle-wizard/src/functions/downloadCoverage.js:108:14)
    at /home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:233
    at Array.map (<anonymous>)
    at Object.emit (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:217)
    at Page.emit (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/EventEmitter.js:72:22)
    at Page.networkManager.on (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/lib/Page.js:180:84)
    at /home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:233
    at Array.map (<anonymous>)
    at Object.emit (/home/thibauld/.nvm/versions/node/v10.19.0/lib/node_modules/puppeteer/node_modules/mitt/dist/mitt.js:1:217)
(node:18250) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

Does not support M1 Macs/Arm64

When trying to run via npx this fails silently.

Upon trying to globally install I am faced with this error

❯ npm i -g bundle-wizard puppeteer
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest
npm ERR! code 1
npm ERR! path /opt/homebrew/lib/node_modules/bundle-wizard/node_modules/puppeteer
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! The chromium binary is not available for arm64.
npm ERR! If you are on Ubuntu, you can install with:
npm ERR!
npm ERR!  sudo apt install chromium
npm ERR!
npm ERR!
npm ERR!  sudo apt install chromium-browser
npm ERR!
npm ERR! /opt/homebrew/lib/node_modules/bundle-wizard/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115
npm ERR!                     throw new Error();
npm ERR!                     ^
npm ERR!
npm ERR! Error
npm ERR!     at /opt/homebrew/lib/node_modules/bundle-wizard/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115:27
npm ERR!     at FSReqCallback.oncomplete (node:fs:198:21)

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/davidaghassi/.npm/_logs/2022-07-13T17_26_14_300Z-debug-0.log

Most likely puppeteer needs updating to support the newer version of chromium that has arm support

[Feature Request] Flag to generate report only

I tested this out and really liked the utility. I noticed while the local server was running I was asked if i wanted to dump the report (yes or no) interactively.

I was wondering if it would be possible to run this utility with a flag to simply "run and dump"?

bundle-wizard --no-open <url>, bundle-wizard --report-only <url> or something. Use-case is to simply run the tool primarily to generate the distributable content, perhaps even on CI. Requiring interactivity prevents this so far as I can tell.

Thanks for the tool!

Failed to generate source map visualization

$ npx bundle-wizard app.laserhub.com

Produces:

🧙‍  Welcome to bundle-wizard

🤖  Loading https://app.laserhub.com ...

🐢  Finishing up loading...

📋  Writing coverage file to disk...

⬇️   Downloading sourcemaps...

🖼️   Generating visualization...

⚠️  Failed to generate source map visualization
{
  bundles: [],
  errors: [
    {
      bundleName: '/Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/temp/downloads/4558822.js',
      code: 'Unknown',
      message: '"version" is a required argument.',
      error: Error: "version" is a required argument.
          at Object.getArg (/Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/node_modules/source-map/lib/util.js:24:11)
          at /Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/node_modules/source-map/lib/source-map-consumer.js:207:28
          at async loadSourceMap (/Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/node_modules/source-map-explorer/dist/explore.js:45:16)
          at async Object.exploreBundle (/Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/node_modules/source-map-explorer/dist/explore.js:29:25)
          at async Promise.all (index 0)
          at async explore (/Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/node_modules/source-map-explorer/dist/api.js:31:19)
          at async visualizeBundles (/Users/max/.npm/_npx/14980/lib/node_modules/bundle-wizard/src/functions/visualizeBundles.js:21:18)
    }
  ]
}

node -v -> v14.4.0
Mac OS Catalina: 10.15.6

[Feature Request] Ability to specify port

Would you be open to accepting PRs to specify the port manually? (e.g. --port) I don't think get-port is resolving correctly on my machine.

I'll start a next.js server on port 3000 and bundle-wizard starts on port 3000 too (i didn't know that was possible!)

btw, love the project!

"No valid exports main found"

Any idea about this? Not sure what the root of the issue is / how to debug.

 ~  npx bundle-wizard https://mitchinson.dev
No valid exports main found for '/Users/bmitchinson/.npm/_npx/2631/lib/node_modules/bundle-wizard/node_modules/uuid'
 ~  npx bundle-wizard mitchinson.dev
No valid exports main found for '/Users/bmitchinson/.npm/_npx/2806/lib/node_modules/bundle-wizard/node_modules/uuid'

Authentication Support

My application is behind authentication - on initial load the user will get redirected to login through a separate site.
If I'm reading the docs right that would prevent this tool from working on my app.
Support for this scenario to handle the login, then analyze the site after an authenticated load would be great.

[feat] export a visualization that works without a server

Hi!
Thank you for the option to save a visualization of a test, it helps sharing and having an history of a project to further compare.

The current exported index.html file can not be simply dragged and dropped to a browser, we have to serve it from an http server in order to see anything. Like webpack-bundle-analyzer, it would be easier to not need a server at all.
There is paths problems that can be corrected manually from the exported HTML :

- <script src="/client.a5432830.js">
+ <script src="./client.a5432830.js">

but after this there is more serious issues, the first one coming from Fetching a local file
client.a5432830.js:1080 Fetch API cannot load file:///…/dist/treeData.json. URL scheme must be "http" or "https" for CORS request.

The way webpack-bundle-analyzer does it is to put all JS, JSON and even images directly into the HTML, saving the full visualization into one file.
Would it be possible to do it this way ?

What does "coverage" mean?

The report summary provides the size and coverage of bundles. However, I don't know what coverage means and the significance of it. Where can I find resources to learn about it?

Error: connect ECONNREFUSED ::1:1197

Hey! About a few seconds after executing the command npx bundle-wizard reddit.com, I receive the following error message:

PS C:\Windows\System32> npx bundle-wizard reddit.com

🧙‍  Welcome to bundle-wizard

🤖  Loading https://reddit.com ...


⚠️  Unable to fetch website data

Error: connect ECONNREFUSED ::1:1197
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
  errno: -4078,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '::1',
  port: 1197
}

Am I doing something wrong? I'm getting the same result with all other URLs.

PS C:\Windows\System32> node -v
v18.8.0

Potential Bugs and Anti-Patterns in the Codebase

Description

I ran DeepSource Static Code Analysis upon the Project, the results for which are available here.

The Static Code Analysis Tool found potential bugs and anti-patterns in the Code, that can be detrimental at a later point of time with respect to the Project. DeepSource helps you to automatically find and fix issues in your code during code reviews. This tool looks for anti-patterns, bug risks, performance problems, and raises issues.

Some of the notable issues are:

Missing Key Prop here
Unused Variables here
Empty Block Statements here

There are plenty of other issues in relation to Bug Discovery and Anti-Patterns which you would be interested to take a look at.

Add possibility to disable certificate verification

Hello ! 👋

I found your tool very useful but when I wanted to try it on a development website on my machine I was greeted the error I pasted at the end of the issue.

Thank you in advance (:

Terminal log

❯ npx bundle-wizard

🧙‍  Welcome to bundle-wizard

✔ Which site would you like to analyze? · https://localhost:4200


🤖  Recording page load info for https://localhost:4200 ...


❌  Unable to fetch website data

Error: net::ERR_CERT_INVALID at https://localhost:4200
    at navigate (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/FrameManager.js:120:37)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async FrameManager.navigateFrame (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/FrameManager.js:94:17)
    at async Frame.goto (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/FrameManager.js:406:12)
    at async Page.goto (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/Page.js:672:12)
    at async downloadCoverage (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/src/download-coverage.js:106:3)
    at async main (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/src/index.js:27:28)
  -- ASYNC --
    at Frame.<anonymous> (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/helper.js:111:15)
    at Page.goto (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/Page.js:672:49)
    at Page.<anonymous> (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/node_modules/puppeteer-core/lib/helper.js:112:23)
    at downloadCoverage (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/src/download-coverage.js:106:14)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async main (/home/matthieu/.npm/_npx/16021/lib/node_modules/bundle-wizard/src/index.js:27:28)