Skip to content

Commit 4d8700f

Browse files
Reword
1 parent 6820867 commit 4d8700f

File tree

1 file changed

+25
-18
lines changed

1 file changed

+25
-18
lines changed

frontend/encore/url-loader.rst

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
1-
Using the URL Loader
2-
===============================
1+
Inlining files in CSS with Webpack URL Loader
2+
=============================================
33

4-
The `URL Loader`_ allows you to convert files into Data URLs and embed them
5-
directly into the compiled version of your code. This can be useful if you
6-
want to avoid extra network requests for some of the ``url()`` calls present
7-
in your CSS files.
4+
A simple technique to improve the performance of web applications is to reduce
5+
the number of HTTP requests inlining small files as base64 encoded URLs in the
6+
generated CSS files.
87

9-
In Encore that loader is disabled by default, but you can easily enable it for
10-
images and fonts.
11-
12-
First, add the loader to your project:
8+
Webpack Encore provides this feature via Webpack's `URL Loader`_ plugin, but
9+
it's disabled by default. First, add the URL loader to your project:
1310

1411
.. code-block:: terminal
1512
@@ -30,15 +27,25 @@ Then enable it in your ``webpack.config.js``:
3027
})
3128
;
3229
33-
Every fonts and images files having a size below or equal to 4 KB will now be
34-
inlined directly where they are required. If their size is over 4 KB the default
35-
behavior will be used instead. You can change that threshold by modifying the
36-
``limit`` option.
30+
The ``limit`` option defines the maximum size in bytes of the inlined files. In
31+
the previous example, font and image files having a size below or equal to 4 KB
32+
will be inlined and the rest of files will be processed as usual.
33+
34+
You can also use all the other options supported by the `URL Loader`_. If you
35+
want to disable this loader for either images or fonts, remove the corresponding
36+
key from the object that is passed to the ``configureUrlLoader()`` method:
37+
38+
.. code-block:: javascript
3739
38-
You can also use all of the other options supported by the `URL Loader`_.
40+
// webpack.config.js
41+
// ...
3942
40-
If you wish to disable that loader for either images or fonts simply remove the
41-
corresponding key from the object that is passed to the ``configureUrlLoader()``
42-
method.
43+
Encore
44+
// ...
45+
.configureUrlLoader({
46+
// 'fonts' is not defined, so only images will be inlined
47+
images: { limit: 4096 }
48+
})
49+
;
4350
4451
.. _`URL loader`: https://github.com/webpack-contrib/url-loader

0 commit comments

Comments
 (0)