Comments (4)
Hey @aholachek, I tried it out and it worked really well, thanks for adding this! This --interact
mode also allows me to interact with the site to get coverage on code paths that are behind interaction handlers 👍
I'm really excited about this tool, it makes bundle analysis and optimization so much more actionable.
Here's some feedback from my tests:
-
Launching in mobile mode looked somewhat broken in a browser window that was something like 800x600 in size (my app's poor responsive layout also contributed to this) -- there's no functional issue here, it was just visually jarring.
-
The
--desktop
size seems far too small, I'm using breakpoints up through 1920px and would generally like to test at least a typical mobile, tablet, and large desktop size -
I'd be interested some level of support for use in a CI pipeline, for example to bring visibility to code coverage changes in routes affected by a given PR.
An idea here would be to decouple the core logic from the CLI and make it available as a node module, and add some pluggable script support so I could provide a custom script to automate handling auth and tell the tool when to proceed. Then in a CI pipeline I could write a script that detects routes likely impacted by a PR, run this tool, get some structured results data and report some key values.
Anyway, that's all general feedback. The change here does indeed address the auth scenario - thanks!
from bundle-wizard.
Hi, thanks for flagging this. I'm working on an option to spin up a non-headless version of chrome which will let you do whatever you want to get the app in the right state (e.g. log in as a certain user), and then when you're ready, reload the current page and begin recording performance data.
I hope to publish a beta version with this option later today or tomorrow, I'll comment here when it's ready in case you'd be willing to test it on your use case.
from bundle-wizard.
Hi @deasems, if you get the chance, I'd really appreciate a test run of the new --interact
flag:
npx bundle-wizard@beta --interact
will open a non-headless browser window for you to interact with before continuing with the page audit.
Here's the documentation on the flag:
--interact flag
If you need to do some work in the browser getting the page ready for analysis (perhaps by signing in and then visiting a certain page), use this flag. You will see a browser window that will pop up that you can interact with. When you are ready to proceed, type y
into the console in response to the waiting prompt to reload the page and start measuring performance.
npx bundle-wizard --interact
Note: While this tool does not record any data, it's still recommended from a common sense perspective to enter login information only for test accounts.
from bundle-wizard.
Oh, I forgot this point:
4. I'm seeing some files show up as white with 'no coverage data'. These are files that are within a bundle that otherwise is listing coverage so it's surprising to have no coverage info, do you have any ideas what might cause this or how to fix?
from bundle-wizard.
Related Issues (17)
- Add possibility to disable certificate verification HOT 2
- bundle-wizard is great – thank you HOT 1
- Cannot read property 'emulate' of undefined HOT 2
- Failed to generate source map visualization HOT 2
- Cert name invalid HOT 1
- [feat] Override some default puppeteer option
- Potential Bugs and Anti-Patterns in the Codebase HOT 1
- [feat] export a visualization that works without a server HOT 2
- [Feature Request] Ability to specify port HOT 1
- Chrome could not be killed HOT 2
- What does "coverage" mean? HOT 1
- Does not support M1 Macs/Arm64 HOT 3
- [Feature Request] Flag to generate report only
- Error: connect ECONNREFUSED ::1:1197 HOT 6
- "No valid exports main found" HOT 3
- UnhandledPromiseRejectionWarning: Error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bundle-wizard.