PrismarineJS/prismarine-viewer

Make a static build of the viewer #69

Karang posted onGitHub

Making a static build could allow to implement all-in-browser views of worlds and schematics. It could be useful for websites to offer a preview for their downloads.

For building a static view, all files in https://github.com/PrismarineJS/prismarine-viewer/blob/master/lib/common.js must be generated.

  • index.js
  • worker.js
  • texture.png => depends on the version, but can be worked around by generating it for every versions
  • blocksStates.json => same as texture.png

Then we could decide to keep or not the dynamic generation (it depends if generating/storing textures and blocksStates for all versions is expensive or not).

While implementing that it may be the time to try webpack instead of browserify.


Related to this issue, we should investigate ways to reduce the file sizes of the js files. Here are the js file sizes for the 2 main files in development:

  • index.js : 1.63 MB
  • worker.js : 16.9 MB

And production:

  • index.js : 741 KB
  • worker.js : 10.7 MB

The big size of worker.js is likely due to the embedding of mcdata, used to get the blocks for every version (while pviewer actually use only one).

For a typical speed of 1MB/s this is way too much to guarantee interactive load time. (For the first time, when the file is in cache its fine)

posted by Karang over 4 years ago

An other issue is related to the project structure. In node, users can make their project depends on prismarine-viewer and use it with a simple require(). If we use wepack, we can generate client side code and resources at installation time. But how to integrate user code into the browser view ? The user project would have to do the build itself, using webpack or a similar tool.

posted by Karang over 4 years ago

What's the size of worker.js compressed ? The browser always use gzip. The built front can be included in npm

On Wed, Dec 9, 2020, 20:55 Karang notifications@github.com wrote:

An other issue is related to the project structure. In node, users can make their project depends on prismarine-viewer and use it with a simple require(). If we use wepack, we can generate client side code and resources at installation time. But how to integrate user code into the browser view ? The user project would have to do the build itself, using webpack or a similar tool.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/PrismarineJS/prismarine-viewer/issues/69#issuecomment-742011373, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAR437XOTFHBAH36VI6DD3LST7I3PANCNFSM4UT43L3Q .

posted by rom1504 over 4 years ago

Yeah ok for the size, I recall now that we already checked that and the solution was to enable compression on the webserver. In the end I think it was fine.

For the front, if you include it you still need to build it in the user project.

posted by Karang over 4 years ago

For the front, if you include it you still need to build it in the user project.

what is the user project? do you mean a front end project including pviewer and adding things ? if yes then sure if it's a mineflayer bot including pviewer i don't see why that would be necessary to rebuild

posted by rom1504 over 4 years ago

yeah by user project i meant a front end project, the other cases are working already as it is.

posted by Karang over 4 years ago

Yeah ok that's fine then, they would just do an import of prismarine-viewer, maybe call a build function if necessary ?

posted by rom1504 over 4 years ago

Webpack or browserify handle dependencies fine

posted by rom1504 over 4 years ago

Fund this Issue

$0.00
Funded

Pull requests