diff --git a/docs/webpack.md b/docs/webpack.md index 63a74e66a..f2e5d5326 100644 --- a/docs/webpack.md +++ b/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. diff --git a/lib/webpacker/helper.rb b/lib/webpacker/helper.rb index 792892353..884f0d3f6 100644 --- a/lib/webpacker/helper.rb +++ b/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' %> # => + # + 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? diff --git a/test/helper_test.rb b/test/helper_test.rb index d326228a2..509afd3d0 100644 --- a/test/helper_test.rb +++ b/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 \ + %(), + 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 \ %(\n) + diff --git a/test/test_app/public/packs/manifest.json b/test/test_app/public/packs/manifest.json index 5a49f60fb..783214316 100644 --- a/test/test_app/public/packs/manifest.json +++ b/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": {