性能优化:Cesium 懒加载+后台预载、按需渲染、射线检测节流、城市标签 primitive 化、时间轴纹理跟随可视区域
- Cesium 改为动态加载(vite 插件不再注入 6MB 脚本),首屏零 Cesium 请求 - 首帧渲染后后台预载地理视图,loading 展示 8 秒期间并行,就绪前地理按钮置灰 - Three.js 按需渲染:静止停止重绘,动画/交互/状态变化时渲染 - 射线检测合帧节流,binder 只测当前页±1、时间轴只测可视窗口 - 移除 vignette 的 mix-blend-mode 全屏合成 - 7342 个城市从 entity 改为 PointPrimitiveCollection + LabelCollection - 时间轴懒加载窗口跟随可视区域(拖拽/缩放实时跟随)
This commit is contained in:
+38
-2
@@ -1,6 +1,42 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import cesium from 'vite-plugin-cesium';
|
||||
import fs from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import serveStatic from 'serve-static';
|
||||
|
||||
// Cesium 懒加载:复制静态资源、注入 CSS,但不注入 6MB 的 Cesium.js 脚本——
|
||||
// 脚本由 CesiumGlobe 首次进入“地理”视图时动态加载,避免阻塞首屏。
|
||||
const CESIUM_URL = '/cesium/';
|
||||
|
||||
function cesiumLazy() {
|
||||
let isBuild = false;
|
||||
return {
|
||||
name: 'cesium-lazy',
|
||||
config(_c, { command }) {
|
||||
isBuild = command === 'build';
|
||||
},
|
||||
configureServer({ middlewares }) {
|
||||
// dev:直接静态服务 Cesium 资源(未压缩版便于调试)
|
||||
const dir = path.join(process.cwd(), 'node_modules/cesium/Build/CesiumUnminified');
|
||||
middlewares.use(CESIUM_URL, serveStatic(dir));
|
||||
},
|
||||
async closeBundle() {
|
||||
if (!isBuild) return;
|
||||
const src = path.join(process.cwd(), 'node_modules/cesium/Build/Cesium');
|
||||
const out = path.join(process.cwd(), 'dist', 'cesium');
|
||||
for (const d of ['Assets', 'ThirdParty', 'Workers', 'Widgets']) {
|
||||
await fs.cp(path.join(src, d), path.join(out, d), { recursive: true });
|
||||
}
|
||||
await fs.copyFile(path.join(src, 'Cesium.js'), path.join(out, 'Cesium.js'));
|
||||
},
|
||||
transformIndexHtml() {
|
||||
return [{
|
||||
tag: 'link',
|
||||
attrs: { rel: 'stylesheet', href: `${CESIUM_URL}Widgets/widgets.css` },
|
||||
}];
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [cesium()],
|
||||
plugins: [cesiumLazy()],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user