├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .prettierrc ├── gatsby-node.js ├── index.js ├── package.json ├── readme.md └── screenshot.png /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['standard', 'plugin:prettier/recommended'], 3 | env: { 4 | es6: true 5 | }, 6 | parserOptions: { 7 | sourceType: 'module', 8 | ecmaFeatures: { 9 | experimentalObjectRestSpread: true, 10 | jsx: true 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | 3 | # Created by https://www.gitignore.io/api/vim,code,linux,macos,windows,sublimetext,node 4 | 5 | ### Code ### 6 | # Visual Studio Code - https://code.visualstudio.com/ 7 | .settings/ 8 | .vscode/ 9 | tsconfig.json 10 | jsconfig.json 11 | 12 | ### Linux ### 13 | *~ 14 | 15 | # temporary files which can be created if a process still has a handle open of a deleted file 16 | .fuse_hidden* 17 | 18 | # KDE directory preferences 19 | .directory 20 | 21 | # Linux trash folder which might appear on any partition or disk 22 | .Trash-* 23 | 24 | # .nfs files are created when an open file is removed but is still being accessed 25 | .nfs* 26 | 27 | ### macOS ### 28 | *.DS_Store 29 | .AppleDouble 30 | .LSOverride 31 | 32 | # Icon must end with two \r 33 | Icon 34 | 35 | # Thumbnails 36 | ._* 37 | 38 | # Files that might appear in the root of a volume 39 | .DocumentRevisions-V100 40 | .fseventsd 41 | .Spotlight-V100 42 | .TemporaryItems 43 | .Trashes 44 | .VolumeIcon.icns 45 | .com.apple.timemachine.donotpresent 46 | 47 | # Directories potentially created on remote AFP share 48 | .AppleDB 49 | .AppleDesktop 50 | Network Trash Folder 51 | Temporary Items 52 | .apdisk 53 | 54 | ### Node ### 55 | # Logs 56 | logs 57 | *.log 58 | npm-debug.log* 59 | yarn-debug.log* 60 | yarn-error.log* 61 | 62 | # Runtime data 63 | pids 64 | *.pid 65 | *.seed 66 | *.pid.lock 67 | 68 | # Directory for instrumented libs generated by jscoverage/JSCover 69 | lib-cov 70 | 71 | # Coverage directory used by tools like istanbul 72 | coverage 73 | 74 | # nyc test coverage 75 | .nyc_output 76 | 77 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 78 | .grunt 79 | 80 | # Bower dependency directory (https://bower.io/) 81 | bower_components 82 | 83 | # node-waf configuration 84 | .lock-wscript 85 | 86 | # Compiled binary addons (http://nodejs.org/api/addons.html) 87 | build/Release 88 | 89 | # Dependency directories 90 | node_modules/ 91 | jspm_packages/ 92 | 93 | # Typescript v1 declaration files 94 | typings/ 95 | 96 | # Optional npm cache directory 97 | .npm 98 | 99 | # Optional eslint cache 100 | .eslintcache 101 | 102 | # Optional REPL history 103 | .node_repl_history 104 | 105 | # Output of 'npm pack' 106 | *.tgz 107 | 108 | # Yarn Integrity file 109 | .yarn-integrity 110 | 111 | # dotenv environment variables file 112 | .env 113 | 114 | ### SublimeText ### 115 | # cache files for sublime text 116 | *.tmlanguage.cache 117 | *.tmPreferences.cache 118 | *.stTheme.cache 119 | 120 | # workspace files are user-specific 121 | *.sublime-workspace 122 | 123 | # project files should be checked into the repository, unless a significant 124 | # proportion of contributors will probably not be using SublimeText 125 | # *.sublime-project 126 | 127 | # sftp configuration file 128 | sftp-config.json 129 | 130 | # Package control specific files 131 | Package Control.last-run 132 | Package Control.ca-list 133 | Package Control.ca-bundle 134 | Package Control.system-ca-bundle 135 | Package Control.cache/ 136 | Package Control.ca-certs/ 137 | Package Control.merged-ca-bundle 138 | Package Control.user-ca-bundle 139 | oscrypto-ca-bundle.crt 140 | bh_unicode_properties.cache 141 | 142 | # Sublime-github package stores a github token in this file 143 | # https://packagecontrol.io/packages/sublime-github 144 | GitHub.sublime-settings 145 | 146 | ### Vim ### 147 | # swap 148 | .sw[a-p] 149 | .*.sw[a-p] 150 | # session 151 | Session.vim 152 | # temporary 153 | .netrwhist 154 | # auto-generated tag files 155 | tags 156 | 157 | ### Windows ### 158 | # Windows thumbnail cache files 159 | Thumbs.db 160 | ehthumbs.db 161 | ehthumbs_vista.db 162 | 163 | # Folder config file 164 | Desktop.ini 165 | 166 | # Recycle Bin used on file shares 167 | $RECYCLE.BIN/ 168 | 169 | # Windows Installer files 170 | *.cab 171 | *.msi 172 | *.msm 173 | *.msp 174 | 175 | # Windows shortcuts 176 | *.lnk 177 | 178 | 179 | # End of https://www.gitignore.io/api/vim,code,linux,macos,windows,sublimetext,node 180 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | *.un~ 29 | yarn.lock 30 | src 31 | flow-typed 32 | coverage 33 | decls 34 | examples 35 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const SizePlugin = require('size-plugin') 2 | 3 | exports.onCreateWebpackConfig = ({ stage, actions }, options) => { 4 | if ( 5 | (process.env.NODE_ENV === 'production' && stage === 'build-javascript') || 6 | options.development 7 | ) { 8 | actions.setWebpackConfig({ 9 | plugins: [new SizePlugin(options)], 10 | }) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // noop -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-plugin-webpack-size", 3 | "version": "2.0.1", 4 | "description": "Logs your production bundle sizes in a CI friendly way", 5 | "main": "index.js", 6 | "scripts": { 7 | "lint": "eslint gatsby-node.js", 8 | "format": "prettier --write gatsby-node.js" 9 | }, 10 | "keywords": [ 11 | "gatsby", 12 | "gatsby-plugin", 13 | "webpack", 14 | "bundle" 15 | ], 16 | "author": "Benedikt Rötsch ", 17 | "bugs": { 18 | "url": "https://github.com/axe312ger/gatsby-plugin-webpack-size/issues" 19 | }, 20 | "homepage": "https://github.com/axe312ger/gatsby-plugin-webpack-size/", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/axe312ger/gatsby-plugin-webpack-size.git" 24 | }, 25 | "license": "MIT", 26 | "files": [ 27 | "readme.md", 28 | "gatsby-node.js", 29 | "index.js" 30 | ], 31 | "dependencies": { 32 | "size-plugin": "^3.0.0" 33 | }, 34 | "peerDependencies": { 35 | "gatsby": "^2.0.0 || ^3.0.0" 36 | }, 37 | "devDependencies": { 38 | "eslint": "^7.20.0", 39 | "eslint-config-prettier": "^8.1.0", 40 | "eslint-config-standard": "^16.0.2", 41 | "eslint-plugin-import": "^2.17.3", 42 | "eslint-plugin-node": "^11.1.0", 43 | "eslint-plugin-prettier": "^3.1.0", 44 | "eslint-plugin-promise": "^4.1.1", 45 | "eslint-plugin-standard": "^5.0.0", 46 | "prettier": "^2.2.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Important note on Gatsby v3: 2 | 3 | This will **not** work with Gatsby v3 till the [size-plugin](https://github.com/GoogleChromeLabs/size-plugin) supports Webpack v5. 4 | 5 | --- 6 | 7 | # Gatsby Plugin Webpack Size 8 | 9 |

10 | 11 | NPM 12 | 13 |   14 | 15 | NPM downloads 16 | 17 |

18 | 19 | > Implements CI friendly bundle size logging for your production builds. 20 | 21 | ![Screenshot](./screenshot.png) 22 | 23 | ## ☁️ Installation 24 | 25 | ```sh 26 | npm i gatsby-plugin-webpack-size 27 | ``` 28 | 29 | ## 🛫 Setup 30 | 31 | Add `'gatsby-plugin-webpack-size'` to the plugins in your `gatsby-config.js` file. 32 | 33 | ```js 34 | module.exports = { 35 | plugins: [ 36 | `gatsby-plugin-webpack-size` 37 | ] 38 | } 39 | ``` 40 | 41 | ## ⚙️ Configuration 42 | 43 | The only custom option implemented is `development`. All other options are passed to the [size-plugin](https://github.com/GoogleChromeLabs/size-plugin). 44 | 45 | ```js 46 | module.exports = { 47 | plugins: [ 48 | { 49 | resolve: `gatsby-plugin-webpack-size`, 50 | options: { 51 | // Set to true to show bundle sizes in development mode as well 52 | development: true 53 | } 54 | } 55 | ] 56 | } 57 | 58 | ``` 59 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axe312ger/gatsby-plugin-webpack-size/4a3c4f46f02a519ccafbcbb9127357529a6776f2/screenshot.png --------------------------------------------------------------------------------