siddharthkp / bundlesize Goto Github PK
View Code? Open in Web Editor NEWKeep your bundle size in check
License: MIT License
Keep your bundle size in check
License: MIT License
Right now I see the bundlesize report only when the PR is completed. I'd love to see it in "yellow" while the build is still proceeding.
Maybe add a bundlesize start
command to run before any other build command to notify the PR about this check?
The test
script would look like this:
"scripts": {
// better command names are welcome ๐
"test": "bundlesize start && jest && bundlesize check"
}
I'm curious to see how it works.
Now that we have multiple collaborators on the repo, it will be useful to add a prettier pre-commit hook to maintain consistency.
This is how you can setup a pre-commit hook: https://www.npmjs.com/package/prettier#pre-commit-hook
My favorite config is: prettier --write --single-quote --no-semi
, but I'm open to whatever the majority feels comfortable with ๐
Thanks to @okonet for lint-staged and @typicode for husky!
I would love to use this as a tool for most of my repositories even the ones that are not written in js.
Would it be possible to transform this tool into something that would appear here https://github.com/marketplace similar to the Travis CI or Codacy.
For example I would love to use this to get updates on bundlesize in a repository with shell scripts but don't want to add node modules to the project just to accomplish this (just adds to the bundlesize I am trying to keep as low as possible).
As you can see from the screenshot below
Perhaps only showing that last directory and the filename, prefixed with ...
would be better, as the most useful information follows that. The full path could be shown when hovering over the summary.
If you have a solution in mind, I'd be happy to try and make the change for you. I'm guessing doing some path manipulation here would do it?
Why?
Would be super useful to have this in place so we could pipe in output of another program, i.e. one which strips down comments.
Im happy to help with implementing this, just reaching out first with the idea as suggested in CONTRIBUTING section ;)
I've noticed that the docs use maxSize
in the config, since the tagged release hasn't happened yet to change the internals to use maxSize
it uses threshold
instead. Giving an error like this
./dist/assets/es5.min.js: 65.19kB > threshold null gzip
To fix change the property in your package.json
to from maxSize
to threshold
.
Just popping this here for anyone getting the error.
We are moving to a lerna repo with Apollo and setup 5 filesize tests. With the current link generation, the UI fails to parse the JSON (it appears to be cut off). Example Link
I'd be happy to PR a change to encode it differently if desired
Rather than having to manually specify the files to track in the package.json
, it would be nice to be able to automatically track all files that are saved as artifacts in CircleCI and compare them to the most recent master build.
I thought about the fact that the tool sends the bundle size information to a Firebase store to make comparisons across builds and how that can pull off possible users. I then began to search for alternatives - and I think I have found one:
For simple cli usage a run could simply store the result as a JSON file that compares against itself on rerun. Nothing special here.
When the tool is ran on a CI environment, it has to be configured in a way that this JSON result is stored in a opinionated or configured place in the build artifacts that then will be accessed via the CI tools API. With this in place we could compare against the latest master build or even compare against the target branch of a pull request.
With CircleCi this is a non issue. The API is in place and has all necessary endpoints to pull this of. But I'm not sure about travis. In my 5 minutes of googling I didn't find a way to easily access build artifacts other than a direct S3 connection. Do you have insights on this?
I know there are already services that provide badges with the bundle size, but I think there's market for a dedicated "bundlesize" badge which may provide more informations compared to the classic ones.
For instance, it would be super cool to have the badge link to a page that keeps track of the size variations during time.
Hello,
I'm looking to use this package with an enterprise deployment of CircleCI. Is there a reason you aren't using the GitHub API to do proper auth and status checks on builds? I don't mind running this as a command post yarn
, but I still would like to have the status check if possible on our PRs in GitHub enterprise.
Alternatively, is there a way I could set this to have our Circle job push the status to GitHub based on results this provides?
Looking forward to hearing from you guys. Would be great to have this ability!
Currently it counts the sourcemap comment (if there is such) too.
These comments usually are around 20-40 bytes.
Let's say bundle.js starts at 50KB, so we set threshold to 55KB. Then, some incredible PR comes in and reduces the bundle to 40KB -- that's great! ๐ But, now our threshold is still at 55KB ๐ข
Ideally we'd like to know about this and be reminded to update the bundlesize threshold to something better, like 45KB, for example.
Thoughts?
Note: This is not a issue actually but more of a open discussion regarding a contributing workflow.
I have been doing some Rnd on Fork-and-Branch Git Workflow and also on other sites and found that the basic workflow for adding a new feature to a forked repo is like:-
So, do you think it is a best practice to always make the new feature or experimental changes on a new branch? Should we update our CONTRIBUTING.md
to reflect that too?
Regards!
Do you want to request a feature or report a bug?
What is the current behavior?
npm version major
git push origin master --tags
npm publish
You manually decide what the next version is. You have to remember what major, minor and patch means. You have to remember to push both commits and tags. You have to wait for the CI to pass.
If the current behavior is a bug, please provide the steps to reproduce.
What is the expected behavior?
git commit -m "fix: <message>"
git push
You describe the changes youโve made. A new version is automatically published with the correct version number.
If this is a feature request, what is motivation or use case for changing the behavior?
Please mention other relevant information.
Since we are using prettier for the precommit hook I think we should add eslint aswell.
I was thinking of adding:
How does that sound ?
Note: This is not a issue actually but more of a open discussion regarding a new readme npm stats badge.
Hi Everyone,
Just wanted to know, if you guys think we can add a badge to show no. of downloads/month like:
If you click the badge, you can visit to npm-stat page which will show the full stats also. Currently we have around 12k downloads/month and I think we need to show this impressive stats to the world, right on the readme page.
What you guys think?
Regards!
we currently include 4 separate file blocks in our bundlesize
config.. when api.set(values)
is executed with multiple files, only the first seems to be persisted.. our response for https://bundlesize-store-iothfynuyu.now.sh/values?repo=${environment.repo}&token=${environment.token}
includes only the first item of that values
array..
We output our asset files using webpack with a filename like [name]-[chunkhash].js
; this looks like amo-581f1494a4fa6d00f237.js
. Is there a way to use bundlesize to track this? I couldn't think of a way to do this from your README.
Hi,
I installed bundlesize in a travis CI build script but it does not output master nor in the detail or in the success message.
Here the part of the script for bundlesize
/* eslint-disable no-console */
const Build = require('github-build');
const data = {
repo: process.env.TRAVIS_REPO_SLUG,
sha: process.env.TRAVIS_COMMIT,
token: process.env.BUNDLESIZE_GITHUB_TOKEN,
label: 'bundlesize',
description: 'Check application size',
};
/* Create a build */
const build = new Build(data);
/* When you call start, a pending status get's added on github (returns a promise) */
build
.pass()
.then(() => console.log('Check if a pending status was added'))
.catch(response => console.log(response.status, response.error.message));
Do you have any idea ?
Thank you ! ๐
Having insights into why is the library size growing would be really helpful. If the increase can be traced back to the source, it would be great.
As @ai puts it:
you need not only warning, but also reasons why library become bigger. Profiling is a key for optimization ;)
One of the possible solutions here is using webpack bundle analyser (again, thanks to @ai)
When bundlesize requests read/write access via GitHub, the application metadata lists https://bundlesize.ci which does not resolve. Maybe that link needs to be updated?
See this build, I'm unsure what's up...
I love easily keeping track of a build size, but I don't necessarily need a low limit (e.g. for a Web Extension) that would force us to make dumb choices (i.e. change the code to be lighter but less readable) just to get a โ
I could set a high limit but seeing 30KB < 500KB threshold
feels like it's a race to reach it ๐
What if it always passed the build and just showed careful, 30% larger than master
so seemingly small dependencies can't fool us.
Hi guys,
I was thinking about creating a slack team to chat with more ease than on Github issue especially to know more each other, ask question / help or welcome new people ๐
Please tell me what you think about that ๐
Hey, I really like where this project is going. Thanks for doing it.
I want to ask if there's any way to deal with unknown bundle file names because I'm using webpack and my bundle files are hashes.
I also have another constraint: I currently generate 2 JS files - vendor and app specific.
Also, my test script is custom and has other commands how would I configure it to work with bundlesize?
Thanks
For an example the code in files.js
could be from
error('There is no matching file for ' + file.path, { silent: true })
to
error(`There is no matching file for ${file.path} in ${process.cwd()}`, { silent: true });
Makes it that much more simpler in terms of knowing where the current context runner is set to. makes it user friendly , i'd think.
Do make your comments on this.
I've made those changes as a part of different repo and can send PR if you think its worth adding.
This project uses npm5's package-lock.json
, I realised that a lot of folks use yarn or an older version of npm.
What this means is that you might not get the same dependencies on your machines.
Moreover, dependencies you add on npm4 will not get added to package-lock
, this might lead to problems in CI which uses npm5 and will only install packages from package-lock (If I understand correctly, I might be wrong)
How do we get around this problem?
Found that readme todo section mention about
work with other CI tools (circle, appveyor, etc.)
But, Circle CI is already working with this package, as mentioned:
Currently works for Travis CI, CircleCI, Wercker, and Drone.
So, please update the todo list, as found necessary for this repo.
Regards!
Hi, we're trying to set up bundlesize with our CI but on every build we're seeing this Error: Request failed with status code 500
.
This is what it's complaining about:
data: '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<title>Error</title>\n</head>\n<body>\n<pre>Error: Firebase.child failed: First argument was an invalid path: "5b6276128b031ac95462607a8060cfe85b60ca1c/Onlaw/onlaw.dk". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"<br> at Sd (/home/nowuser/src/node_modules/firebase/database-node.js:106:59)<br> at U.h.n (/home/nowuser/src/node_modules/firebase/database-node.js:247:178)<br> at Og.h.gf (/home/nowuser/src/node_modules/firebase/database-node.js:184:552)<br> at get (/home/nowuser/src/firebase.js:33:30)<br> at server.get (/home/nowuser/src/index.js:20:5)<br> at Layer.handle (/home/nowuser/src/node_modules/express/lib/router/layer.js:95:5)<br> at Layer.wrapped (/home/nowuser/src/node_modules/newrelic/lib/transaction/tracer/index.js:184:28)<br> at Layer.wrappedLayerHandleRequest [as handle_request] (/home/nowuser/src/node_modules/newrelic/lib/instrumentation/express.js:364:14)<br> at next (/home/nowuser/src/node_modules/express/lib/router/route.js:137:13)<br> at Route.dispatch (/home/nowuser/src/node_modules/express/lib/router/route.js:112:3)</pre>\n</body>\n</html>\n'
Our GH repo does have a dot in the name but since popper.js is listed as currently using bundlesize I've assumed that this isn't the real cause of the issue here?
First, thanks for this, this is great! โจ
Curious if you'd be open to a PR that would allow for reporting on GZIP sizes instead of/in addition to just the Disk Size kb? Perhaps using something like gzip-size
I'm trying to use bundlesize
without github integration. Is that possible? In other words, I haven't added a token but I thought I could still use the output to tell me if my bundle has reached the threshold or not.
I set up my TravisCI to run bundlesize
in my build step. This worked fine in a branch but when I merged it to master it failed every time like this:
$ bundlesize
ERROR Could not add github status.
404: Not Found
error Command failed with exit code 1.
Here is an example of a failure: https://travis-ci.org/mozilla/addons-frontend/builds/262798345?utm_source=github_status&utm_medium=notification
As in remove the .
?
Line 61 in 5b7d079
Hey!
Thanks for joining in and helping out on this repo!
Honestly I'm a little overwhelmed that all of you wanted to join and help out!
And the speed and excitement at which y'all are going is intoxicating!
I asked for help because I was feeling burned out by starting too many projects in a tiny span of time. I'm recharging my batteries by hanging out people I love and trying out new creative things.
I'm going to unwatch this repo for a tiny while (which means I'll not get a notification unless you @ tag you me, feel free to do so if you want)
I think all of you have merging rights, @SaraVieira has publishing rights on npm, be nice to her ๐
I'll be back stronger and more excited!
brb!
Threshold
feels like it's the delta, whereas we need an absolute amount, max size
?
As we have bunch of contributors now, it might a good time to invest in some tests ๐
@Furizaa gave an amazing PR long back (#20), but I couldn't wrap my head around it completely and chickened out! ๐ Sorry!
What would be a good testing strategy?
My go-to strategy for testing CLI tools has been to test the smaller functions by calling them with real files (Used this in cost-of-modules and auto-install)
For example: config.js reads config from a cli params and a file. We can create a test folder which is like a dummy app and test the whole flow one piece at a time.
It would be great to add bundle-buddy to bundlesize to give more insights into the bundle (which all packages are eating more and which package are using same resources.
@siddharthkp any suggestions?
We tend to have a hash generated with filename, thus:
main-SOME_RANDOM_HASH.js
There is a newer version of chalk
released that this project depends on.
Please update to latest and test it out.
Regards!
Create a file similar to the one for travis that holds variables for circle.
Decide which CI to pick based on environment variables set by them in build.js
The details page url takes all the data in query params.
The url seems to be cut off at 835 characters which leaves about 797 characters for data. The current implementation is pretty naive. It stringifies the results object and passes it in the url. This works great for a few files (< 5?), but breaks after that.
A more compact format will help in supporting a bigger number of files.
code: reporter.js and store/index.js
What are your thoughts on adding config via a CLI as an alternative to using package.json
. We'd love to start using this on our apps but would rather not have to update each apps' package.json
?
I'd be happy to attempt a PR but want to know your thoughts?
Hey there,
great tool, I'd love to but I can not use it:
My employer has also private, non-public code in the GitHub organization. I would love to use this tool's GitHub integration to display the bundle size nicely with every open source PR we get.
But, I am not allowed to activate the integration, since it ask's for full private repository access.
Why do you need that access by default? Is there a way to have a bundle-size which is only integrating with public repositories?
I am pretty sure most use-case here are opensource projects which will be public anyways.
Thank you very much,
Benedikt
I really want to contribute to this project and have an idea to improve some feature, because my team in Tapjoy started to use it for small project.
But I'm not sure how to build and test on my local machine. So it would be super helpful if you add some guide for the contributors.
And I appreciate for your effort!
@kentcdodds made the coolest thing ever: all-contributors
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.