From 6820867f1e8dc7606251aed7aba915e9c8208d0d Mon Sep 17 00:00:00 2001 From: Lyrkan Date: Mon, 16 Apr 2018 13:50:39 +0200 Subject: [PATCH 1/3] Encore.configureUrlLoader() documentation --- frontend.rst | 1 + frontend/encore/url-loader.rst | 44 ++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 frontend/encore/url-loader.rst diff --git a/frontend.rst b/frontend.rst index 8947cbfd818..c20fc2e059c 100644 --- a/frontend.rst +++ b/frontend.rst @@ -53,6 +53,7 @@ Optimizing * :doc:`Versioning (and the manifest.json file) ` * :doc:`Using A CDN ` * :doc:`Creating a "Shared" entry for re-used modules ` +* :doc:`Using the URL Loader ` Guides ...... diff --git a/frontend/encore/url-loader.rst b/frontend/encore/url-loader.rst new file mode 100644 index 00000000000..7ac1ccf17ea --- /dev/null +++ b/frontend/encore/url-loader.rst @@ -0,0 +1,44 @@ +Using the URL Loader +=============================== + +The `URL Loader`_ allows you to convert files into Data URLs and embed them +directly into the compiled version of your code. This can be useful if you +want to avoid extra network requests for some of the ``url()`` calls present +in your CSS files. + +In Encore that loader is disabled by default, but you can easily enable it for +images and fonts. + +First, add the loader to your project: + +.. code-block:: terminal + + $ yarn add --dev url-loader + +Then enable it in your ``webpack.config.js``: + +.. code-block:: javascript + + // webpack.config.js + // ... + + Encore + // ... + .configureUrlLoader({ + fonts: { limit: 4096 }, + images: { limit: 4096 } + }) + ; + +Every fonts and images files having a size below or equal to 4 KB will now be +inlined directly where they are required. If their size is over 4 KB the default +behavior will be used instead. You can change that threshold by modifying the +``limit`` option. + +You can also use all of the other options supported by the `URL Loader`_. + +If you wish to disable that loader for either images or fonts simply remove the +corresponding key from the object that is passed to the ``configureUrlLoader()`` +method. + +.. _`URL loader`: https://github.com/webpack-contrib/url-loader From 4d8700f2127873a1cb6ca615b7121e1daf9a3273 Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Wed, 18 Apr 2018 10:33:12 +0200 Subject: [PATCH 2/3] Reword --- frontend/encore/url-loader.rst | 43 ++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/frontend/encore/url-loader.rst b/frontend/encore/url-loader.rst index 7ac1ccf17ea..627bd33d6c4 100644 --- a/frontend/encore/url-loader.rst +++ b/frontend/encore/url-loader.rst @@ -1,15 +1,12 @@ -Using the URL Loader -=============================== +Inlining files in CSS with Webpack URL Loader +============================================= -The `URL Loader`_ allows you to convert files into Data URLs and embed them -directly into the compiled version of your code. This can be useful if you -want to avoid extra network requests for some of the ``url()`` calls present -in your CSS files. +A simple technique to improve the performance of web applications is to reduce +the number of HTTP requests inlining small files as base64 encoded URLs in the +generated CSS files. -In Encore that loader is disabled by default, but you can easily enable it for -images and fonts. - -First, add the loader to your project: +Webpack Encore provides this feature via Webpack's `URL Loader`_ plugin, but +it's disabled by default. First, add the URL loader to your project: .. code-block:: terminal @@ -30,15 +27,25 @@ Then enable it in your ``webpack.config.js``: }) ; -Every fonts and images files having a size below or equal to 4 KB will now be -inlined directly where they are required. If their size is over 4 KB the default -behavior will be used instead. You can change that threshold by modifying the -``limit`` option. +The ``limit`` option defines the maximum size in bytes of the inlined files. In +the previous example, font and image files having a size below or equal to 4 KB +will be inlined and the rest of files will be processed as usual. + +You can also use all the other options supported by the `URL Loader`_. If you +want to disable this loader for either images or fonts, remove the corresponding +key from the object that is passed to the ``configureUrlLoader()`` method: + +.. code-block:: javascript -You can also use all of the other options supported by the `URL Loader`_. + // webpack.config.js + // ... -If you wish to disable that loader for either images or fonts simply remove the -corresponding key from the object that is passed to the ``configureUrlLoader()`` -method. + Encore + // ... + .configureUrlLoader({ + // 'fonts' is not defined, so only images will be inlined + images: { limit: 4096 } + }) + ; .. _`URL loader`: https://github.com/webpack-contrib/url-loader From 5c879015f01231a5c8ed632ce605f66a08f38126 Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Wed, 18 Apr 2018 10:33:49 +0200 Subject: [PATCH 3/3] Use the default article title --- frontend.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend.rst b/frontend.rst index c20fc2e059c..9ea585b5866 100644 --- a/frontend.rst +++ b/frontend.rst @@ -53,7 +53,7 @@ Optimizing * :doc:`Versioning (and the manifest.json file) ` * :doc:`Using A CDN ` * :doc:`Creating a "Shared" entry for re-used modules ` -* :doc:`Using the URL Loader ` +* :doc:`/frontend/encore/url-loader` Guides ......