Новое в Symfony 6.4: Улучшения AssetMapper

AssetMapper был представлен в Symfony 6.3 как новый и современный способ управления ресурсами JavaScript и CSS с нулевой сборкой или внешними зависимостями, как в Node. В Symfony 6.4 мы его улучшили, добавив ряд функций, о которых вы просили. Компонент теперь также стабилен и защищён нашим BC обещанием!

Файлы вендора, загружаемые локально

• Pull Request: [AssetMapper] Always downloading vendor files #51786 Ryan Weaver

В Symfony 6.3, когда вы использовали команду importmap:require для "установки" стороннего пакета, конечный код ссылался на файл в jsDelivr CDN. Вы могли передать опцию --download, чтобы загрузить файл локально, но это не происходило по умолчанию.

В Symfony 6.4 поведение упростилось: когда вы запускаете importmap:require, файл всегда загружается локально. Файлы загружаются в каталог assets/vendor/, по умолчанию игнорируемый в файле .gitignore через рецепт Flex. Это важно, потому что позволяет использовать CSP (Content Security Policy), разрешающую загрузку ресурсов только с вашего собственного домена.

Для загрузки файлов и заполнения каталога выполните команду:

php bin/console importmap:install

Она работает так же, как и composer install.

Поддержка CSS

• Pull Request: [AssetMapper] Add support for CSS files in the importmap #51543 Ryan Weaver

В Symfony 6.4 появилась возможность импортировать CSS-файлы из JavaScript-файлов:

// assets/app.js
import './styles/app.css';

В base.html.twig функция {{ importmap() }} будет выводить тег link для каждого CSS-файла, который она найдёт. Система умна: она просматривает каждый JavaScript-файл, импортированный вашей точкой входа (app.js), в поисках импорта CSS. Импорт CSS обычно не разрешён в модулях JavaScript, но AssetMapper делает это возможным, добавляя запись "noop" в вашу карту импорта для каждого CSS-файла.

Для CSS-файлов от сторонних разработчиков можно использовать команду importmap:require:

php bin/console importmap:require bootstrap/dist/css/bootstrap.min.css

Затем импортируйте его:

// assets/app.js
import 'bootstrap/dist/css/bootstrap.min.css';

Наконец, хотя технически это не является частью Symfony 6.4, поддержка Sass и Tailwind была добавлена благодаря symfonycasts/sass-bundle и symfonycasts/tailwind-bundle. Вы даже можете попробовать использовать TypeScript с AssetMapper благодаря sensiolabs/typescript-bundle.

importmap:audit & importmap:outdated

• Pull Request: [AssetMapper] Add audit command #51650 Hubert Lenoir
• Pull Request: [AssetMapper] Add outdated command #51845 Maelan LE BORGNE

Полагаясь на сторонние пакеты JavaScript, важно узнать о любых потенциальных уязвимостях безопасности как можно раньше. В Symfony 6.4 для этого была добавлена команда importmap:audit:

php bin/console importmap:audit

Эта команда использует базу данных рекомендаций GitHub для проверки всех известных проблем безопасности в используемых пакетах. Если таковые будут найдены, вы увидите чёткий отчёт, а команда завершится с ненулевым кодом выхода.

Кроме того, чтобы проверить, какие пакеты имеют более новые версии, выполните команду:

php bin/console importmap:outdated

Это работает так же, как composer outdated. Пакеты могут быть обновлены с помощью:

php bin/console importmap:update <package-name>

Предзагрузка и точки входа

• Pull Request: [AssetMapper] Add support for CSS files in the importmap #51543 Ryan Weaver

Важной частью использования модулей JavaScript является предварительная загрузка необходимых файлов, чтобы браузер мог загрузить их как можно быстрее. В Symfony 6.3 для этого можно было добавить опцию preload к любой записи в importmap.php.

В Symfony 6.4 этот механизм стал проще и надёжнее. При вызове {{ importmap('app') }} AssetMapper найдёт все JavaScript-файлы, импортируемые app.js (рекурсивно), и предварительно загрузит их. Это означает, что каждый JavaScript-файл, необходимый для выполнения вашего кода, будет предварительно загружен без дополнительной работы.

WebLink и предзагрузка CSS

• Pull Request: [AssetMapper] Automatically preload CSS files if WebLink available #51829 Ryan Weaver

Теги <link rel="stylesheet"> являются "блокирующими рендеринг ресурсами": они блокируют рендеринг вашей страницы, пока не будут загружены и проанализированы. Поэтому чем раньше мы сможем указать браузеру на необходимость их загрузки, тем лучше.

В Symfony 6.4, если вы установите компонент symfony/web-link, AssetMapper будет автоматически добавлять в ваш ответ заголовки Link, указывающие браузеру на необходимость предварительной загрузки всех CSS-файлов, которые в итоге будут отображены с помощью функции {{ importmap() }}.

Улучшение производительности компиляции ресурсов

• Pull Request: [AssetMapper] Optimize memory usage (load only "compilable" assets) #52156 Simon André

AssetMapper не требует этапа сборки, но он все равно просматривает ваши CSS- и JavaScript-файлы в поисках импорта. AssetMapper всегда имел внутренний кэш, чтобы не делать этого при каждом запросе. Но в Symfony 6.4 эта функция была значительно улучшена благодаря отсутствию необходимости просматривать файлы, не относящиеся к CSS и JavaScript. Изображения, шрифты и т.д. теперь передаются напрямую без каких-либо накладных расходов во время разработки или запуска asset-map:compile.