From 3692e7b9f4434d9118c39e14130edacdff69bd2c Mon Sep 17 00:00:00 2001 From: Kristofer Selbekk Date: Sun, 7 Oct 2018 19:10:09 +0200 Subject: [PATCH] Move analyzing the bundle size into its own file --- docusaurus/docs/analyzing-the-bundle-size.md | 39 ++++++++++++++++++++ docusaurus/docs/user-guide.md | 37 ------------------- docusaurus/website/sidebars.json | 3 +- 3 files changed, 41 insertions(+), 38 deletions(-) create mode 100644 docusaurus/docs/analyzing-the-bundle-size.md diff --git a/docusaurus/docs/analyzing-the-bundle-size.md b/docusaurus/docs/analyzing-the-bundle-size.md new file mode 100644 index 00000000..9c18be20 --- /dev/null +++ b/docusaurus/docs/analyzing-the-bundle-size.md @@ -0,0 +1,39 @@ +--- +id: analyzing-the-bundle-size +title: Analyzing the Bundle Size +sidebar_label: Analyzing bundle size +--- + +[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. + +To add Source map explorer to a Create React App project, follow these steps: + +```sh +npm install --save source-map-explorer +``` + +Alternatively you may use `yarn`: + +```sh +yarn add source-map-explorer +``` + +Then in `package.json`, add the following line to `scripts`: + +```diff + "scripts": { ++ "analyze": "source-map-explorer build/static/js/main.*", + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", +``` + +Then to analyze the bundle run the production build then run the analyze +script. + +``` +npm run build +npm run analyze +``` diff --git a/docusaurus/docs/user-guide.md b/docusaurus/docs/user-guide.md index cc04f80a..b4414cbb 100644 --- a/docusaurus/docs/user-guide.md +++ b/docusaurus/docs/user-guide.md @@ -54,7 +54,6 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Why Opt-in?](#why-opt-in) - [Offline-First Considerations](#offline-first-considerations) - [Progressive Web App Metadata](#progressive-web-app-metadata) -- [Analyzing the Bundle Size](#analyzing-the-bundle-size) - [Advanced Configuration](#advanced-configuration) - [Alternatives to Ejecting](#alternatives-to-ejecting) @@ -1119,42 +1118,6 @@ work offline when there's an active service worker. That being said, the metadata from the web app manifest will still be used regardless of whether or not you opt-in to service worker registration. -## Analyzing the Bundle Size - -[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. - -To add Source map explorer to a Create React App project, follow these steps: - -```sh -npm install --save source-map-explorer -``` - -Alternatively you may use `yarn`: - -```sh -yarn add source-map-explorer -``` - -Then in `package.json`, add the following line to `scripts`: - -```diff - "scripts": { -+ "analyze": "source-map-explorer build/static/js/main.*", - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", -``` - -Then to analyze the bundle run the production build then run the analyze -script. - -``` -npm run build -npm run analyze -``` - ## Advanced Configuration You can adjust various development and production settings by setting environment variables in your shell or with [.env](#adding-development-environment-variables-in-env). diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index 1b4fa7f6..68e87f0b 100644 --- a/docusaurus/website/sidebars.json +++ b/docusaurus/website/sidebars.json @@ -6,7 +6,8 @@ "lint-output-in-the-editor", "debugging-in-the-editor", "formatting-code-automatically", - "proxying-api-requests-in-development" + "proxying-api-requests-in-development", + "analyzing-the-bundle-size" ], "Testing": ["running-tests", "debugging-tests"], "Deployment": ["publishing-components-to-npm", "deployment"],