Laravel оснащена отдельным продвинутым пакетом Laravel Mix, позволяющим работать с минификацией и компиляцией файлов JS и CSS.
Если вкратце о том, что это дает - то объединяет отдельные файлы стилей CSS и скриптов JS сайта в единые файлы. А также дает возможность браузерам читать информацию о последних изменениях файлов.
Если вкратце о том, для чего это нужно - то чтобы все быстрее загружалось.
Для работы пакета Mix необходимо предварительно установить NodeJS на хостинге.
В корне сайта расположен файл webpack.mix.js. В этом файле прописываются все настройки пакета Laravel Mix. Это выглядит примерно так:
//содержимое файла webpack.mix.js mix // задаем пути для компилятора JS файлов .js('resources/js/app.js', 'public/js') // задаем пути для компилятора CSS файлов .postCss('resources/css/compiled.css', 'public/css') // если сайт использует VueJS то прописываем настройку здесь .vue() // задаем компиляцию версионности файлов .version();
Ниже расскажем подробнее о том, для чего нужна каждая из настроек:
Путь для компилятора JS файлов определяет из какого файла настроек JS компилятора будет компилироваться файл JS и в какой папке он будет храниться. В данном случае файл настроек хранится в /resources/js/app.js и все данные при компиляции в соответствии с настройками из данного файла переносятся в файл /public/js/app.js
В файле настроек /resources/js/app.js можно подключать дополнительные JS модули и скрипты.
Параметр .vue() добавляет в конечный скомпилированный файл всех JS скриптов возможности работы с VueJS.
Чтобы подключить скомпилированный файл /public/js/app.js в шаблон сайта, необходимо в шаблоне прописать код:
//любой файл шаблона сайта //например: /resourses/views/layout.php <script src="{{ mix('js/app.js') }}"></script>
Таким образом получим ссылку в шаблоне на общий файл всех JS скриптов /public/js/app.js который нужно после внесения изменений в JS скриптах перекомпилировать командой
//вызывается из консоли (SSH) npm run development
Если в настройках файла webpack.mix.js указано .version(), то будет генерироваться ссылка вида:
//пример генерируемого html кода <script src="/js/app.js?id=10a71218b3f749171a98"></script>
Данная ссылка даст браузеру информацию о версии изменения файла, если он был изменен, что важно при кешировании.
Для скорости загрузки сайта полезным будет скомпилировать все стили файла в единый CSS файл и минимизировать его. В приведенном выше примере файл настроек компилирования CSS файла должен находится по пути /resources/css/compiled.css.
Подключить все файлы CSS сайта, из которых формируется обозначенный конечный единый скомпилированный файл CSS можно кодом:
//подключение файлов CSS в файл компиляции @import '/css/source/loading.css'; @import '/css/source/fancybox.css';
В данном случае в файл /resources/css/compiled.css будет включено содержимое двух файлов /css/source/loading.css и /css/source/fancybox.css.
Остается добавить компилируемый файл в шаблон дизайна сайта кодом:
//любой файл шаблона сайта //например: /resourses/views/layout.php <link rel="stylesheet" href="{{ mix('/css/compiled.css') }}" />
Таким образом получим ссылку в шаблоне на общий файл всех CSS скриптов /public/css/compiled.css который нужно после внесения изменений в любом из включаемых файлов CSS перекомпилировать командой, аналогичной указанной выше для JS компиляции.
Аналогично компиляции JS скриптов, если в настройках файла webpack.mix.js указано .version(), то будет генерироваться ссылка на CSS вида:
//пример генерируемого html кода <link rel="stylesheet" href="/css/compiled.css?id=6eda40cc5fd55cd5741d" />