chore(examples): add example for tree-shaking with next

2026-03-26 22:42:51 +08:00 · 2020-06-10 10:46:05 +08:00
parent e43d425815
commit 69c8d5e693
10 changed files with 151 additions and 0 deletions
--- a/examples/tree-shaking-nextjs/.babelrc
+++ b/examples/tree-shaking-nextjs/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "@zeit-ui/react",
+        "libraryDirectory": "esm"
+      }
+    ]
+  ]
+}
--- a/examples/tree-shaking-nextjs/README.md
+++ b/examples/tree-shaking-nextjs/README.md
@@ -0,0 +1,53 @@
+# Tree shaking with Next.js
+
+## About
+
+This is example of `tree-shaking` for [next.js](https://nextjs.com/). Note that `@next/bundle-analyzer` is not required.
+
+## 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 `zeit-ui/react` 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 `zeit-ui/react` 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 porject, bundle `zeit-ui/react` 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 `zeit-ui/react` is always the same,
+you can refer to [this docuemnt](https://webpack.js.org/guides/code-splitting/).
--- a/examples/tree-shaking-nextjs/next.config.js
+++ b/examples/tree-shaking-nextjs/next.config.js
@@ -0,0 +1,6 @@
+const withTM = require('next-transpile-modules')(['@zeit-ui/react'])
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+module.exports = withTM(withBundleAnalyzer({}))
--- a/examples/tree-shaking-nextjs/package.json
+++ b/examples/tree-shaking-nextjs/package.json
@@ -0,0 +1,22 @@
+{
+  "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": {
+    "@zeit-ui/react": "latest",
+    "next": "9.4.2",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^9.4.4",
+    "babel-plugin-import": "^1.13.0",
+    "next-transpile-modules": "^3.3.0"
+  }
+}
--- a/examples/tree-shaking-nextjs/pages/_app.js
+++ b/examples/tree-shaking-nextjs/pages/_app.js
@@ -0,0 +1,11 @@
+import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ZeitProvider>
+      <CssBaseline />
+      <Component {...pageProps} />
+    </ZeitProvider>
+  )
+}
+export default MyApp
--- a/examples/tree-shaking-nextjs/pages/_document.js
+++ b/examples/tree-shaking-nextjs/pages/_document.js
@@ -0,0 +1,33 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { CssBaseline } from '@zeit-ui/react'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = CssBaseline.flush()
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {styles}
+        </>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
--- a/examples/tree-shaking-nextjs/pages/index.js
+++ b/examples/tree-shaking-nextjs/pages/index.js
@@ -0,0 +1,12 @@
+import { Page, Text, Button } from '@zeit-ui/react'
+
+export default function Home() {
+  return (
+    <Page>
+      <Text h1>
+        Welcome to <a href="https://nextjs.org">Next.js!</a>
+      </Text>
+      <Button>hello</Button>
+    </Page>
+  )
+}
--- a/examples/tree-shaking-nextjs/public/favicon.ico
+++ b/examples/tree-shaking-nextjs/public/favicon.ico
--- a/examples/tree-shaking-nextjs/public/output-after.png
+++ b/examples/tree-shaking-nextjs/public/output-after.png
--- a/examples/tree-shaking-nextjs/public/output-before.png
+++ b/examples/tree-shaking-nextjs/public/output-before.png