diff --git a/playground/tree-shaking-test/index.js b/playground/tree-shaking-test/index.js
new file mode 100644
index 000000000..6853fb6d4
--- /dev/null
+++ b/playground/tree-shaking-test/index.js
@@ -0,0 +1,28 @@
+// index.js
+import { createApp } from 'vue'
+import {
+  create,
+  enUS,
+  Button,
+  Input,
+  buttonLight,
+  inputLight
+} from '../../es'
+
+const app = createApp()
+const naive = create({
+  // install components globally or import it in other component are both ok
+  components: [
+    Button,
+    Input
+  ],
+  styles: [
+    buttonLight,
+    inputLight
+  ],
+  locales: [
+    enUS
+  ]
+})
+
+app.use(naive)
diff --git a/playground/tree-shaking-test/rollup.config.js b/playground/tree-shaking-test/rollup.config.js
new file mode 100644
index 000000000..bc83d325d
--- /dev/null
+++ b/playground/tree-shaking-test/rollup.config.js
@@ -0,0 +1,32 @@
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+
+function externalValidator (patterns) {
+  return id => patterns.some(pattern => id.startsWith(pattern))
+}
+
+module.exports = {
+  input: 'playground/tree-shaking-test/index.js',
+  output: [
+    {
+      format: 'esm',
+      dir: 'dist'
+    }
+  ],
+  plugins: [
+    nodeResolve({
+      extensions: ['.js']
+    })
+  ],
+  external: externalValidator([
+    'async-validator',
+    'date-fns',
+    'lodash-es',
+    'vue',
+    'treemate',
+    'css-render',
+    '@css-render/plugin-bem',
+    'vueuc',
+    'vooks',
+    'evtd'
+  ])
+}