Hi, I'm currently using cesium source with webpack using vue-cli. When using the webpack-dev-server to host the app, the webpage's fps drops very low when almost 5000+ entities are ingested into the scene.
I was wondering if there'a way to increase the fps performance by configuring the webpack dev config file?
Cesium 1.38, win10, chrome 61
Does the same performance drop happen when you run the app in a production build? I would not expect the Webpack-Dev-Server itself to actually affect things. What might affect things is running an unminified / unoptimized development build of Cesium (and the rest of your code), as well as actually loading all the entities into the scene at once.
Hi Mark,
The production build actually runs rather smoothly and it has a steady framerate of abt 40-50fps even when panning the map. When it first ingest the bulk of entities, it took about at least less than a second to render.
But the dev server would take more than that to render and it kind of freezes the webpage till it finished rendering. Plus it was rather lag after rendered, especially when panning the map.
Fyi, i previously used pre-built cesium and it actually did not exhibit the symptoms mentioned. But back then Cesim 1.34 unminified build was used.
The reason why i changed to cesium source later due to fact that the later cesium versions (eg 1.38) cannot be import using prebuilt due to error:missing third party pako library.
Thanks and regards
Calvin
Right, and I’m saying that the likely cause of the performance issues isn’t WDS or Webpack itself, but rather the fact that you’re using a “debug-mode”, unoptimized loaded version of Cesium. I assume that the “freezing on loading” that you’re experiencing is the entire unminified bundle being loaded by the browser, likely also involving sourcemaps.
You may want to read a post I wrote that talks about how to pre-build Cesium into a “DLL bundle” with Webpack: http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ . The Cesium team also just put up an excellent docs guide to using Cesium with Webpack : https://cesium.com/blog/2017/10/18/cesium-and-webpack/ , https://cesiumjs.org/tutorials/cesium-and-webpack/ .
General rule of thumb: don’t worry about performance in debug builds. Only measure perf in production builds.
Ok sure, thanks Max, will look into it.
Hi,
Good answer from Mark- There are indeed performance improvements between the Source code and the built version of cesium. When we create the built version of Cesium, we minify the js and css, and remove some extra logic for checking for developer errors. You should be able to duplicate these with your webpack build, those resources Mark mentioned are good places to look.
Thanks,
Gabby
You could try our version:
Or just yarn add webpack-cesium, then require(‘webpack-cesium’)
It’s the whole thing, so if you wanted to edit the source or pick / choose, one of those other options would probably work better.