Skip to content

Commit 2561214

Browse files
committed
minor #9606 [Encore] Encore.configureUrlLoader() documentation (Lyrkan, javiereguiluz)
This PR was merged into the 3.4 branch. Discussion ---------- [Encore] Encore.configureUrlLoader() documentation This PR adds the documentation for the `Encore.configureUrlLoader()` method (symfony/webpack-encore#296). Not sure if it should be more detailed since the other options of the URL loader are typically not needed... Commits ------- 5c87901 Use the default article title 4d8700f Reword 6820867 Encore.configureUrlLoader() documentation
2 parents a92bc88 + 5c87901 commit 2561214

File tree

2 files changed

+52
-0
lines changed

2 files changed

+52
-0
lines changed

frontend.rst

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ Optimizing
5353
* :doc:`Versioning (and the manifest.json file) </frontend/encore/versioning>`
5454
* :doc:`Using A CDN </frontend/encore/cdn>`
5555
* :doc:`Creating a "Shared" entry for re-used modules </frontend/encore/shared-entry>`
56+
* :doc:`/frontend/encore/url-loader`
5657

5758
Guides
5859
......

frontend/encore/url-loader.rst

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
Inlining files in CSS with Webpack URL Loader
2+
=============================================
3+
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.
7+
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:
10+
11+
.. code-block:: terminal
12+
13+
$ yarn add --dev url-loader
14+
15+
Then enable it in your ``webpack.config.js``:
16+
17+
.. code-block:: javascript
18+
19+
// webpack.config.js
20+
// ...
21+
22+
Encore
23+
// ...
24+
.configureUrlLoader({
25+
fonts: { limit: 4096 },
26+
images: { limit: 4096 }
27+
})
28+
;
29+
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
39+
40+
// webpack.config.js
41+
// ...
42+
43+
Encore
44+
// ...
45+
.configureUrlLoader({
46+
// 'fonts' is not defined, so only images will be inlined
47+
images: { limit: 4096 }
48+
})
49+
;
50+
51+
.. _`URL loader`: https://github.com/webpack-contrib/url-loader

0 commit comments

Comments
 (0)