From 9ab235a4c107bc16a62f8dc9832f12a2e5eabf3e Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 28 Dec 2024 18:07:29 +0800 Subject: [PATCH 1/2] feat(site): optimize the performance of the official website, use lazy loading for document examples --- examples/sites/package.json | 7 +- .../sites/src/views/components/cmp-config.js | 2 + .../sites/src/views/components/components.vue | 116 +++------- examples/sites/src/views/components/demo.vue | 209 +++++++++++------- examples/sites/vite.config.ts | 2 + 5 files changed, 174 insertions(+), 162 deletions(-) diff --git a/examples/sites/package.json b/examples/sites/package.json index e85f6f8af7..9e45977f7f 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", @@ -54,8 +55,8 @@ }, "devDependencies": { "@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 +83,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 +92,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 @@
-
-
-
-
-
- {{ oneGroup.name }} -
-
- {{ oneGroup.type }} -
-
-
- -
-
-
-
- + @@ -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({