Merge pull request #203 from pglotov/isPreload

joaopslins · web-flow · commit 5839809c8e4e · 2021-08-23T18:22:53.000-03:00
Add rel="preload" option for JS/CSS
diff --git a/tests/app/templates/preload.html b/tests/app/templates/preload.html
@@ -0,0 +1,16 @@
+{% load render_bundle from webpack_loader %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Example</title>
+    {% render_bundle 'main' 'css' is_preload=True %}
+    {% render_bundle 'main' 'js' is_preload=True %}
+
+    {% render_bundle 'main' 'css' %}
+  </head>
+
+  <body>
+    {% render_bundle 'main' 'js' %}
+  </body>
+</html>
diff --git a/tests/app/tests/test_webpack.py b/tests/app/tests/test_webpack.py
@@ -142,6 +142,20 @@ def test_templatetags(self):
         result = view(request)
         self.assertIn('<img src="http://custom-static-host.com/my-image.png"/>', result.rendered_content)
 
+    def test_preload(self):
+        self.compile_bundles('webpack.config.simple.js')
+        view = TemplateView.as_view(template_name='preload.html')
+        request = self.factory.get('/')
+        result = view(request)
+
+        # Preload
+        self.assertIn('<link href="/static/django_webpack_loader_bundles/main.css" rel="preload" as="style" />', result.rendered_content)
+        self.assertIn('<link rel="preload" as="script" href="/static/django_webpack_loader_bundles/main.js" />', result.rendered_content)
+
+        # Resources
+        self.assertIn('<link href="/static/django_webpack_loader_bundles/main.css" rel="stylesheet" />', result.rendered_content)
+        self.assertIn('<script src="/static/django_webpack_loader_bundles/main.js" ></script>', result.rendered_content)
+
     def test_jinja2(self):
         self.compile_bundles('webpack.config.simple.js')
         self.compile_bundles('webpack.config.app2.js')
diff --git a/webpack_loader/templatetags/webpack_loader.py b/webpack_loader/templatetags/webpack_loader.py
@@ -8,8 +8,8 @@
 
 
 @register.simple_tag
-def render_bundle(bundle_name, extension=None, config='DEFAULT', attrs=''):
-    tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
+def render_bundle(bundle_name, extension=None, config='DEFAULT', attrs='', is_preload=False):
+    tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs, is_preload=is_preload)
     return mark_safe('\n'.join(tags))
 
 
@@ -19,6 +19,8 @@ def webpack_static(asset_name, config='DEFAULT'):
 
 
 assignment_tag = register.simple_tag if VERSION >= (1, 9) else register.assignment_tag
+
+
 @assignment_tag
 def get_files(bundle_name, extension=None, config='DEFAULT'):
     """
diff --git a/webpack_loader/utils.py b/webpack_loader/utils.py
@@ -2,7 +2,6 @@
 from django.conf import settings
 from .config import load_config
 
-
 _loaders = {}
 
 
@@ -48,7 +47,7 @@ def get_files(bundle_name, extension=None, config='DEFAULT'):
     return list(_get_bundle(bundle_name, extension, config))
 
 
-def get_as_tags(bundle_name, extension=None, config='DEFAULT', attrs=''):
+def get_as_tags(bundle_name, extension=None, config='DEFAULT', attrs='', is_preload=False):
     '''
     Get a list of formatted <script> & <link> tags for the assets in the
     named bundle.
@@ -63,13 +62,18 @@ def get_as_tags(bundle_name, extension=None, config='DEFAULT', attrs=''):
     tags = []
     for chunk in bundle:
         if chunk['name'].endswith(('.js', '.js.gz')):
-            tags.append((
-                '<script src="{0}" {1}></script>'
-            ).format(chunk['url'], attrs))
+            if is_preload:
+                tags.append((
+                    '<link rel="preload" as="script" href="{0}" {1}/>'
+                ).format(chunk['url'], attrs))
+            else:
+                tags.append((
+                    '<script src="{0}" {1}></script>'
+                ).format(chunk['url'], attrs))
         elif chunk['name'].endswith(('.css', '.css.gz')):
             tags.append((
-                '<link href="{0}" rel="stylesheet" {1}/>'
-            ).format(chunk['url'], attrs))
+                '<link href="{0}" rel={2} {1}/>'
+            ).format(chunk['url'], attrs, '"stylesheet"' if not is_preload else '"preload" as="style"'))
     return tags
 
 
