Make a static build of the viewer

[Karang]

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.

[Karang]

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)

[Karang]

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.

[rom1504]

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 ***@***.***> 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 <#69 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAR437XOTFHBAH36VI6DD3LST7I3PANCNFSM4UT43L3Q> .

[Karang]

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.

[rom1504]

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

[Karang]

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

[rom1504]

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

[rom1504]

Webpack or browserify handle dependencies fine