Психанул. Одностраничник на Laravel.

Apr 2, 09:06 pm Категория:

Ещё раз прошёлся по близлежащим интернетам с целью изучения примеров сайтов на Laravel. Искал варианты с исходниками, разумеется. Всё что нашёл не выдерживает никакой критики. Либо только админка времени выхода первого айфона, либо клиентской части вообще нет, а то и просто набор вьюх без базы данных из серии “я и моё любимое животное (я справа)”. И тогда я решил сделать сайт с нуля. С сассами, бутстрепами и ещё какой-нибудь нежностью. Пусть даже всего из одной страницы.

Да-да, я решил сделать одностраничник. Точнее – переделать чисто пхп-шный концепт, позволяющий из блоков набрать какое-то подобие одностраничного сайта или лендинга. Никаких затей, чисто require block.php и куча стилей со скриптами. И решил я этот сайт оформить как посадочную страницу по продаже разработчика. Типа продаётся программист со всеми вытекающими последствиями. Разумеется страница будет безо всяких мотивирующих приколов типа “заказавшему программиста сегодня скидка 25%”. Хотя…

Ладно, о способах продажи людей в другой раз. Сейчас об инструментах: Laravel, Gulp, Bootstrap и всём том, о чём я писал ранее. Сделать несколько blade шаблонов и собрать из них страницу не является целью данной лабораторной работы. Хочется выяснить размер экономии в байтах при использовании Gulp и Sass. Суммарный размер файлов Bootsrap, jQuery и используемых модулей в моём случае составлял почти 700 килобайт. За красоту приходится платить, но такая цена мне кажется избыточной. Буду резать.

Понимаю, что за один раз всё лишнее я не уберу. Работа эта требует внимания и усидчивости. Для первого раза я хочу убрать самые очевидные излишки жира. Мне тут подсказали, что в быту это называется “липосакция”. Ну пусть так и будет. Sass файл Bootstrap выглядит вот так:

/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";
// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";
// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Каждая вставка – это функциональность и вес. Простой чек-лист позволяет выявить неиспользуемые блоки и просто выключить их. То же самое можно сделать и с остальными Sass файлами. Animation.css, к примеру, с 50 кил сокращается до полутора. Такие вот расклады. В результате css ужимается до 100 килобайт. И я надеюсь, что есть ещё резервы, но уже первые результаты вдохновляют.

Подозреваю, что столь же впечатляющие достижения ждут меня при обрезании jQuery и… отложу это счастье на потом. Просто солью весь скрипт в один файл. Дело в том, что набор скриптов я буду менять и пока не хочу погружаться в это болото. Хватило того, что я полез смотреть, что думает про сайт “PageSpeed Insights”: от Google и зарылся с настройку сервера, ревизию модулей Апача и сравнение с результатами Я.Вебмастера и других инструментов. А ведь я совсем не планировал этого. Ну её, преждевременную оптимизацию. Эксперимент признан удачным и пока на этом остановлюсь.

Теги этой статьи: , ,

 

Комментарии

2017-06-25 5:25 am , Оставь комментарий