|
| 1 | +<picture> |
| 2 | +<source media="(prefers-color-scheme: light)" srcset="./minify.svg" /> |
| 3 | +<img src="./minify.dark.svg" alt="SensioLabs MinifyBundle for Symfony" width="100%" /> |
| 4 | +</picture> |
| 5 | + |
| 6 | +<div align="center"> |
| 7 | + |
| 8 | +[](https://github.com/sensiolabs/minify-bundle/blob/main/composer.json) |
| 9 | +[](https://github.com/sensiolabs/minify-bundle/actions) |
| 10 | +[](https://github.com/sensiolabs/minify-bundle/releases) |
| 11 | +[](https://github.com/sensiolabs/minify-bundle/blob/main/LICENSE) |
| 12 | + |
| 13 | +</div> |
| 14 | + |
| 15 | +<h1 align="center">SensioLabs Minify Bundle</h1> |
| 16 | + |
| 17 | +## Minify integration |
| 18 | + |
| 19 | +SensioLabs Minify Bundle integrates [Minify](https://github.com/tdewolff/minify) into Symfony Asset Mapper. |
| 20 | + |
| 21 | +### Asset Minifier |
| 22 | + |
| 23 | + ✅ Minify `CSS` and `JS` files, remove whitespace, comments, and more.. |
| 24 | + |
| 25 | + 🌍🌍 Reduces the size of your assets by up to `70%` (see metrics below). |
| 26 | + |
| 27 | +🚀🚀🚀 Improves the loading time of your website, and the `user experience`. |
| 28 | + |
| 29 | +### Asset Mapper |
| 30 | + |
| 31 | +🎯 Automatically `minify` assets during the build process. |
| 32 | + |
| 33 | +📦📦 Compress and store minified assets in the `cache` directory. |
| 34 | + |
| 35 | +🌿🌿🌿 Download the Minify binary `automatically` from the repository. |
| 36 | + |
| 37 | +## Minification |
| 38 | + |
| 39 | +### JavaScript |
| 40 | + |
| 41 | +| Asset | Before | After | Diff | Compression | Time | |
| 42 | +|------------------------|-------:|-------:|-----:|------------------------------------------|------:| |
| 43 | +| [Autocomplete.js][1] | 20 kB | 9.2 kB | -54% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 8 ms | |
| 44 | +| [Bootstrap.js][3] | 145 kB | 62 kB | -57% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 10 ms | |
| 45 | +| [Video.js][5] | 2.3 MB | 0.7 MB | -71% | ⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 42 ms | |
| 46 | +| [w3c.org js][7] | 44 kB | 19 kB | -57% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 6 ms | |
| 47 | + |
| 48 | + |
| 49 | +### CSS |
| 50 | + |
| 51 | +| Asset | Before | After | Diff | Compression | Time | |
| 52 | +|-----------------------|-------:|-------:|-----:|-------------------------------------------|-----:| |
| 53 | +| [Autocomplete.css][2] | 3.1 kB | 2.5 kB | -19% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩 | 2 ms | |
| 54 | +| [Bootstrap.css][4] | 281 kB | 232 kB | -18% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩 | 9 ms | |
| 55 | +| [Video-js.css][6] | 53 kB | 47 kB | -12% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜⬜️⬜️⬜️⬜️⬜️⬜️⬜️️🟩🟩 | 4 ms | |
| 56 | +| [w3c.org css][8] | 111 kB | 70 kB | -37% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩 | 5 ms | |
| 57 | + |
| 58 | + |
| 59 | +## Installation |
| 60 | + |
| 61 | +Make sure Composer is installed globally, as explained in the |
| 62 | +[installation chapter](https://getcomposer.org/doc/00-intro.md) |
| 63 | +of the Composer documentation. |
| 64 | + |
| 65 | +### With Symfony Flex |
| 66 | + |
| 67 | +Open a command console, enter your project directory and execute: |
| 68 | + |
| 69 | +```shell |
| 70 | +composer require sensiolabs/minify-bundle |
| 71 | +``` |
| 72 | + |
| 73 | +### Without Symfony Flex |
| 74 | + |
| 75 | +#### Step 1: Download the Bundle |
| 76 | + |
| 77 | +Open a command console, enter your project directory and execute the |
| 78 | +following command to download the latest stable version of this bundle: |
| 79 | + |
| 80 | +```shell |
| 81 | +composer require sensiolabs/minify-bundle |
| 82 | +``` |
| 83 | + |
| 84 | +#### Step 2: Enable the Bundle |
| 85 | + |
| 86 | +Then, enable the bundle by adding it to the list of registered bundles |
| 87 | +in the `config/bundles.php` file of your project: |
| 88 | + |
| 89 | +```php |
| 90 | +// config/bundles.php |
| 91 | + |
| 92 | +return [ |
| 93 | + // ... |
| 94 | + Sensiolabs\MinifyBundle\SensiolabsMinifyBundle::class => ['all' => true], |
| 95 | +]; |
| 96 | +``` |
| 97 | + |
| 98 | +Depending on your deployment process, you might want to enable the |
| 99 | +bundle only in the desired environment(s). |
| 100 | + |
| 101 | + |
| 102 | +## Configuration |
| 103 | + |
| 104 | +### AssetMapper Settings |
| 105 | + |
| 106 | +#### Asset types |
| 107 | + |
| 108 | +```yaml |
| 109 | +# config/packages/sensiolabs_minify.yaml |
| 110 | +sensiolabs_minify: |
| 111 | + asset_mapper: |
| 112 | + |
| 113 | + # Minify CSS and JS files |
| 114 | + types: |
| 115 | + css: true |
| 116 | + js: true |
| 117 | +``` |
| 118 | +
|
| 119 | +#### Exclude files |
| 120 | +
|
| 121 | +```yaml |
| 122 | +# config/packages/sensiolabs_minify.yaml |
| 123 | +sensiolabs_minify: |
| 124 | + asset_mapper: |
| 125 | + |
| 126 | + # Exclude files |
| 127 | + ignore_paths: |
| 128 | + - 'admin/*' |
| 129 | + - '*.min.js' |
| 130 | + |
| 131 | + # Exclude vendor assets |
| 132 | + ignore_vendor: true |
| 133 | +``` |
| 134 | +
|
| 135 | +
|
| 136 | +### Minify Binary |
| 137 | +
|
| 138 | +
|
| 139 | +#### Local binary |
| 140 | +
|
| 141 | +```yaml |
| 142 | +# config/packages/sensiolabs_minify.yaml |
| 143 | +sensiolabs_minify: |
| 144 | + minify: |
| 145 | + |
| 146 | + # Auto-detect the local binary |
| 147 | + local_binary: 'auto' |
| 148 | + |
| 149 | + # Specify the local binary path |
| 150 | + # local_binary: "/usr/local/sbin/minify" |
| 151 | + |
| 152 | + # Or set false to disable |
| 153 | + # local_binary: false |
| 154 | +``` |
| 155 | + |
| 156 | +#### Automatic download |
| 157 | + |
| 158 | +```yaml |
| 159 | +# config/packages/sensiolabs_minify.yaml |
| 160 | +sensiolabs_minify: |
| 161 | + minify: |
| 162 | + |
| 163 | + # Enable automatic download from GitHub |
| 164 | + download_binary: true |
| 165 | + |
| 166 | + # Directory to store the downloaded binary |
| 167 | + download_directory: '%kernel.project_dir%/var/minify' |
| 168 | + |
| 169 | +``` |
| 170 | + |
| 171 | +## Console |
| 172 | + |
| 173 | +### Command Line |
| 174 | + |
| 175 | +#### Install Minify locally |
| 176 | + |
| 177 | +```shell |
| 178 | +php bin/console minify:install |
| 179 | +``` |
| 180 | + |
| 181 | +#### Minify assets |
| 182 | + |
| 183 | +```shell |
| 184 | +php bin/console minify:assets css/main.css css/main.min.css |
| 185 | +``` |
| 186 | + |
| 187 | +## Credits |
| 188 | + |
| 189 | +- Minify binary: [Timo Dewolf](https://github.com/tdewolff) |
| 190 | +- Symfony Bundle: [Simon André](https://github.com/smnandre) & [SensioLabs](https://github.com/sensiolabs) |
| 191 | + |
| 192 | +## License |
| 193 | + |
| 194 | +The [SensioLabs Minify Bundle](https://github.com/sensiolabs/minify-bundle) is released under the [MIT license](LICENSE). |
| 195 | + |
| 196 | + |
| 197 | +[1]: https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.js |
| 198 | +[3]: https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.js |
| 199 | +[5]: https://cdn.jsdelivr.net/npm/video.js@8.18.1/dist/video.js |
| 200 | +[7]: https://github.com/w3c/w3c-website-templates-bundle/blob/main/public/dist/assets/js/main.js |
| 201 | +[2]: https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.css |
| 202 | +[4]: https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.css |
| 203 | +[6]: https://cdn.jsdelivr.net/npm/video.js@8.18.1/dist/video-js.css |
| 204 | +[8]: https://github.com/w3c/w3c-website-templates-bundle/blob/main/public/dist/assets/styles/core.css |
0 commit comments