From 7c8593845830c585a780f4e40268e7b4f442c7a4 Mon Sep 17 00:00:00 2001 From: Joshua Comeau Date: Wed, 31 Jan 2018 08:32:09 -0500 Subject: [PATCH 1/2] Create a `--stats` flag for react-scripts `build`. Update README. To analyze Webpack bundles, a "stats" JSON is required. This PR allows that file to be created and saved to the `build` directory, so that users can use it with Webpack-specific insight tools like `webpack-bundle-analyzer` without ejecting their application. Updated the README to include details for how to do this. --- packages/react-scripts/package.json | 1 + packages/react-scripts/scripts/build.js | 18 ++++++++- packages/react-scripts/template/README.md | 48 +++++++++++++++++++++++ 3 files changed, 65 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 889c14770ea..e5008ca406d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -30,6 +30,7 @@ "babel-loader": "8.0.0-beta.0", "babel-plugin-named-asset-import": "^0.1.0", "babel-preset-react-app": "^3.1.1", + "bfj": "5.2.0", "case-sensitive-paths-webpack-plugin": "2.1.2", "chalk": "2.4.1", "css-loader": "0.28.11", diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index f69400dcf63..599aa32ee4e 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -33,6 +33,7 @@ const path = require('path'); const chalk = require('chalk'); const fs = require('fs-extra'); const webpack = require('webpack'); +const bfj = require('bfj'); const config = require('../config/webpack.config.prod'); const paths = require('../config/paths'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); @@ -55,6 +56,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } +// Process CLI arguments +const argv = process.argv.slice(2); +const writeStatsJson = argv.indexOf('--stats') !== -1; + // We require that you explictly set browsers and do not fall back to // browserslist defaults. const { checkBrowsers } = require('react-dev-utils/browsersHelper'); @@ -161,11 +166,20 @@ function build(previousFileSizes) { ); return reject(new Error(messages.warnings.join('\n\n'))); } - return resolve({ + + const resolveArgs = { stats, previousFileSizes, warnings: messages.warnings, - }); + }; + if (writeStatsJson) { + return bfj + .write(paths.appBuild + '/bundle-stats.json', stats.toJson()) + .then(() => resolve(resolveArgs)) + .catch(error => reject(new Error(error))); + } + + return resolve(resolveArgs); }); }); } diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 437c9f273db..5f604eff75b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2048,6 +2048,14 @@ will affect your users' experience. ## Analyzing the Bundle Size +When your app grows in size, it's easy for bundles to become bloated. The first step to solving large bundles is understanding what's in them! + +There are many different tools available to analyze bundles, but they typically rely on either **sourcemaps** or **webpack-specific JSON stats**. + +### Using Sourcemaps + +When building for production, sourcemaps are automatically created adjacent to the JS files in `build/static/js`. + [Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from. @@ -2082,6 +2090,46 @@ npm run build npm run analyze ``` +### Using Webpack Stats JSON + +> Note: this feature is available with react-scripts@2.0 and higher. + +Webpack can produce a JSON manifest that details the bundles, and several tools can use that file to do analysis. + +Unlike with sourcemaps, the JSON file isn't created automatically on build. You must pass a `--stats` flag: + +```sh +npm run build -- --stats +``` + +Once the build is complete, you should have a JSON file located at `build/bundle-stats.json`. + +The quickest way to get insight into your bundle is to drag and drop that JSON file into [Webpack Visualizer](https://chrisbateman.github.io/webpack-visualizer/). + +Another very popular tool is [`webpack-bundle-analyzer`](https://www.npmjs.com/package/webpack-bundle-analyzer). + +To use `webpack-bundle-analyzer`, start by installing it from NPM: + +```sh +npm install --save webpack-bundle-analyzer +# or, with Yarn: +yarn add webpack-bundle-analyzer +``` + + +In `package.json`, add the following line to `scripts`: + +```diff + "scripts": { ++ "analyze": "npm run build -- --stats && webpack-bundle-analyzer build/bundle-stats.json", + "start": "react-scripts start", + "build": "react-scripts build", + "build:with-stats": "react-scripts build", + "test": "react-scripts test --env=jsdom", +``` + +When you run `npm run analyze`, a new build will be created, and a browser tab should open automatically, displaying the sizes of the modules within your bundle. + ## Deployment `npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. From 80b24d54d9aa63bd637c7025cd872cab4539fabf Mon Sep 17 00:00:00 2001 From: Josh Comeau Date: Sun, 3 Jun 2018 09:04:11 -0400 Subject: [PATCH 2/2] Remove outdated bit from README, update bundle-analyzer link --- packages/react-scripts/template/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5f604eff75b..7fe7de4ba46 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2106,7 +2106,7 @@ Once the build is complete, you should have a JSON file located at `build/bundle The quickest way to get insight into your bundle is to drag and drop that JSON file into [Webpack Visualizer](https://chrisbateman.github.io/webpack-visualizer/). -Another very popular tool is [`webpack-bundle-analyzer`](https://www.npmjs.com/package/webpack-bundle-analyzer). +Another very popular tool is [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer). To use `webpack-bundle-analyzer`, start by installing it from NPM: @@ -2124,7 +2124,6 @@ In `package.json`, add the following line to `scripts`: + "analyze": "npm run build -- --stats && webpack-bundle-analyzer build/bundle-stats.json", "start": "react-scripts start", "build": "react-scripts build", - "build:with-stats": "react-scripts build", "test": "react-scripts test --env=jsdom", ```