diff --git a/README.md b/README.md index a22f0d2..ea1f76a 100644 --- a/README.md +++ b/README.md @@ -21,39 +21,67 @@ SensioLabs Minify Bundle integrates [Minify](https://github.com/tdewolff/minify) ### Asset Minifier - ✅ Minify `CSS` and `JS` files, remove whitespace, comments, and more.. +✅ Minify `CSS` and `JS` files, remove whitespace, comments, and more.. - 🌍🌍 Reduces the size of your assets by up to `70%` (see metrics below). +🌍 Reduces the size of your assets by up to `70%` (see metrics below). -🚀🚀🚀 Improves the loading time of your website, and the `user experience`. +🚀 Improves the loading time of your website, and the `user experience`. ### Asset Mapper 🎯 Automatically `minify` assets during the build process. -📦📦 Stores minified assets in the Symfony `cache`. +📦 Stores minified assets in the Symfony `cache`. -🌿🌿🌿 Download the Minify binary `automatically` from Github. +🌿 Download the Minify binary `automatically` from Github. ## Minification ### JavaScript -| Asset | Before | After | Diff | Compression | Time | -|------------------------|-------:|-------:|-----:|------------------------------------------|------:| -| [Autocomplete.js][1] | 20 kB | 9.2 kB | -54% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 8 ms | -| [Bootstrap.js][3] | 145 kB | 62 kB | -57% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 10 ms | -| [Video.js][5] | 2.3 MB | 0.7 MB | -71% | ⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 42 ms | -| [w3c.org js][7] | 44 kB | 19 kB | -57% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 6 ms | +| File | Original | Minified | Ratio | Gain | Compression | Time | +|----------------------|----------:|----------:|-------:|-------:|---------------------:|------:| +| [autocomplete.js][1] | 19.88 KB | 9.17 KB | 46.13% | 53.87% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ | 8 ms | +| [bootstrap.js][3] | 145.40 KB | 62.20 KB | 42.76% | 57.24% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | 10 ms | +| [video.js][5] | 2.35 MB | 690.10 KB | 29.33% | 70.67% | 🟩🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️ | 42 ms | +| [w3c.org js][7] | 43.39 KB | 19.23 KB | 44.34% | 55.66% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | 6 ms | + +Even gzip compression is more efficient on minified assets (see metrics below). + +
+ + See transfert comparaison (gzip) + +| File | Original | Minified | Ratio | Gain | Compression | +|-----------------|-----------:|----------:|-------:|-------:|---------------------:| +| autoComplete.js | 5.59 KB | 2.68 KB | 47.96% | 52.04% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ | +| bootstrap.js | 29.92 KB | 12.58 KB | 42.06% | 57.94% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | +| video.js | 538.83 KB | 202.62 KB | 37.61% | 62.39% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | +| w3c.org.js | 10.44 KB | 5.89 KB | 56.45% | 43.55% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | + +
### CSS -| Asset | Before | After | Diff | Compression | Time | -|-----------------------|-------:|-------:|-----:|-------------------------------------------|-----:| -| [Autocomplete.css][2] | 3.1 kB | 2.5 kB | -19% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩 | 2 ms | -| [Bootstrap.css][4] | 281 kB | 232 kB | -18% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩 | 9 ms | -| [Video-js.css][6] | 53 kB | 47 kB | -12% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜⬜️⬜️⬜️⬜️⬜️⬜️⬜️️🟩🟩 | 4 ms | -| [w3c.org css][8] | 111 kB | 70 kB | -37% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩 | 5 ms | +| File | Original | Minified | Ratio | Gain | Compression | Time | +|-----------------------|----------:|----------:|-------:|-------:|---------------------:|-----:| +| [autocomplete.css][2] | 3.09 KB | 2.51 KB | 81.33% | 18.67% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | 2 ms | +| [bootstrap.css][4] | 281.05 KB | 231.89 KB | 82.51% | 17.49% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | 9 ms | +| [video-js.css][6] | 53.37 KB | 47.06 KB | 88.24% | 11.76% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | 4 ms | +| [w3c.org css][8] | 111.44 KB | 70.37 KB | 63.17% | 36.83% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | 5 ms | + +
+ + See transfert comparaison (gzip) + +| File | Original | Minified | Ratio | Gain | Compression | +|------------------|-----------:|----------:|-------:|-------:|---------------------:| +| autoComplete.css | 1.08 KB | 0.89 KB | 82.41% | 17.59% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| bootstrap.css | 33.56 KB | 28.94 KB | 86.08% | 13.92% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| video-js.css | 13.14 KB | 12.72 KB | 96.79% | 3.21% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| w3c.org.css | 21.98 KB | 13.65 KB | 62.13% | 37.87% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | + +
## Installation @@ -71,6 +99,10 @@ composer require sensiolabs/minify-bundle ### Without Symfony Flex +
+ + How to install without Symfony Flex + #### Step 1: Download the Bundle Open a command console, enter your project directory and execute the @@ -97,6 +129,8 @@ return [ Depending on your deployment process, you might want to enable the bundle only in the desired environment(s). +
+ ## Usage If you use [AssetMapper][9], run the following command to minify all the assets: @@ -130,7 +164,7 @@ php bin/console minify:asset css/main.css css/main.min.css ## Configuration -### AssetMapper Settings +### AssetMapper ```yaml # config/packages/sensiolabs_minify.yaml @@ -154,6 +188,8 @@ sensiolabs_minify: ### Minify Binary +#### Local binary + The minification is performed by a binary file that can be installed on your computer/server or downloaded automatically by the bundle. This is the default configuration used by the bundle: diff --git a/doc/bench.md b/doc/bench.md index 71277fc..d3b8253 100644 --- a/doc/bench.md +++ b/doc/bench.md @@ -1,6 +1,8 @@ # Benchmarks -## Download files +## Setup + +### Download files ``` curl -O https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.js @@ -13,9 +15,36 @@ curl -O https://cdn.jsdelivr.net/npm/video.js@8.18.1/dist/video-js.css curl -O https://raw.githubusercontent.com/w3c/w3c-website-templates-bundle/refs/heads/main/public/dist/assets/styles/core.css ``` - -## Minify files +### Minify files ``` -minify -s -o min/ * +minify -s -o minify/ * ``` + +## Results + +### Size comparison + +| File | Original | Minified | Ratio | Gain | Compression | +|------------------|----------:|----------:|-------:|-------:|---------------------:| +| autoComplete.css | 3.09 KB | 2.51 KB | 81.33% | 18.67% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| autoComplete.js | 19.88 KB | 9.17 KB | 46.13% | 53.87% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ | +| bootstrap.css | 281.05 KB | 231.89 KB | 82.51% | 17.49% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| bootstrap.js | 145.40 KB | 62.20 KB | 42.76% | 57.24% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | +| core.css | 111.44 KB | 70.37 KB | 63.17% | 36.83% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | +| main.js | 43.39 KB | 19.23 KB | 44.34% | 55.66% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | +| video-js.css | 53.37 KB | 47.06 KB | 88.24% | 11.76% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| video.js | 2.35 MB | 690.10 KB | 29.33% | 70.67% | 🟩🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️ | + +### Transfert comparison (gzip) + +| File | Original | Minified | Ratio | Gain | Compression | +|------------------|-----------:|----------:|-------:|-------:|---------------------:| +| autoComplete.css | 1.08 KB | 0.89 KB | 82.41% | 17.59% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| autoComplete.js | 5.59 KB | 2.68 KB | 47.96% | 52.04% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ | +| bootstrap.css | 33.56 KB | 28.94 KB | 86.08% | 13.92% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| bootstrap.js | 29.92 KB | 12.58 KB | 42.06% | 57.94% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | +| core.css | 21.98 KB | 13.65 KB | 62.13% | 37.87% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | +| main.js | 10.44 KB | 5.89 KB | 56.45% | 43.55% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | +| video-js.css | 13.14 KB | 12.72 KB | 96.79% | 3.21% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | +| video.js | 538.83 KB | 202.62 KB | 37.61% | 62.39% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | diff --git a/doc/index.md b/doc/index.md deleted file mode 100644 index 46271c7..0000000 --- a/doc/index.md +++ /dev/null @@ -1,8 +0,0 @@ -# Asset Minifier Bundle ---- - -## Installation - -``` -composer require --dev sensiolabs/asset-minifier -```