diff --git a/examples/sites/package.json b/examples/sites/package.json
index e85f6f8af7..2a38d161c0 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -15,6 +15,7 @@
     "build:saas:open": "vite build --mode saasopen",
     "build:saas:prod": "vite build --mode saasprod",
     "build": "vite build --mode pages && cp cp-component-md.sh ./dist",
+    "build:visualizer": "vite build --mode visualizer",
     "build:open": "vite build --mode open",
     "prettier": "npx prettier --write ./**/*.{ts,tsx,css,less,scss,vue}",
     "stylelint": "npx stylelint ./src/**/*.scss ./src/**/*.less ./src/**/*.css --fix",
@@ -56,6 +57,7 @@
     "@opentiny-internal/unplugin-virtual-template": "workspace:~",
     "@opentiny/vue-mobile": "workspace:~",
     "@playwright/test": "~1.42.0",
+    "rollup-plugin-visualizer": "^5.12.0",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.45",
     "@unocss/preset-icons": "^0.38.2",
@@ -82,7 +84,7 @@
     "unocss": "^0.39.3",
     "unplugin-vue-components": "^0.19.9",
     "uslug": "^1.0.4",
-    "vite": "catalog:",
+    "vite": "^4.3.8",
     "vite-plugin-dynamic-import": "1.5.0",
     "vite-plugin-html": "^3.0.0",
     "vite-plugin-inspect": "^0.5.0",
@@ -91,4 +93,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/sites/src/views/components/cmp-config.js b/examples/sites/src/views/components/cmp-config.js
index 94c9124c80..8bd62cf5be 100644
--- a/examples/sites/src/views/components/cmp-config.js
+++ b/examples/sites/src/views/components/cmp-config.js
@@ -1,5 +1,7 @@
 // 批量导入vue组件示例文件, 进行vue组件示例的渲染
 const vueFiles = import.meta.glob(`@demos/app/**/*.vue`)
+
+// 所有demo组件实例
 const vueComponents = Object.create(null)
 for (const path in vueFiles) {
   if (Object.prototype.hasOwnProperty.call(vueFiles, path)) {
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 9a58ea5aad..5fb76eacd3 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -20,84 +20,7 @@
     <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
-          <div v-if="['interfaces', 'types', 'classes'].includes(cmpId)" id="TS" class="all-api-container">
-            <div class="ti-f-c ti-f-wrap api-list">
-              <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
-                <div class="ti-f-r ti-f-pos-start ti-fw-bold">
-                  <div :id="`cmp-${oneGroup.name}`" class="ti-f18">
-                    {{ oneGroup.name }}
-                  </div>
-                  <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">
-                    {{ oneGroup.type }}
-                  </div>
-                </div>
-                <div v-for="(oneApiArr, key) in oneGroup" :key="key">
-                  <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
-                    <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
-                      {{ key }}
-                    </div>
-                    <div class="api-table-box">
-                      <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
-                        <tiny-grid-column
-                          v-if="tableData[oneGroup.name][key][0]?.type"
-                          class-name="api-table-expand-col"
-                          type="expand"
-                          width="32"
-                        >
-                          <template #default="{ row }">
-                            <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
-                          </template>
-                        </tiny-grid-column>
-                        <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
-                          <template #default="{ row }">
-                            <span class="api-table-name">
-                              <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
-                              <span v-else>{{ row.name }}</span>
-                            </span>
-                            <version-tip
-                              v-if="row.meta || row.versionTipOption"
-                              :meta="row.meta"
-                              v-bind="row.versionTipOption"
-                              render-type="tag"
-                              tip-subject="api"
-                            >
-                            </version-tip>
-                          </template>
-                        </tiny-grid-column>
-                        <tiny-grid-column
-                          v-if="tableData[oneGroup.name][key][0]?.type"
-                          field="type"
-                          :title="i18nByKey('propType')"
-                          :width="columnWidth[key][1]"
-                        >
-                          <template #default="{ row }">
-                            <a
-                              v-if="row.typeAnchorName"
-                              :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
-                              v-html="row.type"
-                            ></a>
-                            <span v-else v-html="row.type"></span>
-                          </template>
-                        </tiny-grid-column>
-                        <tiny-grid-column
-                          v-if="key === 'props'"
-                          field="defaultValue"
-                          :title="i18nByKey('defValue')"
-                          :width="columnWidth[key][2]"
-                        ></tiny-grid-column>
-                        <tiny-grid-column field="desc" :title="i18nByKey('desc')">
-                          <template #default="data">
-                            <span v-html="data.row.desc"></span>
-                          </template>
-                        </tiny-grid-column>
-                      </tiny-grid>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </div>
-          </div>
-          <tiny-tabs v-else v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
+          <tiny-tabs v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
             <tiny-tab-item :title="i18nByKey('demos')" name="demos">
               <!-- demos列表 -->
               <template v-if="currJson?.demos?.length">
@@ -106,6 +29,8 @@
                     <demo
                       v-for="demo in currJson.demos"
                       :key="demo.name"
+                      :observer="observer"
+                      :isIntersecting="demo.isIntersecting"
                       :demo="demo"
                       :curr-demo-id="currDemoId"
                       class="mb32"
@@ -113,7 +38,7 @@
                     />
                   </div>
                   <div v-else>
-                    <demo v-if="singleDemo" :key="singleDemo.name" :demo="singleDemo" />
+                    <demo v-if="singleDemo" :isIntersecting="true" :key="singleDemo.name" :demo="singleDemo" />
                   </div>
                 </div>
               </template>
@@ -294,11 +219,10 @@ export default defineComponent({
       webDocPath: computed(() => ''),
       langKey: getWord('zh-CN', 'en-US'),
       cmpId: '',
+      observer: null,
       currJson: { column: 1, demos: [], apis: [], types: {} },
       cmpTopMd: null,
       cmpFAQMd: null,
-      evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
-      oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
       currDemoId: '',
       demoAnchorLinks: computed(() => {
         const links =
@@ -481,6 +405,7 @@ export default defineComponent({
             //  用户打开官网有时候会带一些特殊字符的hash，try catch一下防止js报错
             scrollTarget = document.querySelector(`#${hash}`)
           } catch (err) {}
+
           if (scrollTarget && !isRunningTest) {
             // doc-layout-scoller(滚动) > tabs > tab-content(relative)， 造成  scrollTarget.offsetTop 是相对于 tab-content的距离
             // 所以滚动需要修正 tab-title的占位高度才行
@@ -556,6 +481,12 @@ export default defineComponent({
           // 3、加载cmpId.js 文件
           // eslint-disable-next-line no-eval
           const json = jsData ? eval('(' + jsData.slice(15) + ')') : {}
+
+          // 默认设置每个实例demo都不和视图相交
+          json.demos?.forEach((item) => {
+            item.isIntersecting = false
+          })
+
           state.currJson = {
             ...json,
             demos: $clone(json.demos || []), // 克隆一下,避免保存上次的isOpen
@@ -635,6 +566,27 @@ export default defineComponent({
         if (docLayout) {
           docLayout.addEventListener('scroll', onDocLayoutScroll)
         }
+
+        const options = {
+          root: docLayout,
+          threshold: 0.2
+        }
+
+        const callback = (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              // 当demo示例与视图相交才加载对应的vue组件
+              const demoId = entry.target.id
+              state.currJson.demos.forEach((item) => {
+                if (item.demoId === demoId) {
+                  item.isIntersecting = true
+                }
+              })
+            }
+          })
+        }
+
+        state.observer = new IntersectionObserver(callback, options)
       })
     }
 
@@ -736,6 +688,7 @@ export default defineComponent({
 
     onMounted(() => {
       loadPage()
+      // 加载公共尾部
       const common = new window.TDCommon(['#footer'], {})
       common.renderFooter()
       setScrollListener()
@@ -766,6 +719,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .docs-header {
   padding: 16px 40px;
+  min-height: 102px;
   background-color: #fff;
   box-shadow: 12px 0 20px 6px rgba(0, 0, 0, 0.06);
 
diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index 4c5a1aeae1..1ff9c4ba5b 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/src/views/components/demo.vue
@@ -1,82 +1,100 @@
 <template>
-  <div :id="demo.demoId" class="ti-br-sm ti-wp100" :class="currDemoId === demo.demoId ? 'b-a-success is-current' : ''">
-    <div class="demo-content">
-      <!-- DEMO 的标题 + 说明desc + 示例wcTag -->
-      <div class="ti-f-r ti-f-pos-between ti-f-box-end">
-        <h2 class="demo-title">{{ demo.name[langKey] }}</h2>
-        <div class="demo-options">
-          <tiny-tooltip
-            placement="top"
-            effect="light"
-            popper-class="docs-tooltip"
-            :append-to-body="false"
-            :content="copyTip"
-          >
-            <i
-              :class="copyIcon"
-              class="h:c-success ti-w16 ti-h16 ti-cur-hand"
-              @click="copyCode(demo)"
-              @mouseout="resetTip()"
-            />
-          </tiny-tooltip>
-          <tiny-tooltip
-            placement="top"
-            effect="light"
-            popper-class="docs-tooltip"
-            :append-to-body="false"
-            :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
-          >
-            <i
-              :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
-              class="ti-ml8 h:c-success ti-w16 ti-h16 ti-cur-hand"
-              @click="toggleDemoCode(demo)"
-            />
-          </tiny-tooltip>
-          <tiny-tooltip
-            placement="top"
-            effect="light"
-            popper-class="docs-tooltip"
-            :append-to-body="false"
-            :content="i18nByKey('playground')"
-          >
-            <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
-          </tiny-tooltip>
+  <div ref="demoContainer" :id="demo.demoId" class="demo-container">
+    <div
+      v-if="isIntersecting"
+      class="ti-br-sm ti-wp100"
+      :class="currDemoId === demo.demoId ? 'b-a-success is-current' : ''"
+    >
+      <div class="demo-content">
+        <!-- DEMO 的标题 + 说明desc + 示例wcTag -->
+        <div class="ti-f-r ti-f-pos-between ti-f-box-end">
+          <h2 class="demo-title">{{ demo.name[langKey] }}</h2>
+          <div class="demo-options">
+            <tiny-tooltip
+              placement="top"
+              effect="light"
+              popper-class="docs-tooltip"
+              :append-to-body="false"
+              :content="copyTip"
+            >
+              <i
+                :class="copyIcon"
+                class="h:c-success ti-w16 ti-h16 ti-cur-hand"
+                @click="copyCode(demo)"
+                @mouseout="resetTip()"
+              />
+            </tiny-tooltip>
+            <tiny-tooltip
+              placement="top"
+              effect="light"
+              popper-class="docs-tooltip"
+              :append-to-body="false"
+              :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
+            >
+              <i
+                :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
+                class="ti-ml8 h:c-success ti-w16 ti-h16 ti-cur-hand"
+                @click="toggleDemoCode(demo)"
+              />
+            </tiny-tooltip>
+            <tiny-tooltip
+              placement="top"
+              effect="light"
+              popper-class="docs-tooltip"
+              :append-to-body="false"
+              :content="i18nByKey('playground')"
+            >
+              <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
+            </tiny-tooltip>
+          </div>
         </div>
-      </div>
-      <component :is="getDescMd(demo)" class="demo-desc markdown-body" />
+        <component :is="getDescMd(demo)" class="demo-desc markdown-body" />
 
-      <div v-if="isMobileFirst" class="pc-demo-container">
-        <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
-      </div>
-      <div v-else-if="demoConfig.isMobile" class="phone-container">
-        <div class="mobile-view-container">
-          <component :is="cmp" />
+        <div v-if="isMobileFirst" class="pc-demo-container">
+          <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
         </div>
-      </div>
-      <div v-else class="pc-demo-container">
-        <div class="pc-demo">
-          <component :is="cmp" />
+        <div v-else-if="demoConfig.isMobile" class="phone-container">
+          <div class="mobile-view-container">
+            <component :is="cmp" />
+          </div>
+        </div>
+        <div v-else class="pc-demo-container">
+          <div class="pc-demo">
+            <component :is="cmp" />
+          </div>
         </div>
       </div>
-    </div>
-    <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
-    <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless demo-code">
-      <template v-if="files?.length">
-        <tiny-tabs v-model="tabValue" class="code-tabs">
-          <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
-            <async-highlight :code="file.code"></async-highlight>
-          </tiny-tab-item>
-        </tiny-tabs>
-      </template>
-      <div v-else-if="files[0]">
-        <async-highlight :code="files[0].code"></async-highlight>
+      <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
+      <div v-if="demo.isOpen" class="ti-px24 ti-py20 ti-b-t-lightless demo-code">
+        <template v-if="files?.length">
+          <tiny-tabs v-model="tabValue" class="code-tabs">
+            <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
+              <async-highlight :code="file.code"></async-highlight>
+            </tiny-tab-item>
+          </tiny-tabs>
+        </template>
+        <div v-else-if="files[0]">
+          <async-highlight :code="files[0].code"></async-highlight>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, watch, nextTick, inject, ref } from 'vue'
+import {
+  defineComponent,
+  reactive,
+  computed,
+  toRefs,
+  shallowRef,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick,
+  inject,
+  ref
+} from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, appData, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
@@ -91,7 +109,7 @@ const { apiModeState, apiModeFn } = useApiMode()
 
 export default defineComponent({
   name: 'Demo',
-  props: ['demo', 'currDemoId'],
+  props: ['demo', 'currDemoId', 'observer', 'isIntersecting'],
   emits: ['mounted'],
   components: {
     TinyTooltip,
@@ -133,6 +151,9 @@ export default defineComponent({
       }
       return demo.files
     }
+
+    const demoContainer = ref(null)
+
     const state = reactive({
       tabValue: 'tab0',
       cmpId: router.currentRoute.value.params.cmpId,
@@ -142,7 +163,6 @@ export default defineComponent({
     })
 
     const cmp = shallowRef(null)
-
     const showPreview = inject('showPreview')
 
     const fn = {
@@ -205,23 +225,41 @@ export default defineComponent({
       }
     }
 
-    onMounted(async () => {
-      const demoName = apiModeFn.getDemoName(`${getWebdocPath(state.cmpId)}/${props.demo.codeFiles[0]}`)
-
-      if (vueComponents[demoName]) {
-        cmp.value = (await vueComponents[demoName]()).default
-      } else {
-        const log = `${demoName}示例资源不存在，请检查文件名是否正确？`
-        cmp.value = <div>{log}</div>
+    onMounted(() => {
+      if (demoContainer.value) {
+        props.observer?.observe?.(demoContainer.value)
       }
+
       nextTick(() => {
         emit('mounted')
       })
     })
 
+    onBeforeUnmount(() => {
+      if (demoContainer.value) {
+        props.observer?.unobserve?.(demoContainer.value)
+      }
+    })
+
     const demos = ref(props.demo)
     const files = ref([])
 
+    watch(
+      () => props.isIntersecting,
+      async () => {
+        if (props.isIntersecting) {
+          const demoName = apiModeFn.getDemoName(`${getWebdocPath(state.cmpId)}/${props.demo.codeFiles[0]}`)
+          if (vueComponents[demoName]) {
+            cmp.value = (await vueComponents[demoName]()).default
+          } else {
+            const log = `${demoName}示例资源不存在，请检查文件名是否正确？`
+            cmp.value = <div>{log}</div>
+          }
+        }
+      },
+      { immediate: true }
+    )
+
     watch(
       () => props.demo,
       () => {
@@ -244,12 +282,27 @@ export default defineComponent({
       }
     )
 
-    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst, i18nByKey, files }
+    return {
+      ...toRefs(state),
+      ...fn,
+      appData,
+      vueComponents,
+      demoConfig,
+      cmp,
+      isMobileFirst,
+      i18nByKey,
+      files,
+      demoContainer
+    }
   }
 })
 </script>
 
 <style lang="less" scoped>
+.demo-container {
+  min-height: 200px;
+}
+
 .is-current {
   padding: 20px 24px;
 }
diff --git a/examples/sites/vite.config.ts b/examples/sites/vite.config.ts
index 92e5210165..c82fe871f4 100644
--- a/examples/sites/vite.config.ts
+++ b/examples/sites/vite.config.ts
@@ -14,6 +14,7 @@ import vue3SvgPlugin from 'vite-svg-loader'
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/vite'
 import tailwindCss from 'tailwindcss'
+import { visualizer } from 'rollup-plugin-visualizer'
 import fg from 'fast-glob'
 import fs from 'fs-extra'
 
@@ -117,6 +118,7 @@ export default defineConfig((config) => {
       viteStaticCopy({
         targets: copyTarget
       }),
+      config.mode === 'visualizer' && visualizer({ open: true }),
       delStatic(),
       isInner ? viteDosearchPlugin() : null
     ],