diff --git a/.gitignore b/.gitignore
index 84b86be8a..94309474e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ es
 coverage
 /fonts
 /site
+/src-mirror
diff --git a/build/before-build.js b/build/before-build.js
new file mode 100644
index 000000000..6a082c530
--- /dev/null
+++ b/build/before-build.js
@@ -0,0 +1,67 @@
+const fs = require('fs-extra')
+const path = require('path')
+const rollup = require('rollup')
+const vuePlugin = require('rollup-plugin-vue')
+
+const srcDir = path.resolve(__dirname, '../src')
+const srcMirrorDir = path.resolve(__dirname, '../src-mirror')
+const projectDir = path.resolve(__dirname, '..')
+
+async function findAndReplace (filePath, pattern, target) {
+  const content = (await fs.readFile(filePath)).toString()
+  if (pattern.test(content)) {
+    await fs.writeFile(filePath, content.replace(pattern, target))
+  }
+}
+
+async function traverse (root) {
+  const dir = await fs.opendir(root)
+  for await (const dirent of dir) {
+    const { name } = dirent
+    if (dirent.isDirectory()) {
+      await traverse(path.resolve(root, dirent.name))
+    } else {
+      const filePath = path.resolve(root, name)
+      // change all vue import to js
+      await findAndReplace(filePath, /\.vue/g, '.js')
+      // build js output for vue file
+      if (filePath.endsWith('.vue')) {
+        console.log('make', filePath.replace(projectDir, ''))
+        const rollupInputOptions = {
+          input: filePath,
+          external: (id) => {
+            return !/\.vue\?vue/.test(id)
+          },
+          plugins: [
+            vuePlugin({
+              file: false
+            })
+          ]
+        }
+        const rollupOutputOptions = {
+          format: 'esm',
+          file: filePath.replace(/\.vue$/, '.js')
+        }
+        const bundle = await rollup.rollup(rollupInputOptions)
+        await bundle.write(rollupOutputOptions)
+        // remove original file
+        await fs.unlink(filePath)
+      }
+    }
+  }
+}
+
+;(async () => {
+  try {
+    if (await fs.pathExists(srcMirrorDir)) {
+      await fs.emptyDir(srcMirrorDir)
+      await fs.remove(srcMirrorDir)
+    }
+    await fs.mkdir(srcMirrorDir)
+    await fs.copy(srcDir, srcMirrorDir)
+    await fs.emptyDir(path.resolve(srcMirrorDir, '_deprecated/icons'))
+    traverse(srcMirrorDir)
+  } catch (err) {
+    console.log(err)
+  }
+})()
diff --git a/build/build-icons.js b/build/build-icons.js
index 447d7545c..26d37ce93 100644
--- a/build/build-icons.js
+++ b/build/build-icons.js
@@ -4,27 +4,10 @@
 // warning info should be added
 // using `vicons` is a recommend way for users to use icons
 
-const fs = require('fs')
+const fs = require('fs-extra')
 const path = require('path')
-const rollup = require('rollup')
-const { plugins, external } = require('../rollup.config')
-const { camelCase, upperFirst } = require('lodash')
 
 const iconPath = path.resolve(__dirname, '..', 'src', '_deprecated', 'icons')
-const iconNames = fs.readdirSync(iconPath).filter(name => name.endsWith('.vue'))
-
-const iconIndex =
-  iconNames.map((iconName) => `import ${upperFirst(camelCase(iconName.match(/.*(?=.vue)/)[0]))} from './${iconName}'`).join('\n') +
-  '\n\nexport {\n' +
-  iconNames.map((iconName) => `  ${upperFirst(camelCase(iconName.match(/.*(?=.vue)/)[0]))},`).join('\n') +
-  '\n}'
-
-const iconIndexPath = path.resolve(iconPath, 'index.js')
-
-fs.writeFileSync(
-  iconIndexPath,
-  iconIndex
-)
 
 const cjsIconPath = path.resolve(__dirname, '..', 'lib', 'icons')
 const esmIconPath = path.resolve(__dirname, '..', 'es', 'icons')
@@ -36,54 +19,6 @@ function createDirIfNotExists (...args) {
 }
 
 createDirIfNotExists(__dirname, '../lib')
-createDirIfNotExists(__dirname, '../lib', 'icons')
+fs.copySync(iconPath, cjsIconPath)
 createDirIfNotExists(__dirname, '../es')
-createDirIfNotExists(__dirname, '../es', 'icons')
-
-;(async () => {
-  const bundle = await rollup
-    .rollup({
-      input: path.resolve(iconPath),
-      preserveModules: true,
-      plugins,
-      external
-    })
-  const vueExtRegex = /\.vue\.js/g
-  const cjsOutputOptions = {
-    format: 'cjs',
-    dir: cjsIconPath,
-    exports: 'auto'
-  }
-  const esmOutputOptions = {
-    format: 'esm',
-    dir: esmIconPath
-  }
-  const { output: cjsOutput } = await bundle.generate(cjsOutputOptions)
-  cjsOutput.forEach((file, index) => {
-    const code = file.code.replace(vueExtRegex, '.js')
-    const fileName = file.fileName.replace(vueExtRegex, '.js')
-    fs.writeFile(
-      path.resolve(cjsIconPath, fileName),
-      code,
-      (err) => {
-        if (err) {
-          console.log(err)
-        }
-      }
-    )
-  })
-  const { output: esmOutput } = await bundle.generate(esmOutputOptions)
-  esmOutput.forEach((file, index) => {
-    const code = file.code.replace(vueExtRegex, '.js')
-    const fileName = file.fileName.replace(vueExtRegex, '.js')
-    fs.writeFile(
-      path.resolve(esmIconPath, fileName),
-      code,
-      (err) => {
-        if (err) {
-          console.log(err)
-        }
-      }
-    )
-  })
-})()
+fs.copySync(iconPath, esmIconPath)
diff --git a/package.json b/package.json
index acc204e85..68228f8cd 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,11 @@
   "scripts": {
     "start": "npm run dev",
     "build:icons": "npm run clean && node build/build-icons.js",
-    "build:js": "npm run generate-version && npm run clean && rollup -c",
-    "build:package": "npm run generate-version && npm run clean && node build/build-icons.js && rollup -c",
+    "build:js": "npm run generate-version && npm run clean && node build/before-build.js && rollup -c",
+    "build:package": "npm run generate-version && npm run clean && node build/build-icons.js && node build/before-build.js && rollup -c",
     "build:site": "npm run generate-version && npm run build:package && rm -rf dist && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build",
     "build:doc": "npm run generate-version && npm run build && rm -rf build-doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js",
-    "clean": "rm -rf lib && rm -rf es && rm -rf dist",
+    "clean": "rm -rf lib && rm -rf es && rm -rf dist && rm -rf src-mirror",
     "dev": "npm run generate-version && cross-env NODE_ENV=development vite",
     "dev:ts": "npm run generate-version && cross-env NODE_ENV=development TUSIMPLE=true vite",
     "lint": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\" && stylelint \"src/_styles/**/*.scss\"",
@@ -59,6 +59,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.2",
     "eslint-plugin-vue": "^7.1.0",
+    "fs-extra": "^9.0.1",
     "jest": "^26.6.2",
     "lodash": "^4.17.20",
     "marked": "^1.2.0",
diff --git a/rollup.config.js b/rollup.config.js
index dfb81fde4..d3f14a035 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,3 @@
-const vuePlugin = require('rollup-plugin-vue')
 const cssRenderPlugin = require('./build/rollup-plugin-css-render')
 const { nodeResolve } = require('@rollup/plugin-node-resolve')
 const { terser } = require('rollup-plugin-terser')
@@ -10,7 +9,7 @@ function externalValidator (patterns) {
 
 // do not use babel when build library, use it when only build the site
 module.exports = {
-  input: 'src/index.js',
+  input: 'src-mirror/index.js',
   output: [
     {
       format: 'cjs',
@@ -29,10 +28,9 @@ module.exports = {
       __DEV__: 'process.env.NODE_ENV !== "production"'
     }),
     nodeResolve({
-      extensions: ['.js', '.json', '.vue']
+      extensions: ['.js', '.json']
     }),
     cssRenderPlugin(),
-    vuePlugin(),
     terser({
       mangle: false,
       output: {