introduce django compressor

hub/services/management/commands/build_assets.py

@@ -0,0 +1,32 @@
+from django.core.management.base import BaseCommand
+from django.core.management import call_command
+
+
+class Command(BaseCommand):
+    help = "Build and compress static assets for production"
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            "--force",
+            action="store_true",
+            help="Force compression even if files exist",
+        )
+
+    def handle(self, *args, **options):
+        self.stdout.write("Building static assets...")
+
+        # Compress CSS and JS files
+        self.stdout.write("Compressing CSS and JavaScript...")
+        call_command(
+            "compress",
+            force=options.get("force", False),
+            verbosity=options.get("verbosity", 1),
+        )
+
+        # Collect all static files
+        self.stdout.write("Collecting static files...")
+        call_command(
+            "collectstatic", interactive=False, verbosity=options.get("verbosity", 1)
+        )
+
+        self.stdout.write(self.style.SUCCESS("Successfully built static assets"))

hub/services/templates/services/offering_detail.html

@@ -1,12 +1,36 @@
 {% extends 'base.html' %}
 {% load static %}
+{% load compress %}
 {% load contact_tags %}
 {% load json_ld_tags %}
 
 {% block title %}Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}{% endblock %}
 
 {% block extra_js %}
-<script defer src="{% static "js/price-calculator.js" %}"></script>
+{% if debug %}
+<!-- Development: Load individual modules for easier debugging -->
+<script defer src="{% static 'js/price-calculator.js' %}"></script>
+{% else %}
+<!-- Production: Load compressed bundle -->
+{% compress js %}
+<script src="{% static 'js/price-calculator/dom-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/pricing-data-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/plan-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/addon-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/ui-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/order-manager.js' %}"></script>
+<script src="{% static 'js/price-calculator/price-calculator.js' %}"></script>
+<script>
+// Initialize calculator when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if we're on a page that needs the price calculator
+    if (document.getElementById('cpuRange')) {
+        window.priceCalculator = new PriceCalculator();
+    }
+});
+</script>
+{% endcompress %}
+{% endif %}
 <link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
 
 {% json_ld_structured_data %}

hub/settings.py

@@ -76,6 +76,7 @@ INSTALLED_APPS = [
     "django.contrib.staticfiles",
     "django.contrib.sitemaps",
     # 3rd party
+    "compressor",
     "django_prose_editor",
     "rest_framework",
     "schema_viewer",
@@ -186,6 +187,25 @@ USE_TZ = True
 STATIC_URL = "static/"
 STATIC_ROOT = env.path("STATIC_ROOT", default=BASE_DIR / "static")
 
+# Static files configuration
+STATICFILES_FINDERS = [
+    "django.contrib.staticfiles.finders.FileSystemFinder",
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
+]
+
+# Django Compressor settings
+COMPRESS_ENABLED = True
+COMPRESS_OFFLINE = True  # Compress during build, not runtime
+COMPRESS_CSS_FILTERS = [
+    "compressor.filters.css_default.CssAbsoluteFilter",
+    "compressor.filters.cssmin.rCSSMinFilter",
+]
+COMPRESS_JS_FILTERS = [
+    "compressor.filters.jsmin.rJSMinFilter",
+]
+COMPRESS_OUTPUT_DIR = "CACHE"
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field