openculinary / frontend

The RecipeRadar Frontend is a recipe search and meal planning application
GNU Affero General Public License v3.0
13 stars 2 forks source link

webpack: enable chunking of application JavaScript #246

Open jayaddison opened 1 year ago

jayaddison commented 1 year ago

Is your feature request related to a problem? Please describe. The application is bundled for container deployment using webpack, and the resulting build process produces a few minifed JavaScript code files.

Some of the modules used in each of the JavaScript code files (entrypoints) is shared -- and if we can enable webpack's chunking (also known as: code splitting) feature, then some of the shared modules can be placed into separate, reusable JavaScript files. That means: a few more files for the client to download, but a smaller total download size across all of the files.

When we attempted to enable this most recently on 2023-10-22 (e59d266be6b4212ee4760775900f6806fffc2117) the size of the application download was reduced from ~1.45MB to ~1.30MB - a significant saving. However: at least one of the application entrypoints (window['app'] - the app entrypoint) was not available to some of the bootstrap-table code -- something to do with app.rowAttributes.

Since some JavaScript caching is performed by most browsers, including the ones we used to test e59d266be6b4212ee4760775900f6806fffc2117 after-the-fact, and because we didn't test more extensively during development and deployment, we didn't notice the problem -- but it prevented many users from performing searches in the application for a time interval of approximately 5 hours.

Describe the solution you'd like Enable webpack code splitting, without breaking the application.

Describe alternatives you've considered N/A

Additional context N/A