1 | <div align="center">
|
2 | <a href="http://bundlewatch.io">
|
3 | <img src="https://cdn.rawgit.com/bundlewatch/bundlewatch.io/master/docs/_assets/logo-large.svg" height="100px">
|
4 | </a>
|
5 | <br>
|
6 | <br>
|
7 |
|
8 | [![npm][npm]][npm-url]
|
9 | [![bundlewatch][bundlewatch]][bundlewatch-url]
|
10 | [![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)
|
11 |
|
12 | [![node][node]][node-url]
|
13 | [![deps][deps]][deps-url]
|
14 | [![dev-deps][dev-deps]][dev-deps-url]
|
15 | [![builds][builds]][builds-url]
|
16 | [![test][test]][test-url]
|
17 |
|
18 | <br>
|
19 |
|
20 | [![npm-chart][npm-chart]][npm-chart-url]
|
21 | [![contributors][contrib]][contrib-url]
|
22 | [![license][license]][license-url]
|
23 |
|
24 | <h1>BundleWatch</h1>
|
25 | <p>
|
26 | BundleWatch checks file sizes, ensuring bundled browser assets don't jump in file size.<br />
|
27 | Sharp increases in BundleWatch can signal that something is wrong - adding a package that bloats the slug, a wrong import, or forgetting to minify.
|
28 | </p>
|
29 | </div>
|
30 |
|
31 | Inspired by [Siddharth Kshetrapal bundlesize][bundlesize]
|
32 |
|
33 | # Getting Started
|
34 |
|
35 | Install the BundleWatch package:
|
36 |
|
37 | - NPM: `npm install bundlewatch --save-dev`
|
38 | - Yarn: `yarn add bundlewatch --dev`
|
39 |
|
40 | Add some basic configuration to your `package.json`
|
41 |
|
42 | ```json
|
43 | {
|
44 | "name": "my package name",
|
45 | "version": "0.0.1",
|
46 | "bundlewatch": {
|
47 | "files": [
|
48 | {
|
49 | "path": "myfolder/*.js",
|
50 | "maxSize": "100kB"
|
51 | }
|
52 | ]
|
53 | }
|
54 | }
|
55 | ```
|
56 |
|
57 | Usage:
|
58 |
|
59 | - NPM: `npm run bundlewatch`
|
60 | - Yarn: `yarn run bundlewatch`
|
61 |
|
62 | This will give you command line output. If you want BundleWatch to report build status on your pull requests, see below.
|
63 |
|
64 | # Adding Build Status
|
65 |
|
66 | BundleWatch can report its status on your GitHub Pull Requests.
|
67 |
|
68 | <div align="center">
|
69 | <img alt="build status preview" src="https://raw.githubusercontent.com/bundlewatch/bundlewatch.io/master/docs/_assets/build-status-preview.png" width="700px">
|
70 | </div>
|
71 |
|
72 | ## CI Auth Variables Needed by BundleWatch
|
73 |
|
74 | - `BUNDLEWATCH_GITHUB_TOKEN`
|
75 |
|
76 | You will need to give BundleWatch access to your GitHub Statuses, which can be done by heading to:
|
77 | [https://service.bundlewatch.io/setup-github][setup-github-url]
|
78 |
|
79 | This will give you your `BUNDLEWATCH_GITHUB_TOKEN`. You will need to set this as an environment variable in CI.
|
80 |
|
81 | ## CI Variables Needed by BundleWatch
|
82 |
|
83 | The most efficient way to get this running is to ensure that some environment variables are available for BundleWatch to find.
|
84 |
|
85 | - `CI_REPO_OWNER` github.com/**facebook**/react
|
86 | - `CI_REPO_NAME` github.com/facebook/**react**
|
87 | - `CI_COMMIT_SHA`
|
88 | - `CI_BRANCH`
|
89 |
|
90 | If you're using, _Travis_, _CircleCI_, _Wrecker_, _Drone_ or _GitHub Actions_ these should all work out of the box.
|
91 |
|
92 | > Have a look at the source code to see which variables are automatically found: [`getCIVars`][get-ci-vars-source]
|
93 |
|
94 | ## Viewing the results breakdown
|
95 |
|
96 | After setting up the above you will have BuildStatus on your Pull Requests. Clicking the _details_ link on the reported status will show you a results file breakdown.
|
97 |
|
98 | <div align="center">
|
99 | <img alt="build results preview" src="https://raw.githubusercontent.com/bundlewatch/bundlewatch.io/master/docs/_assets/build-results-preview.png" width="700px">
|
100 | </div>
|
101 |
|
102 | ---
|
103 |
|
104 | # Additional Documentation
|
105 |
|
106 | Full [documentation available on bundlewatch.io][bundlewatch-docs-url]
|
107 |
|
108 | ## I use bundlesize, why should I switch to BundleWatch
|
109 |
|
110 | - Bundlesize has entered maintenance mode and pull requests are left hanging, so we wanted to reboot the community through creating BundleWatch
|
111 | - New [BundleWatch service][bundlewatch-service] with infrastructure as code
|
112 | - Launched [bundlewatch.io documentation website][bundlewatch-docs-url]
|
113 | - Enough test coverage to support CD
|
114 | - Node API Support
|
115 | - Lower barrier to contributing (automated testing and publishing), build a trusted community of contributors to have continuous improvement
|
116 |
|
117 | ## Additional Features
|
118 |
|
119 | - [x] Config validation to stop users from guessing why BundleWatch won't work
|
120 | - [x] Support for config file path
|
121 | - [x] Better results breakdown page
|
122 | - [x] Better comparisons between branches, support branches other than master
|
123 | - [x] Support for your own server for storing data
|
124 | - [x] New and improved CI behaviour
|
125 | - [ ] Show history of BundleWatchs over time (coming soon)
|
126 |
|
127 | ## Contributors
|
128 |
|
129 | Thanks goes to these wonderful people ([emoji key][all-contrib-emoji-key]):
|
130 |
|
131 |
|
132 |
|
133 |
|
134 | <table>
|
135 | <tr>
|
136 | <td align="center"><a href="https://jakebolam.com"><img src="https://avatars2.githubusercontent.com/u/3534236?v=4" width="100px;" alt=""/><br /><sub><b>Jake Bolam</b></sub></a><br /><a href="https://github.com/bundlewatch/bundlewatch/commits?author=jakebolam" title="Code">💻</a></td>
|
137 | <td align="center"><a href="https://opensource.tophat.com"><img src="https://avatars0.githubusercontent.com/u/6020693?v=4" width="100px;" alt=""/><br /><sub><b>Shouvik DCosta</b></sub></a><br /><a href="https://github.com/bundlewatch/bundlewatch/commits?author=sdcosta" title="Code">💻</a></td>
|
138 | <td align="center"><a href="http://www.tylerbenning.com"><img src="https://avatars2.githubusercontent.com/u/7265547?v=4" width="100px;" alt=""/><br /><sub><b>Tyler Benning</b></sub></a><br /><a href="#design-tbenning" title="Design">🎨</a></td>
|
139 | <td align="center"><a href="http://www.6ixsushi.com"><img src="https://avatars3.githubusercontent.com/u/20323414?v=4" width="100px;" alt=""/><br /><sub><b>Leila Rosenthal</b></sub></a><br /><a href="https://github.com/bundlewatch/bundlewatch/commits?author=leilarosenthal" title="Documentation">📖</a></td>
|
140 | <td align="center"><a href="https://github.com/francoiscampbell"><img src="https://avatars3.githubusercontent.com/u/3876970?v=4" width="100px;" alt=""/><br /><sub><b>Francois Campbell</b></sub></a><br /><a href="https://github.com/bundlewatch/bundlewatch/commits?author=francoiscampbell" title="Code">💻</a></td>
|
141 | <td align="center"><a href="http://emmanuel.ogbizi.com"><img src="https://avatars0.githubusercontent.com/u/2528959?v=4" width="100px;" alt=""/><br /><sub><b>Emmanuel Ogbizi</b></sub></a><br /><a href="#maintenance-iamogbz" title="Maintenance">🚧</a> <a href="https://github.com/bundlewatch/bundlewatch/commits?author=iamogbz" title="Code">💻</a> <a href="#security-iamogbz" title="Security">🛡️</a></td>
|
142 | <td align="center"><a href="https://pascal-iske.de"><img src="https://avatars2.githubusercontent.com/u/7473880?v=4" width="100px;" alt=""/><br /><sub><b>Pascal Iske</b></sub></a><br /><a href="https://github.com/bundlewatch/bundlewatch/issues?q=author%3Apascaliske" title="Bug reports">🐛</a></td>
|
143 | </tr>
|
144 | <tr>
|
145 | <td align="center"><a href="http://oleksiileonov.com"><img src="https://avatars2.githubusercontent.com/u/241582?v=4" width="100px;" alt=""/><br /><sub><b>Oleksii Leonov</b></sub></a><br /><a href="https://github.com/bundlewatch/bundlewatch/commits?author=aleksejleonov" title="Code">💻</a></td>
|
146 | </tr>
|
147 | </table>
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 | This project follows the [all-contributors][all-contrib-url] specification.
|
154 | Contributions of any kind welcome!
|
155 |
|
156 | ## Want to Help? Become a Contributor
|
157 |
|
158 | Contributions of any kind are welcome!
|
159 | [See the Contributing docs][contrib-docs-url] or [Join us on Slack][slack-invite-url].
|
160 |
|
161 | [all-contrib-emoji-key]: https://allcontributors.org/docs/en/emoji-key
|
162 | [all-contrib-url]: https://github.com/all-contributors/all-contributors
|
163 | [builds]: https://img.shields.io/circleci/project/github/bundlewatch/bundlewatch/master.svg
|
164 | [builds-url]: https://circleci.com/gh/bundlewatch/bundlewatch
|
165 | [bundlesize]: https://github.com/siddharthkp/bundlesize
|
166 | [bundlewatch]: https://img.shields.io/badge/bundle-watched-blue.svg
|
167 | [bundlewatch-url]: https://bundlewatch.io
|
168 | [bundlewatch-docs-url]: https://bundlewatch.io/
|
169 | [bundlewatch-service]: https://github.com/bundlewatch/service
|
170 | [contrib]: https://img.shields.io/github/contributors/bundlewatch/bundlewatch.svg
|
171 | [contrib-docs-url]: https://github.com/bundlewatch/bundlewatch/blob/master/CONTRIBUTING.md
|
172 | [contrib-url]: https://github.com/bundlewatch/bundlewatch/graphs/contributors
|
173 | [deps]: https://david-dm.org/bundlewatch/bundlewatch/status.svg
|
174 | [deps-url]: https://david-dm.org/bundlewatch/bundlewatch
|
175 | [dev-deps]: https://david-dm.org/bundlewatch/bundlewatch/dev-status.svg
|
176 | [dev-deps-url]: https://david-dm.org/bundlewatch/bundlewatch?type=dev
|
177 | [get-ci-vars-source]: https://github.com/bundlewatch/bundlewatch/blob/master/src/app/config/getCIVars.js
|
178 | [node]: https://img.shields.io/node/v/bundlewatch.svg
|
179 | [node-url]: https://nodejs.org
|
180 | [npm]: https://img.shields.io/npm/v/bundlewatch.svg
|
181 | [npm-chart]: https://img.shields.io/npm/dm/bundlewatch.svg
|
182 | [npm-chart-url]: https://npmcharts.com/compare/bundlewatch?minimal=true
|
183 | [npm-url]: https://npmjs.com/package/bundlewatch
|
184 | [license]: https://img.shields.io/npm/l/bundlewatch.svg
|
185 | [license-url]: https://github.com/bundlewatch/bundlewatch/blob/master/LICENSE
|
186 | [setup-github-url]: https://service.bundlewatch.io/setup-github
|
187 | [slack-invite-url]: https://join.slack.com/t/bundlewatch/shared_invite/zt-dtm41j6u-x4OTIvv033aT0rSCuIB~1w
|
188 | [test]: https://coveralls.io/repos/github/bundlewatch/bundlewatch/badge.svg?branch=master
|
189 | [test-url]: https://coveralls.io/github/bundlewatch/bundlewatch?branch=master
|