Pull to refresh

Fast-static — Node.js модуль сильно облегчающий жизнь

Reading time2 min
Views11K
При разработке js и css файлы удобнее держать в исходном виде, а при в продакшене их необходимо минизировать и соединять. Существует несколько систем сборки, однако, пользоваться ими весьма сложно и проблематично. По крайней мере я устал от них до такой степени, что решил написать свой сборщик. Получился он очень удобным, поэтому я решил с вами им поделиться.



Другая проблема с которой я решил побороться — не удобство подключения файлов в html. Для того чтобы подключить один файл необходимо писать:
     <script type="text/javascript" src="..."></script>


Если файлов штук 20, то все это превращается в мешанину, где сложно что-то найти. При этом скрипты и css нужно подключать в разных частях страницы. И если нужно, например, bootstrap перекинуть в другую директорию, то нужно изменять пути в начале и в конце страницы. В общем я решил, что так будет намного быстрее подключать файлы:

     <use>
          file1.css
          file2.js
          dir/
               file3.js
               file4.css
     </use>

Также в use я добавил несколько приятных фич. Например, вставку текущего домена (хоста). Но песнь моя не о том.

Чтобы use тега было достаточно и не нужно было создавать файл с конфигом сборки пришлось писать свой middleware к express.

Т.е. сборка происходит «на лету»: когда браузер запрашивает файл в продакшене, то он возвращается минимизированным, хотя на диске он в исходном виде. Я подключил автоматическую компиляцию less, sass, coffeescript, jade, haml и md. Которая тоже происходит на лету.

Естественно все это не лучшим образом может сказаться на производительности продакшен сервера. Поэтому в продакшене результаты кешируются в памяти. Между делом добавил кеширование результатов после gzip (зачем процессор почем зря нагружать). Также доступно кеширование на стороне браузера (ETag). В общем получилось быстрее чем у стандартного static middleware Express/Connect и меньше грузит диск и камень.

Стандартный middleware дважды снимает статистику файла и считывает файл с диска, а потом зипует результат. Мой просто выплевывает данные из памяти.

Подключается это в несколько строк
     npm install fast-static


     var fastStatic= require('fast-static');
     app.use('/static',fastStatic.use('./static'));   // app.use('/static',app.static('./static'));


Потом вместо script/link используете тег use в html файлах.

Вот и все. Только не забывайте env менять у продашен серверов.

В общем получилась удобная система сборки.

Фичи


  • Конвертирует: coffee, haml, less, jade, sass, md
  • Упрощенное подключение файлов через тег use
  • Автоопределение mime-type по расширению
  • поддерживает gzip (кеширует gzip в памяти)
  • поддерживает кеш на стороне браузера (ETag)


Когда env=production производит оптимизацию
  • минимизация css, js и html
  • слияние файлов
  • вставляет небольшие изображения в css
  • кеширует результаты в памяти


Полная документация на гитхабе: https://github.com/Hkey1/fast-static

UPDATE


Новая версия появился инклуд файлов в директории dir/*
Появился простой инклуд библиотек — просто добавить название и версию в use тег. Например «bootstrap 3.1.1»
Значительно ускорен кеш на стороне браузера.
Tags:
Hubs:
Total votes 35: ↑25 and ↓10+15
Comments31

Articles