feat: babylon和cesium懒加载及打包优化

2025-02-14 10:36:45 +08:00 · 2025-02-14 10:36:45 +08:00 · 1b5cbcdad0
parent 9558079588
commit 1b5cbcdad0
10 changed files with 213 additions and 97 deletions
--- a/package.json
+++ b/package.json
@ -17,9 +17,11 @@
 		"babylonjs": "^6.46.0",
 		"babylonjs-gui": "^6.46.0",
 		"babylonjs-loaders": "^6.46.0",
-		"cesium": "1.75",
+		"cesium": "^1.126.0",
 		"codemirror": "^5.65.17",
 		"codemirror-editor-vue3": "^2.7.0",
+		"compression-webpack-plugin": "^11.1.0",
+		"copy-webpack-plugin": "^12.0.2",
 		"core-js": "3.29.0",
 		"cropperjs": "1.5.13",
 		"crypto-browserify": "^3.12.0",
@ -37,6 +39,7 @@
 		"moment": "^2.30.1",
 		"node-polyfill-webpack-plugin": "^4.0.0",
 		"nprogress": "0.2.0",
+		"path": "^0.12.7",
 		"print-js": "^1.6.0",
 		"qrcodejs2": "0.0.2",
 		"sortablejs": "1.15.0",
--- a/src/main.js
+++ b/src/main.js
@ -16,14 +16,11 @@ import jsBarCode from "./utils/jsBarCode";
 import DataVVue3 from "@kjgl77/datav-vue3";
 import htmlToPdf from "./utils/htmlToPdf";

-import * as Cesium from "cesium";
-
 const app = createApp(App);

 app.use(store);
 app.use(router);
 app.use(ElementPlus);
-app.use(Cesium);
 app.use(i18n);
 app.use(scui);
 app.use(xtui);
--- a/src/views/bigScreen/cesiumtest.vue
+++ b/src/views/bigScreen/cesiumtest.vue
@ -269,9 +269,18 @@
 </template>
 <script>
 import tool from "@/utils/tool";
-import * as Cesium from "cesium";
 import * as echarts from "echarts";
 import cems from "./enpComponents/cems.vue";
+
+window.CESIUM_BASE_URL = '/cesium';
+let Cesium;
+const loadCesium = async () => {
+	if (Cesium) return;
+	await import("cesium/Build/Cesium/Widgets/widgets.css");
+	Cesium = await import('cesium');
+	Cesium.Ion.defaultAccessToken =
+			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
+}
 export default {
 	name: "cesium",
 	props: ["activeIndex"],
@ -442,17 +451,20 @@ export default {
 		};
 	},
 	created() {
-		const scriptInfo = document.createElement("script");
-		scriptInfo.setAttribute("data-callType", "callScript");
-		scriptInfo.src =
-			"https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
-		document.head.appendChild(scriptInfo);
+		// const scriptInfo = document.createElement("script");
+		// scriptInfo.setAttribute("data-callType", "callScript");
+		// scriptInfo.src =
+		// 	"https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
+		// document.head.appendChild(scriptInfo);
 	},
 	mounted() {
+		loadCesium().then(res=>{
+			this.initView();
+		})
+	},
+	methods: {
+		initView() {
 			let that = this;
-		Cesium.Ion.defaultAccessToken =
-			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
-
 		const viewer = new Cesium.Viewer("cesiumContainer", {
 			animation: false, //动画小部件
 			baseLayerPicker: false, //地图图层组件
@ -574,7 +586,6 @@ export default {
 			}
 		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 		},
-	methods: {
 		//单独加载树
 		setTrees(viewer, orientation) {
 			this.modelPosition.forEach((item) => {
--- a/src/views/bigScreen/index_enm.vue
+++ b/src/views/bigScreen/index_enm.vue
@ -271,20 +271,27 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import * as BABYLON from "babylonjs";
-import * as BABYLON_GUI from "babylonjs-gui";
-import * as BABYLON_GRID from "@/utils/gridMaterial";
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
 import value from "./../enm_energy/value.vue";
 import config from "@/config";
-BABYLON.DracoCompression.Configuration.decoder.wasmUrl =
-	"./draco_wasm_wrapper_gltf.js";
-BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl =
-	"./draco_decoder_gltf.wasm";
-BABYLON.DracoCompression.Configuration.decoder.fallbackUrl =
-	"./draco_decoder_gltf.js";
-import "babylonjs-loaders";
 import "animate.css";
+
+let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
+// 需要时动态加载 Babylon.js 和其他依赖
+const loadBabylon = async () => {
+  if (BABYLON) return;
+  BABYLON = await import('babylonjs');
+  BABYLON_GUI = await import('babylonjs-gui');
+  BABYLON_GRID = await import('@/utils/gridMaterial');
+  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
+
+  // 配置 Draco 编解码器
+  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
+  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
+  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
+  
+  // 加载 Babylon.js 加载器
+  await import('babylonjs-loaders');
+};
 export default {
 	beforeRouteLeave(to, from, next) {
 // 页面离开时刷新页面
@ -640,6 +647,28 @@ export default {
 		};
 	},
 	mounted() {
+		loadBabylon().then(()=>{
+			this.initView()
+		})
+	},
+	beforeUnmount() {
+		// 清除所有定时器，避免内存泄漏
+		if (this.timerTime) {
+		clearInterval(this.timerTime);}
+		if (this.timerOther) {
+		clearInterval(this.timerOther);}
+		if(this.intervalId1!==null){
+			clearInterval(this.intervalId1);
+		}
+		if(this.intervalId2!==null){
+			clearInterval(this.intervalId2);
+		}
+		if(this.intervalId3!==null){
+			clearInterval(this.intervalId3);
+		}
+	},
+	methods: {
+		initView() {
 			let that = this;
 		that.bigScreenName =
 			that.$TOOL.data.get("BASE_INFO").base.bigScreen_name;
@ -690,23 +719,6 @@ export default {
 			}, 180000); // 3分钟更新一次
 		});
 		},
-	beforeUnmount() {
-		// 清除所有定时器，避免内存泄漏
-		if (this.timerTime) {
-		clearInterval(this.timerTime);}
-		if (this.timerOther) {
-		clearInterval(this.timerOther);}
-		if(this.intervalId1!==null){
-			clearInterval(this.intervalId1);
-		}
-		if(this.intervalId2!==null){
-			clearInterval(this.intervalId2);
-		}
-		if(this.intervalId3!==null){
-			clearInterval(this.intervalId3);
-		}
-	},
-	methods: {
 		backHome(){
 			// this.$router.push({ name: "user" });
 			this.$router.go(-1);
--- a/src/views/bigScreen/index_enm_ly.vue
+++ b/src/views/bigScreen/index_enm_ly.vue
@ -294,19 +294,38 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import * as BABYLON from "babylonjs";
-import * as BABYLON_GUI from "babylonjs-gui";
-import * as BABYLON_GRID from "@/utils/gridMaterial";
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
 import config from "@/config";
-BABYLON.DracoCompression.Configuration.decoder.wasmUrl =
-	"./draco_wasm_wrapper_gltf.js";
-BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl =
-	"./draco_decoder_gltf.wasm";
-BABYLON.DracoCompression.Configuration.decoder.fallbackUrl =
-	"./draco_decoder_gltf.js";
-import "babylonjs-loaders";
 import "animate.css";
+
+// import * as BABYLON from "babylonjs";
+// import * as BABYLON_GUI from "babylonjs-gui";
+// import * as BABYLON_GRID from "@/utils/gridMaterial";
+// import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
+// BABYLON.DracoCompression.Configuration.decoder.wasmUrl =
+// 	"./draco_wasm_wrapper_gltf.js";
+// BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl =
+// 	"./draco_decoder_gltf.wasm";
+// BABYLON.DracoCompression.Configuration.decoder.fallbackUrl =
+// 	"./draco_decoder_gltf.js";
+// import "babylonjs-loaders";
+
+let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
+// 需要时动态加载 Babylon.js 和其他依赖
+const loadBabylon = async () => {
+  if (BABYLON) return;
+  BABYLON = await import('babylonjs');
+  BABYLON_GUI = await import('babylonjs-gui');
+  BABYLON_GRID = await import('@/utils/gridMaterial');
+  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
+
+  // 配置 Draco 编解码器
+  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
+  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
+  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
+  
+  // 加载 Babylon.js 加载器
+  await import('babylonjs-loaders');
+};
 export default {
 	data() {
 		return {
@ -629,6 +648,13 @@ export default {
 		};
 	},
 	mounted() {
+		loadBabylon().then(() => {
+		    this.initView();
+		}
+		)
+	},
+	methods: {
+		initView() {
 			let that = this;
 		that.bigScreenName =
 			that.$TOOL.data.get("BASE_INFO").base.bigScreen_name;
@ -711,7 +737,6 @@ export default {
 			// }, 3600000);
 		});
 		},
-	methods: {
 		//熟料产量
 		productNum() {
 			let that = this;
--- a/src/views/bigScreen/index_enp_blue.vue
+++ b/src/views/bigScreen/index_enp_blue.vue
@ -520,7 +520,6 @@ import carwash from "./enpComponents/smartg_carwash.vue";
 import carmanager from "./enpComponents/carManager.vue";
 import videowall from "./enpComponents/video.vue";
 import scScrollTavle from "@/components/scScrollTable.vue";
-// import 'babylonjs-loaders';
 import "animate.css";
 export default {
 	components: {
--- a/src/views/bigScreen/index_gx.vue
+++ b/src/views/bigScreen/index_gx.vue
@ -341,21 +341,29 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import * as BABYLON from "babylonjs";
-import * as BABYLON_GUI from "babylonjs-gui";
 import scEcharts from '@/components/scEcharts';
-import * as BABYLON_GRID from "@/utils/gridMaterial";
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
 import config from "@/config";
-BABYLON.DracoCompression.Configuration.decoder.wasmUrl =
-	"./draco_wasm_wrapper_gltf.js";
-BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl =
-	"./draco_decoder_gltf.wasm";
-BABYLON.DracoCompression.Configuration.decoder.fallbackUrl =
-	"./draco_decoder_gltf.js";
-import "babylonjs-loaders";
 import "animate.css";
 import baseUrl from "@/config";
+
+let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
+// 需要时动态加载 Babylon.js 和其他依赖
+const loadBabylon = async () => {
+  if (BABYLON) return;
+  BABYLON = await import('babylonjs');
+  BABYLON_GUI = await import('babylonjs-gui');
+  BABYLON_GRID = await import('@/utils/gridMaterial');
+  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
+
+  // 配置 Draco 编解码器
+  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
+  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
+  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
+  
+  // 加载 Babylon.js 加载器
+  await import('babylonjs-loaders');
+};
+
 const configData={
 	header : ['物料批次','未加工','进行中','已完成','合格数'],
 	headerBGC : '#0a3f44',
@ -669,6 +677,14 @@ export default {
 		};
 	},
 	mounted() {
+		loadBabylon().then(()=>{
+			this.initView()
+		})
+	},
+	methods: {
+
+		//初始化视图
+		initView(){
 		    let that = this;
 		var windowHeight = window.innerHeight;
 		var windowWidth = window.innerWidth;
@ -734,7 +750,6 @@ export default {
 			that.addListener();
 		})
 		},
-	methods: {
 		//获取公告和视频
 		getArticles(){
 			let that = this;
--- a/src/views/bigScreen/index_photon.vue
+++ b/src/views/bigScreen/index_photon.vue
@ -394,19 +394,26 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import * as BABYLON from "babylonjs";
-import * as BABYLON_GUI from "babylonjs-gui";
-import * as BABYLON_GRID from "@/utils/gridMaterial";
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
 import config from "@/config";
-BABYLON.DracoCompression.Configuration.decoder.wasmUrl =
-	"./draco_wasm_wrapper_gltf.js";
-BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl =
-	"./draco_decoder_gltf.wasm";
-BABYLON.DracoCompression.Configuration.decoder.fallbackUrl =
-	"./draco_decoder_gltf.js";
-import "babylonjs-loaders";
 import "animate.css";
+
+let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
+// 需要时动态加载 Babylon.js 和其他依赖
+const loadBabylon = async () => {
+  if (BABYLON) return;
+  BABYLON = await import('babylonjs');
+  BABYLON_GUI = await import('babylonjs-gui');
+  BABYLON_GRID = await import('@/utils/gridMaterial');
+  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
+
+  // 配置 Draco 编解码器
+  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
+  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
+  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
+  
+  // 加载 Babylon.js 加载器
+  await import('babylonjs-loaders');
+};
 export default {
 	data() {
 		return {
@ -575,6 +582,12 @@ export default {
 		};
 	},
 	mounted() {
+		loadBabylon().then(() => {
+		    this.initView();
+		})
+	},
+	methods: {
+		initView() {
 		    let that = this;
 		let height = document.getElementById("mainBlock").clientHeight;
 		let height0 = height / 3 - 55;
@ -668,7 +681,6 @@ export default {
 		this.getPlanRate();
 		this.getMaterialList();
 		},
-	methods: {
 		//本周6车间交付数----棒管交付数
 		getsaleOut() {
 			let that = this;
--- a/src/views/bigScreen/textIndex.vue
+++ b/src/views/bigScreen/textIndex.vue
@ -138,13 +138,25 @@
 </template>
 <script>
 import * as echarts from 'echarts';
-import * as BABYLON from "babylonjs";
-import * as BABYLON_GUI from "babylonjs-gui";
-import * as BABYLON_GRID from "@/utils/gridMaterial";
-import * as BABYLON_MATERIAL from "@/utils/babylonMaterial";
-
-import 'babylonjs-loaders';
 import 'animate.css';
+
+let BABYLON, BABYLON_GUI, BABYLON_GRID, BABYLON_MATERIAL;
+// 需要时动态加载 Babylon.js 和其他依赖
+const loadBabylon = async () => {
+  if (BABYLON) return;
+  BABYLON = await import('babylonjs');
+  BABYLON_GUI = await import('babylonjs-gui');
+  BABYLON_GRID = await import('@/utils/gridMaterial');
+  BABYLON_MATERIAL = await import('@/utils/babylonMaterial');
+
+  // 配置 Draco 编解码器
+  BABYLON.DracoCompression.Configuration.decoder.wasmUrl = "./draco_wasm_wrapper_gltf.js";
+  BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = "./draco_decoder_gltf.wasm";
+  BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = "./draco_decoder_gltf.js";
+  
+  // 加载 Babylon.js 加载器
+  await import('babylonjs-loaders');
+};
 export default {
    data() {
        return {
@ -203,6 +215,7 @@ export default {
        }
    },
    mounted() {
+        loadBabylon();
        let that = this;
        let height = document.getElementById('mainBlock').clientHeight;
        let height0 = height / 3 - 55;
--- a/vue.config.js
+++ b/vue.config.js
@ -1,5 +1,11 @@
 const { defineConfig } = require('@vue/cli-service')
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const cesiumSource = 'node_modules/cesium/Source';
+const cesiumWorkers = '../Build/Cesium/Workers';
+const path = require('path');
+const webpack = require('webpack');
+const cesiumBaseUrl = "cesium"
 module.exports = defineConfig({
 	//设置为空打包后不分更目录还是多级目录
 	publicPath:'',
@ -48,6 +54,7 @@ module.exports = defineConfig({
 				chunks: "all",
 				automaticNameDelimiter: '~',
 				name: "scuiChunks",
+				maxSize: 4000000, // 限制每个代码块的最大体积，防止生成太大的块
 				cacheGroups: {
 					//第三方库抽离
 					vendor: {
@ -74,6 +81,14 @@ module.exports = defineConfig({
 					codemirror: {
 						name: "codemirror",
 						test: /[\\/]node_modules[\\/]codemirror[\\/]/
+					},
+					babylonjs: {
+						name: "babylonjs",
+						test: /[\\/]node_modules[\\/]babylon[\\/]/
+					},
+					cesium: {
+						name: "cesium",
+						test: /[\\/]node_modules[\\/]cesium[\\/]/
 					}
 				}
 			}
@ -85,10 +100,24 @@ module.exports = defineConfig({
 				stream: false,
 			}
 		},
-		plugins: [new NodePolyfillPlugin()],
+		plugins: [
+			new NodePolyfillPlugin(),
+			new CopyWebpackPlugin({
+				patterns: [
+				  { from: path.join(cesiumSource, cesiumWorkers), to: `${cesiumBaseUrl}/Workers`, },
+				  { from: path.join(cesiumSource, "ThirdParty"), to: `${cesiumBaseUrl}/ThirdParty`, },
+				  { from: path.join(cesiumSource, "Assets"), to: `${cesiumBaseUrl}/Assets`, },
+				  { from: path.join(cesiumSource, "Widgets"), to: `${cesiumBaseUrl}/Widgets`, },
+				],
+			  }),
+			  new webpack.DefinePlugin({
+				// Define relative base path in cesium for loading assets
+				CESIUM_BASE_URL: JSON.stringify(cesiumBaseUrl),
+			  }),
+	],
 		externals:{
 			'./cptable':'var cptable'
-		}
+		},
 	},
 	pluginOptions: {
 		'style-resources-loader': {