Использовать меньше (препроцессор CSS) на стороне сервера или на стороне клиента

Question

Каковы плюсы / минусы использования меньшего количества серверной части по сравнению с клиентской в ​​реальной производственной среде? Почему я хотел бы преобразовать мои менее в статические CSS и использовать это при запуске вместо этого? Как я понимаю, css кэшируется как на стороне сервера, так и на стороне клиента, поэтому скорость не должна быть проблемой, а js недоступна - не проблема, так как мое приложение очень зависит от javascript, поэтому, если оно недоступно, у меня будут большие проблемы. Я не совсем понимаю, как работает компиляция на стороне сервера .... спасибо

Answer 1

Я работал над большим проектом, который использовал LESS. Основная проблема, с которой мы столкнулись при компиляции на стороне клиента (в средах разработки), заключается в том, что, поскольку для компиляции на стороне клиента требуется JavaScript, а печать отображает страницу на бумаге без включенного JavaScript, поэтому всякий раз, когда кто-либо печатает страницу, она выходит полностью без стилей. Даже если ваше приложение использует большое количество JavaScript, как у нас, если вы хотите поддерживать печать, вам нужно скомпилировать на стороне сервера или предоставить статический CSS.

Лучшим решением для нас было запустить node.js для компиляции LESS на стороне сервера на лету в среде разработки, а затем предварительно скомпилировать его в один сжатый файл css при развертывании сайта в рабочей среде.

Предварительная компиляция также уменьшает количество запросов отдельных файлов, которые клиент делает с десятков на страницу в нашем случае (по одному на каждый файл LESS), до просто одного файла CSS, и ускоряет загрузку, избегая этапа компиляции (который на стороне клиента less.js должен запускаться каждый раз, когда перемещается новая страница, прежде чем страница может начать отображаться.)

Я бы не советовал компилировать его на стороне сервера на лету в реальной производственной среде, потому что это добавит много ненужной загрузки процессора. Если вы скомпилируете его заранее, он будет потреблять не больше ресурсов сервера, чем один обычный файл CSS.

Answer 2

Браузер может кэшировать только те данные, которые он получает с сервера.Это не включает CSS, скомпилированный в браузере из меньшего (механизмы локального хранения HTML5 в стороне).Это означает, что браузер должен будет компилировать все меньше файлов в CSS при каждой их загрузке - даже если меньше файлов загружается из кэша браузера, а не с сервера.