Add a preload_pack_asset helper (#2124)

Author: guillaumebriday

docs/webpack.md

@@ -277,7 +277,7 @@ environment.splitChunks()
 environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
 ```
 
-Then use, `javascript_packs_with_chunks_tag` helper to include all the transpiled
+Then use the `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` helpers to include all the transpiled
 packs with the chunks in your view, which creates html tags for all the chunks.
 
 ```erb
@@ -304,6 +304,20 @@ get duplicated chunks on the page.
 
 For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
 
+#### Preloading
+
+Before preload or prefetch your assets, please read [https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
+
+Webpack also provide it's own methods for preload or prefetch [https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c).
+
+You can preload your assets with the `preload_pack_asset` helper if you have Rails >= 5.2.x.
+
+```erb
+<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %>
+```
+
+**Warning:** You don't want to preload the css, you want to preload the fonts and images inside the css so that fonts, css, and images can all be downloaded in parallel instead of waiting for the browser to parse the css.
+
 ### Add common chunks (deprecated in Webpack V4)
 
 The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in the cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from the cache, rather than being forced to load a larger bundle whenever a new page is visited.

lib/webpacker/helper.rb

@@ -78,12 +78,27 @@ def javascript_pack_tag(*names, **options)
   # DO:
   # <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
   # DON'T:
-  # <%= javascript_packs_with_chunks_tag 'calendar' %>
+  # <%= javascript_packs_with_chunks_tag 'calendar' %>
   # <%= javascript_packs_with_chunks_tag 'map' %>
   def javascript_packs_with_chunks_tag(*names, **options)
     javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
   end
 
+  # Creates a link tag, for preloading, that references a given Webpacker asset
+  # In production mode, the digested reference is automatically looked up.
+  # See: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
+  # Example:
+  #
+  #   <%= preload_pack_asset 'fonts/fa-regular-400.woff2' %> # =>
+  #   <link rel="preload" href="/packs/fonts/fa-regular-400-944fb546bd7018b07190a32244f67dc9.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  def preload_pack_asset(name, **options)
+    if self.class.method_defined?(:preload_link_tag)
+      preload_link_tag(current_webpacker_instance.manifest.lookup!(name), options)
+    else
+      raise "You need Rails >= 5.2 to use this tag."
+    end
+  end
+
   # Creates a link tag that references the named pack file, as compiled by webpack per the entries list
   # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
@@ -120,7 +135,7 @@ def stylesheet_pack_tag(*names, **options)
   # DO:
   # <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
   # DON'T:
-  # <%= stylesheet_packs_with_chunks_tag 'calendar' %>
+  # <%= stylesheet_packs_with_chunks_tag 'calendar' %>
   # <%= stylesheet_packs_with_chunks_tag 'map' %>
   def stylesheet_packs_with_chunks_tag(*names, **options)
     if current_webpacker_instance.config.extract_css?

test/helper_test.rb

@@ -79,6 +79,22 @@ def test_javascript_pack_tag_split_chunks
       javascript_packs_with_chunks_tag("application")
   end
 
+  def test_preload_pack_asset
+    if self.class.method_defined?(:preload_link_tag)
+      assert_equal \
+        %(<link rel="preload" href="/packs/fonts/fa-regular-400-944fb546bd7018b07190a32244f67dc9.woff2" as="font" type="font/woff2" crossorigin="anonymous">),
+        preload_pack_asset("fonts/fa-regular-400.woff2")
+    else
+      error = assert_raises do
+        preload_pack_asset("fonts/fa-regular-400.woff2")
+      end
+
+      assert_equal \
+        "You need Rails >= 5.2 to use this tag.",
+        error.message
+    end
+  end
+
   def test_stylesheet_pack_tag_split_chunks
     assert_equal \
       %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +

test/test_app/public/packs/manifest.json

@@ -4,6 +4,7 @@
   "bootstrap.js": "/packs/bootstrap-300631c4f0e0f9c865bc.js",
   "application.js": "/packs/application-k344a6d59eef8632c9d1.js",
   "application.png": "/packs/application-k344a6d59eef8632c9d1.png",
+  "fonts/fa-regular-400.woff2": "/packs/fonts/fa-regular-400-944fb546bd7018b07190a32244f67dc9.woff2",
   "media/images/image.jpg": "/packs/media/images/image-c38deda30895059837cf.jpg",
   "media/images/nested/image.jpg": "/packs/media/images/nested/image-c38deda30895059837cf.jpg",
   "entrypoints": {