如何使 Angular 与 ESP32 SPIFFS / ESPAsyncWebserver 配合使用

使用 Angular Web UI 时的主要问题是生成的文件太大，因此构建文件系统镜像将失败并显示 SPIFFS_write error(-10001): File system is full.

使用这些提示，我可以使 Angular PrimeNG 应用程序适应 4MB 闪存 ESP32 模块，无需任何自定义分区表和任何其他疯狂的技巧！甚至字体和 PrimeNG 图标也能轻松适应 SPIFFS，总共只消耗约 1.5 MB 中的 380 kB。

文件压缩

最重要的提示是你可以直接 gzip -9 angular dist 目录中的文件，ESPAsyncWebserver 将自动处理解压缩它们！

这是我的 platformio.ini：

[env:esp32dev]
platform = espressif32
platform_packages = framework-arduinoespressif32 @ https://github.com/espressif/arduino-esp32.git#2.0.3
board = esp32dev
framework = arduino
board_build.filesystem = littlefs
lib_deps =
    esphome/AsyncTCP-esphome@^1.2.2
    esphome/ESPAsyncWebServer-esphome@^2.1.0
    ArduinoJSON@6.19.1
upload_speed = 460800
monitor_speed = 115200

这是我的 angular 构建脚本：

#!/bin/sh
ng build --aot --build-optimizer --optimization --progress --output-hashing none
gzip -9 dist/**/*

这是我告诉 ESPAsyncWebserver（注意你应该使用 esphome 分支）静态提供文件的地方：

server.serveStatic("/", SPIFFS, "/www/").setDefaultFile("index.html");

其他提示

为了让你更轻松地管理包含 Angular 文件和其他文件的数据目录，请参阅如何将 Angular 项目 dist 目录链接到 PlatformIO SPIFFS 数据目录

你可以使用 purgecss，但压缩效果非常好，不值得冒着意外删除一些你需要手动加入白名单的 CSS 规则的风险。在发现压缩效果如此好之前，我开始手动从 PrimeNG 主题文件中删除 CSS 规则。这工作正常，但 SPIFFS 仍然不够小。

通常你可以通过删除来节省空间。

例如，primeicons.svg 和 primeicons.ttf 是两种不同格式的相同内容。注意某些（尤其是较旧的和一些移动）浏览器不支持所有格式，因此如果你需要支持多个平台，删除它们相当有风险。