This application using React with the latest capabilities of ESM modules, such as native import (without transpilation to CJS/AMD and global), dynamic import, importmaps (the core of this approach), and modulepreload. This approach enables the application to load code and resources asynchronously, which results in faster load times and better user experience. By using import maps, app can easily manage dependencies and load modules from different sources, making it easier to maintain the application. Additionally, modulepreload is used to optimize the performance of the application by loading critical modules first. Overall, the use of these modern web technologies results in a more scalable, maintainable, and performant application that provides a better experience without using bundlers with their chunk strategy.
Compilers (babel\swc) are used only to transform TSX\TS code into one that browsers understand
Build & run server on http://localhost/
npm i
npm start # babel compiler
docker-compose up -d-
Preloading modules - Sérgio Gomes
-
ES Module Preloading & Integrity - Guy Bedford
-
You might not need Module Federation: orchestrate your microfrontends at runtime with import maps - Vladimir Zaikin
-
Everything You Need to Know About JavaScript Import Maps - Ayooluwa Isaiah