From 637d8bd1d443da40cd7cde8cd1414773fa1024dd Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 5 Jun 2018 13:57:03 +0100 Subject: [PATCH] Temporarily remove doc section on webpack analyzer --- packages/react-scripts/template/README.md | 47 ----------------------- 1 file changed, 47 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7fe7de4ba46..437c9f273db 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2048,14 +2048,6 @@ 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. @@ -2090,45 +2082,6 @@ 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://github.com/webpack-contrib/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", - "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.