docs: add section to describe how to reduce build size (#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
geist-org · 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://localhost:3000](http://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,
   },
Original file line number	Diff line number	Diff line change
		@@ -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>