add FAQ

coder-xiaotian · coder-xiaotian · commit 3e9ec2167a35 · 2023-07-16T23:59:01.000+08:00
diff --git a/README-ZH.md b/README-ZH.md
@@ -54,3 +54,31 @@ swc配置：
   }
 }
 ```
+
+## 常见问题
+
++ swc 插件打断了tree shaking
+
+目前这是一个意料之中的行为，[next团队会在未来改进它](https://github.com/vercel/next.js/issues/52679#issuecomment-1636807256)。可以通过配置modularizeImports暂时解决这个问题：
+```javascript
+const nextConfig = {
+  modularizeImports: {
+    "@mui/material": {
+      transform: "@mui/material/{{member}}"
+    },
+  },
+  experimental: {
+    swcPlugins: [
+      [
+        "use-client",
+        {
+          include: ["@mui/material"],
+        },
+      ],
+    ],
+  },
+};
+```
+注意有些函数是不遵循`@mui/material/{{member}}`规则的，比如：createTheme、ThemeProvider，需要单独处理成这样`import { createTheme, ThemeProvider } from "@mui/material/styles`
+
+🌟🌟🌟🌟如果这个插件对您有用的话，就给作者一个star吧。🙏🙏🙏🌟🌟🌟🌟
diff --git a/README.md b/README.md
@@ -66,3 +66,31 @@ swc configuration:
   }
 }
 ```
+
+## FAQ
+
++ The swc plugin interrupts tree shaking
+
+At present, this is an expected behavior, [The Next.js team will improve it in the future](https://github.com/vercel/next.js/issues/52679#issuecomment-1636807256)。You can temporarily solve this problem by configuring modularizeImports:
+```javascript
+const nextConfig = {
+  modularizeImports: {
+    "@mui/material": {
+      transform: "@mui/material/{{member}}"
+    },
+  },
+  experimental: {
+    swcPlugins: [
+      [
+        "use-client",
+        {
+          include: ["@mui/material"],
+        },
+      ],
+    ],
+  },
+};
+```
+Note that some functions do not follow the '@ mui/material/{{member}}' rule, such as createTheme and ThemeProvider, which need to be processed separately as' import {createTheme, ThemeProvider} from '@ mui/material/styles'`
+
+🌟🌟🌟🌟 If this plugin is helpful to you, give the author a star.🙏🙏🙏🌟🌟🌟🌟
