BCsabaEngine / svelteesp32

Convert Svelte (or React/Angular/Vue) JS application to serve it from ESP32/ESP8266 webserver
51 stars 7 forks source link

Big file size in result #22

Closed hitecSmartHome closed 2 months ago

hitecSmartHome commented 3 months ago

Amazing lib!

I just noticed something. I wanted to try on one of my old project which has two partitions on the file system. This was because I had a "system" partition and a "user" partition. The system partition is holding web related files and I had compiled it with webpack which built the web app into a data folder. I could then just compress and upload this data folder into the system partition with espota. The produced data folder with webpack is 3.95MB while your script produced an 6.57MB header file. This is both minified and gzipped. In the first case the zipping and minifing is done by webpack, in the second case only the minification is done by webpack the zipping is done by your lib.

I have noticed some duplication when I looked into the produced header file such as this

  server->on("/update/update.js", HTTP_GET, [](PsychicRequest * request) {
    if (request->hasHeader("If-None-Match") && request->header("If-None-Match") == String(etag_update_update_js)) {
      PsychicResponse response304(request);
      response304.setCode(304);
      return response304.send();
    }
    PsychicResponse response(request);
    response.setContentType("application/javascript");
    response.addHeader("Content-Encoding", "gzip");
    response.addHeader("ETag", etag_update_update_js);
    response.setContent(data_update_update_js, sizeof(data_update_update_js));
    return response.send();
  });

  server->on("/update/update.js.js", HTTP_GET, [](PsychicRequest * request) {
    if (request->hasHeader("If-None-Match") && request->header("If-None-Match") == String(etag_update_update_js_js)) {
      PsychicResponse response304(request);
      response304.setCode(304);
      return response304.send();
    }
    PsychicResponse response(request);
    response.setContentType("application/javascript");
    response.addHeader("Content-Encoding", "gzip");
    response.addHeader("ETag", etag_update_update_js_js);
    response.setContent(data_update_update_js_js, sizeof(data_update_update_js_js));
    return response.send();
  });

It is probably a duplicated include in my web app or something else but I'm not sure. Any idea why is that? The produced #defines and things like that takes that much more space?

BCsabaEngine commented 3 months ago

The size of the c++ header file, like all source files, is always (much) larger than the resulting binary code. After generating the header file, the header will contain the number of files and the sum of their sizes. This should be similar to the values ​​in the dist folder.

What is causing the .js.js files is strange and should be investigated. Can you send me a list of files from your dist folder? Or the final result of running svelteesp32 that the screen shows?

Do you use Windows or linux like os?

hitecSmartHome commented 3 months ago

I can send it to you tomorrow. Iam using windows

hitecSmartHome commented 3 months ago

Oh god. Sorry I forgot. I can send it to you Wednesday :D

BCsabaEngine commented 3 months ago

I'm already very curious, but I can wait a few more days. :)

hitecSmartHome commented 3 months ago

I must add that this web app does not built with any framework. I used plain html, js and css. I used the new js include syntax and I have modules.

BCsabaEngine commented 3 months ago

svelteesp32 only emulates a webserver folder. It doesn't matter if it contains TXT or HTML files, it just serves them.

If the application you created is capable of dynamic loading and it works with a plain nginx, server or apache web server, it will also work with esp32.