From ef721e1bae5c1bb115270689150e6489b0be2db7 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 13:44:22 +0530 Subject: [PATCH 1/8] use cosmicconfig --- .prettierrc | 4 ++++ README.md | 21 +++++++++++++++++---- examples/bundlesize.config.json | 16 ++++++++++++++++ examples/package.json | 25 +++++++++++++++++++++++++ package.json | 4 ++-- src/config.js | 30 +++++++++++++++++++----------- 6 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 .prettierrc create mode 100644 examples/bundlesize.config.json create mode 100644 examples/package.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..b2095be8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "semi": false, + "singleQuote": true +} diff --git a/README.md b/README.md index 6abb5174..72e2e75f 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,6 @@ [![NPM Downloads](https://img.shields.io/npm/dm/bundlesize.svg?style=flat)](https://www.npmjs.com/package/bundlesize)   - #### minimal setup ```sh @@ -44,6 +43,7 @@ npx bundlesize   #### 1) Add the path and maxSize in your `package.json`. + By default the gzipped size is tested. You can use the `compression` option to change this. (`gzip`, `brotli`, or `none`). ```json @@ -59,6 +59,19 @@ By default the gzipped size is tested. You can use the `compression` option to c } ``` +You can also keep the config in a separate file as well. Create a `bundlesize.config.json` in your project root in a `config` folder. + +```json +{ + "files": [ + { + "path": "./dist.js", + "maxSize": "3 kB" + } + ] +} +``` + `bundlesize` also supports [glob patterns](https://github.com/isaacs/node-glob) Example: @@ -91,14 +104,14 @@ Currently works for [Travis CI](https://travis-ci.org), [CircleCI](https://circl - Add this token as `BUNDLESIZE_GITHUB_TOKEN` as environment parameter in your CIs project settings. Using a different CI? You will need to supply an additional 4 environment variables. -- `CI_REPO_OWNER` given the repo `https://github.com/myusername/myrepo` would be `myusername` + +- `CI_REPO_OWNER` given the repo `https://github.com/myusername/myrepo` would be `myusername` - `CI_REPO_NAME` given the repo `https://github.com/myusername/myrepo` would be `myrepo` - `CI_COMMIT_MESSAGE` the commit message - `CI_COMMIT_SHA` the SHA of the CI commit, in [Jenkins](https://jenkins.io/) you would use `${env.GIT_COMMIT}` (Ask me for help if you're stuck) -   #### CLI @@ -156,7 +169,7 @@ For more granular configuration, we recommend configuring it in the `package.jso #### TODO -- Work with other CI tools +- Work with other CI tools - [AppVeyor](https://www.appveyor.com/) ([#234](https://github.com/siddharthkp/bundlesize/issues/234)) - Automate setup (setting env_var) diff --git a/examples/bundlesize.config.json b/examples/bundlesize.config.json new file mode 100644 index 00000000..62787d20 --- /dev/null +++ b/examples/bundlesize.config.json @@ -0,0 +1,16 @@ +{ + "files": [ + { + "path": "./build/direct-path.js", + "maxSize": "50Kb" + }, + { + "path": "./dist/generated-file-chunk-*.js", + "maxSize": "50Kb" + }, + { + "path": "./dist/all-files-in-folder/**/*.js", + "maxSize": "50Kb" + } + ] +} diff --git a/examples/package.json b/examples/package.json new file mode 100644 index 00000000..11120ced --- /dev/null +++ b/examples/package.json @@ -0,0 +1,25 @@ +{ + "name": "your-project", + "version": "1.0.0", + "scripts": { + "test": "bundlesize" + }, + "bundlesize": [ + { + "path": "./index.js", + "maxSize": "600B" + }, + { + "path": "./src/files.js", + "maxSize": "600B" + }, + { + "path": "./src/compressed-size.js", + "maxSize": "420B", + "compression": "none" + } + ], + "devDependencies": { + "bundlesize": "^0.18.0" + } +} diff --git a/package.json b/package.json index 4bc0d298..e582f393 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "bytes": "^3.1.0", "ci-env": "^1.4.0", "commander": "^2.20.0", + "cosmiconfig": "^5.2.1", "github-build": "^1.2.0", "glob": "^7.1.4", "gzip-size": "^4.0.0", - "prettycli": "^1.4.3", - "read-pkg-up": "^3.0.0" + "prettycli": "^1.4.3" }, "bundlesize": [ { diff --git a/src/config.js b/src/config.js index ad6c87b1..92d1daee 100644 --- a/src/config.js +++ b/src/config.js @@ -1,12 +1,23 @@ -const readPkgUp = require('read-pkg-up') +const cosmiconfig = require('cosmiconfig') -const pkg = readPkgUp.sync().pkg const program = require('commander') const { error } = require('prettycli') const debug = require('./debug') -/* Config from package.json */ -const packageJSONconfig = pkg.bundlesize +/* Config from file */ + +let fileConfig + +const explorer = cosmiconfig('bundlesize', { + searchPlaces: ['package.json', 'bundlesize.config.json', 'config/bundlesize.config.json'] +}) + +const result = explorer.searchSync() + +if (result) { + if (result.filepath.includes('package.json')) fileConfig = result.config + else fileConfig = result.config.files +} /* Config from CLI */ @@ -14,10 +25,7 @@ program .option('-f, --files [files]', 'files to test against (dist/*.js)') .option('-s, --max-size [maxSize]', 'maximum size threshold (3Kb)') .option('--debug', 'run in debug mode') - .option( - '-c, --compression [compression]', - 'specify which compression algorithm to use' - ) + .option('-c, --compression [compression]', 'specify which compression algorithm to use') .parse(process.argv) let cliConfig @@ -34,7 +42,7 @@ if (program.files) { /* Send to readme if no configuration is provided */ -if (!packageJSONconfig && !cliConfig) { +if (!fileConfig && !cliConfig) { error( `Config not found. @@ -45,10 +53,10 @@ if (!packageJSONconfig && !cliConfig) { ) } -const config = cliConfig || packageJSONconfig +const config = cliConfig || fileConfig debug('cli config', cliConfig) -debug('package json config', packageJSONconfig) +debug('file config', fileConfig) debug('selected config', config) module.exports = config From b44e2e972aefdca96ba2cb1858780147ac1b48a7 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 13:46:08 +0530 Subject: [PATCH 2/8] copy fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 72e2e75f..a0c1ba8a 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ By default the gzipped size is tested. You can use the `compression` option to c } ``` -You can also keep the config in a separate file as well. Create a `bundlesize.config.json` in your project root in a `config` folder. +You can also keep the config in a separate file as well. Create a `bundlesize.config.json` in your project root OR in a `config` folder. ```json { From 4e5dd1a8f6a0467023bbe7f374cdea5242c8c934 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 13:52:39 +0530 Subject: [PATCH 3/8] add options for dotfiles as well --- README.md | 16 +++++++++++++++- src/config.js | 8 +++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a0c1ba8a..a55f2062 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,21 @@ By default the gzipped size is tested. You can use the `compression` option to c } ``` -You can also keep the config in a separate file as well. Create a `bundlesize.config.json` in your project root OR in a `config` folder. +You can also keep the config in a separate file as well. These are the supported files: + +```md +// put this file in root of your application +bundlesize.config.js + +// if you don't want to crowd your root folder, +// you can put this file in a config folder instead +config/bundlesize.config.js + +// You can also create a dotfile if you want +// it to be hidden in your terminal/IDE +.bundlesize.config.js +.config/bundlesize.config.js +``` ```json { diff --git a/src/config.js b/src/config.js index 92d1daee..72e7712f 100644 --- a/src/config.js +++ b/src/config.js @@ -9,7 +9,13 @@ const debug = require('./debug') let fileConfig const explorer = cosmiconfig('bundlesize', { - searchPlaces: ['package.json', 'bundlesize.config.json', 'config/bundlesize.config.json'] + searchPlaces: [ + 'package.json', + 'bundlesize.config.json', + 'config/bundlesize.config.json', + '.bundlesize.config.json', + '.config/bundlesize.config.json' + ] }) const result = explorer.searchSync() From 9c9a12b6fb9b8bd39f91650a1d963fbd7b0521d3 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 14:39:11 +0530 Subject: [PATCH 4/8] accept --config path --- README.md | 184 ++++++++++++++++++++++++++++++++++---------------- src/config.js | 58 ++++++++-------- 2 files changed, 154 insertions(+), 88 deletions(-) diff --git a/README.md b/README.md index a55f2062..05ec921d 100644 --- a/README.md +++ b/README.md @@ -12,15 +12,21 @@ [![NPM Downloads](https://img.shields.io/npm/dm/bundlesize.svg?style=flat)](https://www.npmjs.com/package/bundlesize)   -#### minimal setup +#### Setup ```sh npm install bundlesize --save-dev + +# or + +yarn add bundlesize --dev ```   -#### usage +#### Usage + +  Add it to your scripts in `package.json` @@ -30,89 +36,145 @@ Add it to your scripts in `package.json` } ``` -  - -Or you can use `npx` with [NPM 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). +Or you can use it with `npx` from [NPM 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). ```sh npx bundlesize ``` -#### configuration -   -#### 1) Add the path and maxSize in your `package.json`. +#### Configuration + +  -By default the gzipped size is tested. You can use the `compression` option to change this. (`gzip`, `brotli`, or `none`). +`bundlesize` accepts an array of files to check. ```json -{ - "name": "your cool library", - "version": "1.1.2", - "bundlesize": [ - { - "path": "./dist.js", - "maxSize": "3 kB" - } - ] -} +[ + { + "path": "./build/vendor.js", + "maxSize": "30 kB" + }, + { + "path": "./build/chunk-*.js", + "maxSize": "10 kB" + } +] ``` -You can also keep the config in a separate file as well. These are the supported files: +  -```md -// put this file in root of your application -bundlesize.config.js +You can keep this array either in -// if you don't want to crowd your root folder, -// you can put this file in a config folder instead -config/bundlesize.config.js +1. `package.json` -// You can also create a dotfile if you want -// it to be hidden in your terminal/IDE -.bundlesize.config.js -.config/bundlesize.config.js -``` + ```json + { + "name": "your cool library", + "version": "1.1.2", + "bundlesize": [ + { + "path": "./build/vendor.js", + "maxSize": "3 kB" + } + ] + } + ``` -```json -{ - "files": [ - { - "path": "./dist.js", - "maxSize": "3 kB" - } - ] -} -``` + or in a separate file -`bundlesize` also supports [glob patterns](https://github.com/isaacs/node-glob) +2. `bundlesize.config.js` -Example: + Format: -```json -"bundlesize": [ - { - "path": "./dist/vendor-*.js", - "maxSize": "3 kB" - }, - { - "path": "./dist/chunk-*.js", - "maxSize": "3 kB" - } -] + ```json + { + "files": [ + { + "path": "./dist.js", + "maxSize": "3 kB" + } + ] + } + ``` -``` + You can give a different file by using the `--config` flag: -This makes it great for using with applications that are bundled with another tool. It will match multiple files if necessary and create a new row for each file. + ``` + bundlesize --config configs/bundlesize.json + ```   -#### 2) build status +### Customisation + +1. Fuzzy matching + + If the names of your build files are not predictable, you can use the [glob pattern](https://github.com/isaacs/node-glob) to specify files. + + This is common if you append a hash to the name or use a tool like create-react-app/nextjs. + + ```json + { + "files": [ + { + "path": "build/**/main-*.js", + "maxSize": "5 kB" + }, + { + "path": "build/**/*.chunk.js", + "maxSize": "50 kB" + } + ] + } + ``` + + It will match multiple files if necessary and create a new row for each file. + +2. Compression options + + By default, bundlesize `gzips` your build files before comparing. + + If you are using `brotli` instead of gzip, you can specify that with each file: + + ```json + { + "files": [ + { + "path": "./build/vendor.js", + "maxSize": "5 kB", + "compression": "brotli" + } + ] + } + ``` + + If you do not use any compression before sending your files to the client, you can switch compression off: + + ```json + { + "files": [ + { + "path": "./build/vendor.js", + "maxSize": "5 kB", + "compression": "none" + } + ] + } + ``` + +  + +#### Build status for GitHub + +  + +If your repository is hosted on GitHub, you can set bundlesize up to create a "check" on every pull request. ![build status](https://cdn.rawgit.com/siddharthkp/bundlesize/master/art/status.png) -Currently works for [Travis CI](https://travis-ci.org), [CircleCI](https://circleci.com/), [Wercker](http://www.wercker.com), and [Drone](http://readme.drone.io/). +Currently works with [Travis CI](https://travis-ci.org), [CircleCI](https://circleci.com/), [Wercker](http://www.wercker.com), and [Drone](http://readme.drone.io/). - [Authorize `bundlesize` for status access](https://github.com/login/oauth/authorize?scope=repo%3Astatus&client_id=6756cb03a8d6528aca5a), copy the token provided. - Add this token as `BUNDLESIZE_GITHUB_TOKEN` as environment parameter in your CIs project settings. @@ -128,9 +190,11 @@ Using a different CI? You will need to supply an additional 4 environment variab   -#### CLI +#### Usage with CLI + +  -example usage: +bundlesize can also be used without creating a configuration file. We do not recommend this approach and it might be deprecated in a future version. ```sh bundlesize -f "dist/*.js" -s 20kB diff --git a/src/config.js b/src/config.js index 72e7712f..98fc4497 100644 --- a/src/config.js +++ b/src/config.js @@ -4,40 +4,30 @@ const program = require('commander') const { error } = require('prettycli') const debug = require('./debug') -/* Config from file */ - -let fileConfig - -const explorer = cosmiconfig('bundlesize', { - searchPlaces: [ - 'package.json', - 'bundlesize.config.json', - 'config/bundlesize.config.json', - '.bundlesize.config.json', - '.config/bundlesize.config.json' - ] -}) - -const result = explorer.searchSync() +// default places we check +const configPaths = ['package.json', 'bundlesize.config.json'] -if (result) { - if (result.filepath.includes('package.json')) fileConfig = result.config - else fileConfig = result.config.files -} - -/* Config from CLI */ +/* Config + Flags from CLI */ +// TODO: Deprecate the config part program .option('-f, --files [files]', 'files to test against (dist/*.js)') .option('-s, --max-size [maxSize]', 'maximum size threshold (3Kb)') .option('--debug', 'run in debug mode') - .option('-c, --compression [compression]', 'specify which compression algorithm to use') + .option('--config [config]', 'Get path of configuration file') + .option( + '-c, --compression [compression]', + 'specify which compression algorithm to use' + ) .parse(process.argv) -let cliConfig +let configFromCli + +// add to the list of files to check +if (program.config) configPaths.push(program.config) if (program.files) { - cliConfig = [ + configFromCli = [ { path: program.files, maxSize: program.maxSize, @@ -46,9 +36,21 @@ if (program.files) { ] } +/* Config from file */ + +let configFromFile + +const explorer = cosmiconfig('bundlesize', { searchPlaces: configPaths }) +const result = explorer.searchSync() + +if (result) { + if (result.filepath.includes('package.json')) configFromFile = result.config + else configFromFile = result.config.files +} + /* Send to readme if no configuration is provided */ -if (!fileConfig && !cliConfig) { +if (!configFromFile && !configFromCli) { error( `Config not found. @@ -59,10 +61,10 @@ if (!fileConfig && !cliConfig) { ) } -const config = cliConfig || fileConfig +const config = configFromCli || configFromFile -debug('cli config', cliConfig) -debug('file config', fileConfig) +debug('cli config', configFromCli) +debug('file config', configFromFile) debug('selected config', config) module.exports = config From 190da8a8604e7e0a59fdd1c57e6852aac70a5880 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 14:40:27 +0530 Subject: [PATCH 5/8] prepend instead of append --- src/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/config.js b/src/config.js index 98fc4497..7c7e61c6 100644 --- a/src/config.js +++ b/src/config.js @@ -23,8 +23,8 @@ program let configFromCli -// add to the list of files to check -if (program.config) configPaths.push(program.config) +// add to the list of files to check at the 1st position +if (program.config) configPaths.unshift(program.config) if (program.files) { configFromCli = [ From 6e5547b710187a0b307c5e52e93fdb351543b7e7 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 14:42:35 +0530 Subject: [PATCH 6/8] handle incorrect path --- src/config.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/config.js b/src/config.js index 7c7e61c6..c1405a1b 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,5 @@ const cosmiconfig = require('cosmiconfig') +const fs = require('fs') const program = require('commander') const { error } = require('prettycli') @@ -23,8 +24,22 @@ program let configFromCli -// add to the list of files to check at the 1st position -if (program.config) configPaths.unshift(program.config) +if (program.config) { + if (!fs.existsSync(program.config)) { + // throw error if file doesn't exist + error( + `Custom config file does not exist. Make sure the path is relative to the project root. + + You can read about the configuration options here: + https://github.com/siddharthkp/bundlesize#configuration + `, + { silent: true } + ) + } else { + // add to the list of files to check at the 1st position + configPaths.unshift(program.config) + } +} if (program.files) { configFromCli = [ From 6a34d7a676d1647173c16fc1a1256b7c5ed91e22 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 14:45:29 +0530 Subject: [PATCH 7/8] consistent font size in readme --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 05ec921d..fae10747 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,9 @@ You can keep this array either in   -### Customisation +#### Customisation + +  1. Fuzzy matching @@ -132,6 +134,8 @@ You can keep this array either in It will match multiple files if necessary and create a new row for each file. +   + 2. Compression options By default, bundlesize `gzips` your build files before comparing. From 15bc118b97752456e486d736833a0dae563f2fbf Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 28 Jun 2019 14:50:33 +0530 Subject: [PATCH 8/8] pull out config for this project first :) --- bundlesize.config.json | 17 +++++++++++++++++ package.json | 15 --------------- 2 files changed, 17 insertions(+), 15 deletions(-) create mode 100644 bundlesize.config.json diff --git a/bundlesize.config.json b/bundlesize.config.json new file mode 100644 index 00000000..657d88aa --- /dev/null +++ b/bundlesize.config.json @@ -0,0 +1,17 @@ +{ + "files": [ + { + "path": "./index.js", + "maxSize": "600B" + }, + { + "path": "./src/files.js", + "maxSize": "600B" + }, + { + "path": "./src/compressed-size.js", + "maxSize": "420B", + "compression": "none" + } + ] +} diff --git a/package.json b/package.json index 0c100ba8..6093ec3f 100644 --- a/package.json +++ b/package.json @@ -45,21 +45,6 @@ "gzip-size": "^4.0.0", "prettycli": "^1.4.3" }, - "bundlesize": [ - { - "path": "./index.js", - "maxSize": "600B" - }, - { - "path": "./src/files.js", - "maxSize": "600B" - }, - { - "path": "./src/compressed-size.js", - "maxSize": "420B", - "compression": "none" - } - ], "lint-staged": { "*.js": [ "prettier",