docs: add section to describe how to reduce build size (geist-org#748)

* chore(examples): update tree-shaking for webpack project * chore(examples): simplify the config of tree-shaking for webpack 5 * docs: add section to describe how to reduce build size
jotoh98 · Feb 18, 2022 · 6b1fc8d · 6b1fc8d
1 parent e7be5d9
commit 6b1fc8d
Show file tree

Hide file tree

Showing 31 changed files with 258 additions and 247 deletions.
diff --git a/examples/tree-shaking-create-react-app/README.md b/examples/tree-shaking-create-react-app/README.md
@@ -1,23 +1,3 @@
 ## Tree shaking for create react app
 
-This is example of `tree-shaking` for [create-react-app](https://github.com/facebook/create-react-app).
-By default, we do not `eject` configs from `create-react-app`, in this example,
-we use [react-app-rewired](https://github.com/timarney/react-app-rewired) to change the default configs.
-
-### About
-
-- Add `config-overrides.js` to your root folder.
-- Add deps: `yarn add babel-plugin-import customize-cra react-app-rewired -D`
-- Replace your default scripts(`react-scripts`) with `react-app-rewired`.
-
-### Previews
-
-**Before:**
-
-![before](public/esm-1.png)
-
-<br />
-
-**After:**
-
-![after](public/esm-2.png)
+Full tree-shaking is automatically available without any configuration when using `react-scripts 5.0.0` or higher. (`webpack > 5.0`)
diff --git a/examples/tree-shaking-create-react-app/build/asset-manifest.json b/examples/tree-shaking-create-react-app/build/asset-manifest.json
@@ -0,0 +1,10 @@
+{
+ "files": {
+ "main.js": "/static/js/main.c0df7028.js",
+ "index.html": "/index.html",
+ "main.c0df7028.js.map": "/static/js/main.c0df7028.js.map"
+ },
+ "entrypoints": [
+ "static/js/main.c0df7028.js"
+ ]
+}
diff --git a/...shaking-create-react-app/public/esm-1.png → ...-shaking-create-react-app/build/esm-1.png b/...shaking-create-react-app/public/esm-1.png → ...-shaking-create-react-app/build/esm-1.png
diff --git a/...shaking-create-react-app/public/esm-2.png → ...-shaking-create-react-app/build/esm-2.png b/...shaking-create-react-app/public/esm-2.png → ...-shaking-create-react-app/build/esm-2.png
diff --git a/examples/tree-shaking-create-react-app/build/index.html b/examples/tree-shaking-create-react-app/build/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Tree Shaking</title><script defer="defer" src="/static/js/main.c0df7028.js"></script></head><body><div id="app"></div></body></html>
diff --git a/examples/tree-shaking-create-react-app/build/static/js/main.c0df7028.js b/examples/tree-shaking-create-react-app/build/static/js/main.c0df7028.js
diff --git a/examples/tree-shaking-create-react-app/build/static/js/main.c0df7028.js.LICENSE.txt b/examples/tree-shaking-create-react-app/build/static/js/main.c0df7028.js.LICENSE.txt
@@ -0,0 +1,41 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/examples/tree-shaking-create-react-app/config-overrides.js b/examples/tree-shaking-create-react-app/config-overrides.js
diff --git a/examples/tree-shaking-create-react-app/package.json b/examples/tree-shaking-create-react-app/package.json
@@ -4,22 +4,19 @@
  "main": "index.js",
  "license": "MIT",
  "scripts": {
- "dev": "react-app-rewired start",
- "build": "react-app-rewired build",
+ "dev": "react-scripts start",
+ "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
  "analyze": "source-map-explorer 'build/static/js/*.js'"
  },
  "dependencies": {
  "@geist-ui/core": "latest",
- "react": "^16.13.1",
- "react-dom": "^16.13.1"
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
  },
  "devDependencies": {
- "@types/react": "^16.9.32",
- "@types/react-dom": "^16.9.6",
- "babel-plugin-import": "^1.13.0",
- "customize-cra": "^0.9.1",
- "react-app-rewired": "^2.1.6",
- "react-scripts": "^3.4.1",
+ "@types/react": "^17.0.39",
+ "@types/react-dom": "^17.0.11",
+ "react-scripts": "^5.0.0",
  "source-map-explorer": "^2.4.2"
  },
  "browserslist": {

diff --git a/examples/tree-shaking-nextjs/.babelrc b/examples/tree-shaking-nextjs/.babelrc
diff --git a/examples/tree-shaking-nextjs/README.md b/examples/tree-shaking-nextjs/README.md
@@ -2,52 +2,6 @@
 
 ## About
 
-This is example of `tree-shaking` for [next.js](https://nextjs.com/). Note that `@next/bundle-analyzer` is not required.
+Full tree-shaking is automatically available without any configuration when using `next.js 11.0.0` or higher. (`webpack > 5.0`)
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http:https://localhost:3000](http:https://localhost:3000) with your browser to see the result.
-
-**Run the following command to see the size of the bundle:**
-
-```bash
-npm run analyze
-# or
-yarn analyze
-```
-
-## Preview
-
-If we don't do anything, the volume of `geist-ui` is about `58kb`, note that **the volume here includes lib `styled-jsx`**.
-It means that even if you use lib `styled-jsx` again, the volume will not increase.
-
-At present, it seems that this volume of component library is still acceptable:
-
-![output-before](public/output-before.png)
-
-<br/>
-
-**When we use `tree shaking`:**
-
-The volume of `geist-ui` is about `13kb`.(It consists of two parts)
-It should be noted that the specific package size depends on how many components you use.
-
-![output-after](public/output-after.png)
-
-## Other
-
-If you don't use `tree shaking` in your project, bundle `geist-ui` as a `chunk`
-every time, you may notice that the hash name of `chunk` is still changing,
-this may cause you to not make full use of the cache.
-
-- This issue from `next.js`, and they're improving that, you can track progress [here](https://github.com/vercel/next.js/issues/6303).
-- If you want to customize config of webpack, to ensure that the `chunk` from `geist-ui` is always the same,
- you can refer to [this document](https://webpack.js.org/guides/code-splitting/).
+In this example, run `yarn analyze` to see the results of the build.
diff --git a/examples/tree-shaking-nextjs/next.config.js b/examples/tree-shaking-nextjs/next.config.js
@@ -1,6 +1,9 @@
-const withTM = require('next-transpile-modules')(['@geist-ui/core'])
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
 })
 
-module.exports = withTM(withBundleAnalyzer({}))
+module.exports = withBundleAnalyzer({
+ eslint: {
+ ignoreDuringBuilds: true,
+ },
+})
diff --git a/examples/tree-shaking-nextjs/package.json b/examples/tree-shaking-nextjs/package.json
@@ -1,22 +1,19 @@
 {
  "name": "tree-shaking-nextjs",
  "version": "0.1.0",
- "private": true,
  "scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
- "@geist-ui/core": "latest",
- "next": "9.4.2",
- "react": "16.13.1",
- "react-dom": "16.13.1"
+ "@geist-ui/core": "^2.3.3",
+ "next": "^12.1.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
  },
  "devDependencies": {
- "@next/bundle-analyzer": "^9.4.4",
- "babel-plugin-import": "^1.13.0",
- "next-transpile-modules": "^3.3.0"
+ "@next/bundle-analyzer": "^9.4.4"
  }
 }
diff --git a/examples/tree-shaking-nextjs/public/output-after.png b/examples/tree-shaking-nextjs/public/output-after.png
diff --git a/examples/tree-shaking-nextjs/public/output-before.png b/examples/tree-shaking-nextjs/public/output-before.png
diff --git a/examples/tree-shaking-webpack/.babelrc b/examples/tree-shaking-webpack/.babelrc
@@ -1,4 +1,3 @@
 {
- "presets": ["@babel/preset-env", "@babel/preset-react"],
- "plugins": [["import", { "libraryName": "@geist-ui/core", "libraryDirectory": "esm" }]]
+ "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
diff --git a/examples/tree-shaking-webpack/README.md b/examples/tree-shaking-webpack/README.md
@@ -2,16 +2,16 @@
 
 ### About
 
-If you use `webpack` and `babel` to build your React project, this example may be useful for you.
+Full tree-shaking is automatically available without any configuration when using `webpack 5.0` or higher.
 
 ### Previews
 
 **Before:**
 
-![before](esm-1.png)
+![before](tree-shaking-before.png)
 
 <br />
 
 **After:**
 
-![after](esm-2.png)
+![after](tree-shaking-after.png)
diff --git a/examples/tree-shaking-webpack/esm-1.png b/examples/tree-shaking-webpack/esm-1.png
diff --git a/examples/tree-shaking-webpack/esm-2.png b/examples/tree-shaking-webpack/esm-2.png
diff --git a/examples/tree-shaking-webpack/package.json b/examples/tree-shaking-webpack/package.json
@@ -5,24 +5,24 @@
  "license": "MIT",
  "scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
- "build": "webpack --config ./webpack.config.js",
- "analyze": "source-map-explorer 'dist/*.js'"
+ "build": "webpack --config ./webpack.config.js --mode production",
+ "analyze": "source-map-explorer 'dist/*.js' --gzip"
  },
+ "sideEffects": false,
  "devDependencies": {
- "@babel/core": "^7.9.6",
- "@babel/preset-env": "^7.9.6",
- "@babel/preset-react": "^7.9.4",
- "babel-loader": "^8.1.0",
- "babel-plugin-import": "^1.13.0",
- "html-webpack-plugin": "^4.3.0",
- "source-map-explorer": "^2.4.2",
- "webpack": "^4.43.0",
- "webpack-cli": "^3.3.11",
- "webpack-dev-server": "^3.11.0"
+ "@babel/core": "^7.17.5",
+ "@babel/preset-env": "^7.16.11",
+ "@babel/preset-react": "^7.16.7",
+ "babel-loader": "^8.2.3",
+ "html-webpack-plugin": "^5.5.0",
+ "source-map-explorer": "^2.5.2",
+ "webpack": "^5.69.1",
+ "webpack-cli": "^4.9.2",
+ "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
- "@geist-ui/core": "latest",
- "react": "^16.13.1",
- "react-dom": "^16.13.1"
+ "@geist-ui/core": "^2.3.3",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
  }
 }
diff --git a/examples/tree-shaking-webpack/tree-shaking-after.png b/examples/tree-shaking-webpack/tree-shaking-after.png
diff --git a/examples/tree-shaking-webpack/tree-shaking-before.png b/examples/tree-shaking-webpack/tree-shaking-before.png
diff --git a/examples/tree-shaking-webpack/webpack.config.js b/examples/tree-shaking-webpack/webpack.config.js
@@ -29,11 +29,14 @@ module.exports = {
  plugins: [
  new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') }),
  ],
+
+ optimization: {
+ usedExports: true,
+ },
 
  devServer: {
  host: '127.0.0.1',
  port: '3000',
- contentBase: './dist',
  hot: true,
  open: true,
  },