perf(common): Make the twMeger function support shake tree (#1116)

* perf(common): add twMerge tree shake

* fix(common): fix review

* docs(install): add TINY_MODE’s sample

examples/sites/demos/pc/webdoc/installation-en.md

@@ -34,7 +34,7 @@ npm install @opentiny/vue@2
 If it's`Vite`After the dependency is installed, modify the project.`vite.config.js`, add the following code highlighted section:
 
 ```js {8-10}
-//vite.config.js
+// vite.config.js
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -52,6 +52,11 @@ export default defineConfig({
 <p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
 For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
 </div>
+<div class="tip custom-block">
+<br>
+<p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+</div>
+
 ### Import through CDN
 
 In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN,you are advised to write two valid version numbers as follows.

examples/sites/demos/pc/webdoc/installation.md

@@ -52,6 +52,10 @@ export default defineConfig({
   <p>为了避免<code> @opentiny/vue </code> 的月度版本(minor)升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
     比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
 </div>
+<div class="tip custom-block">
+  <br>
+  <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { ...process.env,TINY_MODE:'pc' }</code>。</p>
+</div>
 
 ### 通过 CDN 方式引入
 

packages/vue-common/src/index.ts

@@ -109,7 +109,7 @@ export const $setup = ({ props, context, template, extend = {} }) => {
   return renderComponent({ view, props, context, extend })
 }
 
-export const mergeClass = (...cssClasses) => twMerge(stringifyCssClass(cssClasses))
+export const mergeClass = /* @__PURE__ */ (...cssClasses) => twMerge(stringifyCssClass(cssClasses))
 
 // 提供给没有renderless层的组件使用（比如TinyVuePlus组件）
 export const design = {
@@ -144,10 +144,12 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
     $prefix,
     t,
     ...tools(context, resolveMode(props, context)),
-    mergeClass,
     designConfig,
     globalDesignConfig
   }
+  if (process.env.TINY_MODE !== 'pc') {
+    utils.mergeClass = mergeClass
+  }
 
   resolveTheme({ props, context, utils })
   resolveChartTheme({ props, context, utils })
@@ -165,10 +167,11 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
     a: filterAttrs,
     d: utils.defineInstanceProperties,
     dp: utils.defineParentInstanceProperties,
-    gcls: (key) => getElementCssClass(classes, key),
-    m: mergeClass
+    gcls: (key) => getElementCssClass(classes, key)
+  }
+  if (process.env.TINY_MODE !== 'pc') {
+    attrs.m = mergeClass
   }
-
   /**
    * 修复 render 函数下 this.slots 不会动态更新的问题（vue3 环境没有问题）
    * 解决方法：在 instance 下注入 slots、scopedSlots
@@ -215,9 +218,12 @@ export const svg = ({ name = 'Icon', component }) => {
           const isMobileFirst = mode === 'mobile-first'
           const tinyTag = { 'data-tag': isMobileFirst ? 'tiny-svg' : null }
           const attrs = isVue3 ? tinyTag : { attrs: tinyTag }
-          const className = isMobileFirst
-            ? mergeClass('h-4 w-4 inline-block', customClass || '', mergeProps.class || '')
-            : 'tiny-svg'
+          let className = 'tiny-svg'
+
+          if (process.env.TINY_MODE !== 'pc' && isMobileFirst) {
+            className = mergeClass('h-4 w-4 inline-block', customClass || '', mergeProps.class || '')
+          }
+
           const extend = Object.assign(
             {
               style: { fill, width, height },
@@ -266,6 +272,7 @@ export const filterAttrs = (attrs, filters, include) => {
   return props
 }
 
+// eslint-disable-next-line import/no-mutable-exports
 export let setupComponent = {}
 
 export const initComponent = () => {